docs: add TOC minimap + mobile nav and heading anchors

src/app/(shell)/docs/components/asciify/page.tsx

@@ -135,6 +135,7 @@ export default async function AsciifyPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Move your cursor over the photo to see how it reads as ascii characters."

src/app/(shell)/docs/components/bend/page.tsx

@@ -121,6 +121,7 @@ export default async function BendPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Scroll to watch the photo bend over the fold along with the rest of the page."

src/app/(shell)/docs/components/blaze/page.tsx

@@ -121,6 +121,7 @@ export default async function BlazePage() {
         installItem="blaze"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Sweep your cursor across the photo to set it alight."

src/app/(shell)/docs/components/bubble/page.tsx

@@ -158,6 +158,7 @@ export default async function BubblePage() {
         installItem="bubble"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Drag the droplet across the photo, then stop and watch it pool back together."

src/app/(shell)/docs/components/cloth/page.tsx

@@ -134,6 +134,7 @@ export default async function ClothPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="This whole page is hanging on the fabric. Brush it with your cursor, and open the controls to change the wind."

src/app/(shell)/docs/components/clouds/page.tsx

@@ -154,6 +154,7 @@ export default async function CloudsPage() {
         installItem="clouds"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Watch the clouds drift across the photo, and push them around with your cursor."

src/app/(shell)/docs/components/dithered-object/page.tsx

@@ -5,6 +5,7 @@ import { Footer } from "@/components/landing/footer";
 import type { ApiProp } from "@/components/docs/api-reference";
 import { getComponentSources } from "@/lib/registry";
 import { highlight } from "@/components/docs/highlight";
+import { HeadingAnchor } from "@/components/docs/heading-anchor";
 import { DitheredObjectDemo } from "@/demos/dithered-object-demo";
 
 export const metadata: Metadata = {
@@ -204,9 +205,15 @@ export default async function DitheredObjectPage() {
         installItem="dithered-object"
         tags={["webgl", "three.js", "3D"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <section className="mt-8" aria-label="Demo">
-            <h2 className="text-lg font-semibold tracking-[-0.01em]">Demo</h2>
+            <h2
+              id="demo"
+              className="scroll-mt-24 text-lg font-semibold tracking-[-0.01em]"
+            >
+              <HeadingAnchor id="demo">Demo</HeadingAnchor>
+            </h2>
             <p className="mt-2 text-[13px] text-muted-foreground">
               Drag to orbit the object, switch the dither pattern, then open the
               controls to swap in your own GLB/glTF model, SVG, or image by URL

src/app/(shell)/docs/components/droplets/page.tsx

@@ -151,6 +151,7 @@ export default async function DropletsPage() {
         installItem="droplets"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Raindrops refract the photo beneath them as they slide down the page."

src/app/(shell)/docs/components/frost/page.tsx

@@ -210,6 +210,7 @@ export default async function FrostPage() {
         installItem="frost"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Hover across the photo to melt a hole through the ice."

src/app/(shell)/docs/components/glass-object/page.tsx

@@ -6,6 +6,7 @@ import type { ApiProp } from "@/components/docs/api-reference";
 import { getComponentSources } from "@/lib/registry";
 import { highlight } from "@/components/docs/highlight";
 import { GlassObjectDemo } from "@/demos/glass-object-demo";
+import { HeadingAnchor } from "@/components/docs/heading-anchor";
 
 export const metadata: Metadata = {
   title: "Glass Object",
@@ -226,9 +227,15 @@ export default async function GlassObjectPage() {
         installItem="glass-object"
         tags={["webgl", "three.js", "3D"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <section className="mt-8" aria-label="Demo">
-            <h2 className="text-lg font-semibold tracking-[-0.01em]">Demo</h2>
+            <h2
+              id="demo"
+              className="scroll-mt-24 text-lg font-semibold tracking-[-0.01em]"
+            >
+              <HeadingAnchor id="demo">Demo</HeadingAnchor>
+            </h2>
             <p className="mt-2 text-[13px] text-muted-foreground">
               Drag to orbit the glass, then open the controls to tune the
               refraction or swap in your own model, SVG, or image by URL or from

src/app/(shell)/docs/components/glass/page.tsx

@@ -147,6 +147,7 @@ export default async function GlassPage() {
         installItem="glass"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Move the lens over the photo to magnify every detail."

src/app/(shell)/docs/components/glitch/page.tsx

@@ -96,6 +96,7 @@ export default async function GlitchPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Photos make the tears and RGB splits easy to see. Drop the interval to 0 for a constant broadcast failure."

src/app/(shell)/docs/components/grid/page.tsx

@@ -155,6 +155,7 @@ export default async function GridPage() {
         installItem="grid"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Move your cursor across the photo to ripple it tile by tile."

src/app/(shell)/docs/components/hex-float/page.tsx

@@ -159,6 +159,7 @@ export default async function HexFloatPage() {
         installItem="hex-float"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Move your cursor over the photos to open a readable window and watch the ring of tiles glint."

src/app/(shell)/docs/components/laser/page.tsx

@@ -5,6 +5,7 @@ import { Footer } from "@/components/landing/footer";
 import type { ApiProp } from "@/components/docs/api-reference";
 import { getComponentSources } from "@/lib/registry";
 import { highlight } from "@/components/docs/highlight";
+import { HeadingAnchor } from "@/components/docs/heading-anchor";
 import { LaserDemo } from "@/demos/laser-demo";
 
 export const metadata: Metadata = {
@@ -139,6 +140,20 @@ export default async function LaserPage() {
         installItem="laser"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
+        beforeInstall={
+          <section className="mt-8" aria-label="Demo">
+            <h2
+              id="demo"
+              className="scroll-mt-24 text-lg font-semibold tracking-[-0.01em]"
+            >
+              <HeadingAnchor id="demo">Demo</HeadingAnchor>
+            </h2>
+            <p className="mt-2 text-[13px] text-muted-foreground">
+              Scroll to see new content print in from behind the laser beam, hot and shimmering.
+            </p>
+          </section>
+        }
       />
       <div className="mx-auto mt-24 w-full max-w-3xl">
         <Footer variant="docs" />

src/app/(shell)/docs/components/liquid/page.tsx

@@ -135,6 +135,7 @@ export default async function LiquidPage() {
         installItem="liquid"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Drag across the photo to stir it like liquid."

src/app/(shell)/docs/components/magnify/page.tsx

@@ -192,6 +192,7 @@ export default async function MagnifyPage() {
         installItem="magnify"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Scan the photo with the lens, then click to send a ripple through it."

src/app/(shell)/docs/components/particle-object/page.tsx

@@ -5,6 +5,7 @@ import { Footer } from "@/components/landing/footer";
 import type { ApiProp } from "@/components/docs/api-reference";
 import { getComponentSources } from "@/lib/registry";
 import { highlight } from "@/components/docs/highlight";
+import { HeadingAnchor } from "@/components/docs/heading-anchor";
 import { ParticleObjectDemo } from "@/demos/particle-object-demo";
 
 export const metadata: Metadata = {
@@ -211,9 +212,15 @@ export default async function ParticleObjectPage() {
         installItem="particle-object"
         tags={["webgl", "three.js", "3D"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <section className="mt-8" aria-label="Demo">
-            <h2 className="text-lg font-semibold tracking-[-0.01em]">Demo</h2>
+            <h2
+              id="demo"
+              className="scroll-mt-24 text-lg font-semibold tracking-[-0.01em]"
+            >
+              <HeadingAnchor id="demo">Demo</HeadingAnchor>
+            </h2>
             <p className="mt-2 text-[13px] text-muted-foreground">
               Sweep the cursor through the particles, drag to orbit, then open
               the controls to swap in your own model, SVG, or image by URL or

src/app/(shell)/docs/components/particle-reveal/page.tsx

@@ -5,6 +5,7 @@ import { Footer } from "@/components/landing/footer";
 import type { ApiProp } from "@/components/docs/api-reference";
 import { getComponentSources } from "@/lib/registry";
 import { highlight } from "@/components/docs/highlight";
+import { HeadingAnchor } from "@/components/docs/heading-anchor";
 import { ParticleRevealDemo } from "@/demos/particle-reveal-demo";
 
 export const metadata: Metadata = {
@@ -120,7 +121,23 @@ export default async function ParticleRevealPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
-        beforeInstall={<ParticleRevealDemo />}
+        demoSection
+        beforeInstall={
+          <section className="mt-8" aria-label="Demo">
+            <h2
+              id="demo"
+              className="scroll-mt-24 text-lg font-semibold tracking-[-0.01em]"
+            >
+              <HeadingAnchor id="demo">Demo</HeadingAnchor>
+            </h2>
+            <p className="mt-2 text-[13px] text-muted-foreground">
+              Bring the cursor close to merge the dust back into crisp, full-color UI.
+            </p>
+            <div className="mt-3">
+              <ParticleRevealDemo />
+            </div>
+          </section>
+        }
       />
       <div className="mx-auto mt-24 w-full max-w-3xl">
         <Footer variant="docs" />

src/app/(shell)/docs/components/particle-scroll/page.tsx

@@ -128,6 +128,7 @@ export default async function ParticleScrollPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Rich imagery makes the effect shine, watch every pixel of the photo scatter into dust and settle back as it crosses the line."

src/app/(shell)/docs/components/peel/page.tsx

@@ -5,6 +5,7 @@ import { Footer } from "@/components/landing/footer";
 import type { ApiProp } from "@/components/docs/api-reference";
 import { getComponentSources } from "@/lib/registry";
 import { highlight } from "@/components/docs/highlight";
+import { HeadingAnchor } from "@/components/docs/heading-anchor";
 import { PeelDemo } from "@/demos/peel-demo";
 
 export const metadata: Metadata = {
@@ -141,7 +142,23 @@ export default async function PeelPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
-        beforeInstall={<PeelDemo />}
+        demoSection
+        beforeInstall={
+          <section className="mt-8" aria-label="Demo">
+            <h2
+              id="demo"
+              className="scroll-mt-24 text-lg font-semibold tracking-[-0.01em]"
+            >
+              <HeadingAnchor id="demo">Demo</HeadingAnchor>
+            </h2>
+            <p className="mt-2 text-[13px] text-muted-foreground">
+              Move the cursor to an edge and watch the live page peel back like a sticker.
+            </p>
+            <div className="mt-3">
+              <PeelDemo />
+            </div>
+          </section>
+        }
       />
       <div className="mx-auto mt-24 w-full max-w-3xl">
         <Footer variant="docs" />

src/app/(shell)/docs/components/retro-dither/page.tsx

@@ -134,6 +134,7 @@ export default async function RetroDitherPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Move your cursor over the photo to see how the dither treats images."

src/app/(shell)/docs/components/ripple/page.tsx

@@ -110,6 +110,7 @@ export default async function RipplePage() {
         installItem="ripple"
         tags={["html-in-canvas"]}
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Click the photos. Refraction and dispersion show best over imagery."

src/app/(shell)/docs/components/shatter/page.tsx

@@ -158,6 +158,7 @@ export default async function ShatterPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Move your cursor over the photo to break it into floating glass shards."

src/app/(shell)/docs/components/vhs/page.tsx

@@ -141,6 +141,7 @@ export default async function VHSPage() {
         tags={["html-in-canvas"]}
         requiresHtmlInCanvas
         apiReference={API_REFERENCE}
+        demoSection
         beforeInstall={
           <DemoImageSection
             hint="Photos show the tape playback treatment best, wave, chroma bleed, and grain included."

src/app/(shell)/layout.tsx

@@ -6,6 +6,7 @@ import { DocsMobileNav } from "@/components/docs/docs-mobile-nav";
 import { GitHubStars } from "@/components/common/github-stars";
 import { SearchButton, SearchDialog } from "@/components/common/site-search";
 import { ThemeToggle } from "@/components/common/theme-toggle";
+import { TOCLayout } from "@/components/docs/toc-layout";
 
 export default function ShellLayout({
   children,
@@ -41,9 +42,7 @@ export default function ShellLayout({
 
       <SearchDialog />
 
-      <main className="flex-1 px-5 py-10 sm:px-8 lg:pt-16 lg:pr-8 lg:pl-72">
-        {children}
-      </main>
+      <TOCLayout>{children}</TOCLayout>
     </div>
   );
 }