Synapse started as a frustration with context-switching between an editor and a chat interface. The goal was to build a coding environment where the model is a first-class participant — not a sidebar.

The chain-of-thought panel was the hardest design problem: making the model’s reasoning legible without it becoming noise.

We need TOC for every project section header, plus scroll-to on the side of the webpage. Hidden on mobile.

The banner needs fixed aspect ratio (No cropping).

How to use TextBlock or else delete it.

Tabbed in the projectLayout for contents: files, links, different content.

This .mdx file is a template showing the available content blocks. All block components are auto-injected — no imports needed in your .mdx files.

Available blocks:

• <SectionHeader label="..." /> — labelled section divider
• <ImageBlock src="..." alt="..." caption="..." full={true} /> — single image, optional full-bleed
• <PhotoGrid images={[...]} cols={3} /> — responsive image grid (cols 2–4)
• <VideoBlock src="..." poster="..." /> — native video player
• <AudioBlock src="..." title="..." /> — native audio player
• <EmbedBlock src="..." title="..." aspect="16/9" /> — iframe embed (YouTube, Figma, etc.)
• <ModelViewer src="..." alt="..." /> — interactive 3D model (.glb / .gltf)
• <TextBlock> — optional explicit prose wrapper