diff --git a/docs/catalog/blocks/ai-answer-rank.mdx b/docs/catalog/blocks/ai-answer-rank.mdx
index 45df066d4b..b70984226a 100644
--- a/docs/catalog/blocks/ai-answer-rank.mdx
+++ b/docs/catalog/blocks/ai-answer-rank.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>AI Answer Rank</h1>
+  <p>Is your brand in the AI answer? A question types into a chat card, the assistant answers with a ranked list of three picks, then re-ranks: the promoted brand slides into its slot, the picks below step down, and the brand row lands with the one accent highlight and a check. For answer-engine and AI-visibility marketing</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/ai-answer-rank.json"
   compositionId="ai-answer-rank"
   compositionSrc="compositions/ai-answer-rank.html"
   title="AI Answer Rank"
-  description="Is your brand in the AI answer? A question types into a chat card, the assistant answers with a ranked list of three picks, then re-ranks: the promoted brand slides into its slot, the picks below step down, and the brand row lands with the one accent highlight and a check. For answer-engine and AI-visibility marketing"
   variables={[{"id":"prompt","type":"string","role":"content","label":"Prompt","description":"The question typed into the user bubble. Up to about 60 characters keeps it on one or two lines.","default":"What's the best CRM for a small team?"},{"id":"lead","type":"string","role":"content","label":"Answer lead-in","description":"The assistant line above the ranked list.","default":"Here are the top picks:"},{"id":"rowA","type":"string","role":"content","label":"Pick 1","description":"First pick in the original answer: a product other than the brand this video promotes.","portrays":["competitor_name"],"default":"Brand A"},{"id":"rowB","type":"string","role":"content","label":"Pick 2","description":"Second pick in the original answer: a product other than the brand this video promotes.","portrays":["competitor_name"],"default":"Brand B"},{"id":"rowC","type":"string","role":"content","label":"Pick 3","description":"Third pick in the original answer. It drops out of the top three when the brand lands.","portrays":["competitor_name"],"default":"Brand C"},{"id":"brand","type":"string","role":"content","label":"Brand","description":"The brand this video promotes, by its real name. It slides into the answer and takes the highlight.","portrays":["subject_name"],"default":"Your brand"},{"id":"brandRank","type":"enum","role":"content","label":"Brand rank","description":"The slot the brand lands in. Picks at and below it step down one place.","portrays":["recommended_position"],"default":"1","options":[{"value":"1","label":"1st"},{"value":"2","label":"2nd"},{"value":"3","label":"3rd"}]},{"id":"accent","type":"color","role":"style","label":"Accent","description":"Highlight, monogram and check on the brand row, the one accent element.","default":"#16a34a"},{"id":"ink","type":"color","role":"style","label":"Ink","description":"Text colour; every placeholder surface is this ink at an alpha step.","default":"#18181b"},{"id":"ground","type":"color","role":"style","label":"Ground","description":"Chat card surface; the page around it is the ground tinted toward the ink.","default":"#fcfcfb"}]}
   meta={{"duration":9,"width":1080,"height":1080,"category":"Blocks","badge":"Stable","codeLines":559}}
   attribution={{"author":"Tugra Avci","path":"registry/blocks/ai-answer-rank","tags":["mock-ui","ai","chat","ranking","list","marketing","ad-template","square"]}}
@@ -594,7 +598,9 @@ That writes `compositions/ai-answer-rank.html` plus 1 supporting file.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -656,6 +662,4 @@ Created by Tugra Avci.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/ai-chat-reveal.mdx b/docs/catalog/blocks/ai-chat-reveal.mdx
index a22e742255..bc37064db6 100644
--- a/docs/catalog/blocks/ai-chat-reveal.mdx
+++ b/docs/catalog/blocks/ai-chat-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>AI Chat Reveal</h1>
+  <p>A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/ai-chat-reveal.json"
   compositionId="ai-chat-reveal"
   compositionSrc="compositions/ai-chat-reveal.html"
   title="AI Chat Reveal"
-  description="A question is typed on a rising keyboard, sent, and answered by an AI that streams its reply word by word on a measured token rhythm - thinking dot, uneven bursts, bulleted list - before the app cuts to a branded closing card"
   variables={[{"id":"botName","type":"string","role":"content","label":"Assistant name","description":"Name of the assistant answering in this mock chat. It belongs to the host product, never to the brand this video promotes.","portrays":["host_identity"],"default":"Assistant"},{"id":"userMessage","type":"string","role":"content","label":"User message","description":"The question typed on the keyboard and sent. Around 40 characters keeps the measured pacing.","default":"How do I turn my HTML into real video?"},{"id":"answer1","type":"string","role":"content","label":"Answer paragraph 1","description":"First streamed paragraph. It names the brand this video promotes and says what that brand does.","default":"You do not need an editor. HyperFrames renders the HTML you already write into deterministic, pixel-perfect video."},{"id":"answer2","type":"string","role":"content","label":"Answer paragraph 2","description":"Short second beat.","default":"It is markup, not magic."},{"id":"answer3","type":"string","role":"content","label":"Answer paragraph 3","description":"Lead-in to the list.","default":"What you get out of the box:"},{"id":"bullet1","type":"string","role":"content","label":"Bullet 1","description":"First list item.","default":"A catalog of motion primitives you install and own"},{"id":"bullet2","type":"string","role":"content","label":"Bullet 2","description":"Second list item.","default":"GSAP timelines that seek to any frame"},{"id":"bullet3","type":"string","role":"content","label":"Bullet 3","description":"Third list item.","default":"4K renders from a single CLI command"},{"id":"ecHeadline","type":"string","role":"content","label":"End-card headline","description":"Closing card headline. A | breaks the line.","default":"It's not magic.|It's HTML."},{"id":"ecSub","type":"string","role":"content","label":"End-card subline","description":"Positioning sentence of the brand this video promotes, on the closing card.","portrays":["subject_tagline"],"default":"Open-source video rendering — write HTML, ship pixel-perfect video."},{"id":"ecCta","type":"string","role":"content","label":"End-card CTA","description":"Closing-card button label, which names the brand this video promotes. Use the real name of that brand.","portrays":["subject_name"],"default":"Try HyperFrames"},{"id":"ecFooter","type":"string","role":"content","label":"End-card footer","description":"Domain of the brand this video promotes, letter-spaced at the very bottom. Use the real domain.","portrays":["subject_domain"],"default":"HYPERFRAMES.HEYGEN.COM"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent mark of the brand this video promotes, in the closing-card header.","portrays":["subject_logo"],"default":"assets/hyperframes-logo-white.svg"}]}
   meta={{"duration":19.3333,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":1018}}
   attribution={{"author":"Miao Yang","path":"registry/blocks/ai-chat-reveal","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"]}}
@@ -1053,7 +1057,9 @@ That writes `compositions/ai-chat-reveal.html`, plus 2 supporting files under `a
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1118,6 +1124,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index ff26089a28..0f1b3cc1a6 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>App Showcase</h1>
+  <p>Fitness app product showcase with three floating smartphone screens</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/app-showcase.json"
   compositionId="app-showcase"
   compositionSrc="compositions/app-showcase.html"
   title="App Showcase"
-  description="Fitness app product showcase with three floating smartphone screens"
   variables={[]}
   meta={{"duration":5.5,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":947}}
   attribution={{"path":"registry/blocks/app-showcase","tags":["showcase","app","3d"]}}
@@ -982,7 +986,9 @@ That writes one file: `compositions/app-showcase.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1013,6 +1019,4 @@ Tagged `showcase` `app` `3d`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/apple-money-count.mdx b/docs/catalog/blocks/apple-money-count.mdx
index 2808be72da..5dbc2b07b1 100644
--- a/docs/catalog/blocks/apple-money-count.mdx
+++ b/docs/catalog/blocks/apple-money-count.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Apple Money Count</h1>
+  <p>Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/apple-money-count.json"
   compositionId="apple-money-count"
   compositionSrc="compositions/apple-money-count.html"
   title="Apple Money Count"
-  description="Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
   variables={[]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":320}}
   attribution={{"author":"Stronkter","authorUrl":"https://x.com/Stronkter","path":"registry/blocks/apple-money-count","tags":["showcase","finance","kinetic","youtube","sfx"]}}
@@ -355,7 +359,9 @@ That writes `compositions/apple-money-count.html`, plus 1 supporting file under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -396,6 +402,4 @@ Created by [Stronkter](https://x.com/Stronkter).
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/aurora.mdx b/docs/catalog/blocks/aurora.mdx
index cd3d6048e9..875c684dec 100644
--- a/docs/catalog/blocks/aurora.mdx
+++ b/docs/catalog/blocks/aurora.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Aurora</h1>
+  <p>Green and violet aurora curtains ripple across a night sky. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/aurora.json"
   compositionId="aurora"
   compositionSrc="compositions/aurora.html"
   title="Aurora"
-  description="Green and violet aurora curtains ripple across a night sky. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/aurora","tags":["webgpu","webgpu-shader","background","light","aurora","sky"]}}
@@ -68,7 +72,9 @@ That writes `compositions/aurora.html`, plus 2 supporting files under `compositi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `light` `aurora` `sky`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/bar-chart-race.mdx b/docs/catalog/blocks/bar-chart-race.mdx
index a543c80e80..110036ba96 100644
--- a/docs/catalog/blocks/bar-chart-race.mdx
+++ b/docs/catalog/blocks/bar-chart-race.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Bar Chart Race</h1>
+  <p>Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/bar-chart-race.json"
   compositionId="bar-chart-race"
   compositionSrc="compositions/bar-chart-race.html"
   title="Bar Chart Race"
-  description="Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads"
   variables={[{"id":"title","type":"string","label":"Title","default":"Streaming Subscribers by Service"},{"id":"subtitle","type":"string","label":"Subtitle","default":"Ranked by reported subscribers"},{"id":"periods","type":"string","label":"Period labels (comma separated)","default":"2019, 2020, 2021, 2022, 2023, 2024"},{"id":"series","type":"string","label":"Series (one per line: Name: v1, v2, ...)","default":"Northwind: 42, 58, 71, 96, 118, 131\nCobalt: 30, 46, 68, 92, 126, 168\nFerry: 55, 62, 66, 70, 74, 79\nMarlow: 18, 33, 52, 61, 88, 104\nAster: 25, 28, 44, 58, 63, 72\nPell: 12, 20, 39, 47, 55, 90\nQuill: 8, 11, 15, 24, 40, 66\nDunmore: 35, 37, 38, 40, 42, 44"},{"id":"barCount","type":"number","label":"Bars shown","default":6,"min":3,"max":12,"step":1},{"id":"periodDuration","type":"number","label":"Seconds per period","default":2,"min":0.4,"max":6,"step":0.1},{"id":"valuePrefix","type":"string","label":"Value prefix","default":"$"},{"id":"valueSuffix","type":"string","label":"Value suffix","default":"M"},{"id":"valueDecimals","type":"number","label":"Value decimals","default":0,"min":0,"max":3,"step":1},{"id":"accent","type":"color","label":"Leader accent","default":"#c8452d"}]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":584}}
   attribution={{"path":"registry/blocks/bar-chart-race","tags":["data","chart","statistics","ranking"]}}
@@ -619,7 +623,9 @@ That writes one file: `compositions/bar-chart-race.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -708,6 +714,4 @@ Tagged `data` `chart` `statistics` `ranking`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
index 8bc2aa4f43..fa4392a1f7 100644
--- a/docs/catalog/blocks/beat-freeze-cut.mdx
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Beat Freeze Cut</h1>
+  <p>A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/beat-freeze-cut.json"
   compositionId="beat-freeze-cut"
   compositionSrc="compositions/beat-freeze-cut.html"
   title="Beat Freeze Cut"
-  description="A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":879}}
   attribution={{"path":"registry/blocks/beat-freeze-cut","tags":["transition","music","beat-driven","freeze-frame"]}}
@@ -914,7 +918,9 @@ That writes one file: `compositions/beat-freeze-cut.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -952,6 +958,4 @@ Tagged `transition` `music` `beat-driven` `freeze-frame`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/blob.mdx b/docs/catalog/blocks/blob.mdx
index a920033885..e50535dee5 100644
--- a/docs/catalog/blocks/blob.mdx
+++ b/docs/catalog/blocks/blob.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Blob</h1>
+  <p>A soft coral and pink blob with a warm highlight slowly changes shape on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/blob.json"
   compositionId="blob"
   compositionSrc="compositions/blob.html"
   title="Blob"
-  description="A soft coral and pink blob with a warm highlight slowly changes shape on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/blob","tags":["webgpu","webgpu-shader","background","abstract","organic","gradient"]}}
@@ -68,7 +72,9 @@ That writes `compositions/blob.html`, plus 2 supporting files under `composition
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `abstract` `organic` `gradient`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/blue-sweater-intro-video.mdx b/docs/catalog/blocks/blue-sweater-intro-video.mdx
index db8f4bdde9..2d9074e6fa 100644
--- a/docs/catalog/blocks/blue-sweater-intro-video.mdx
+++ b/docs/catalog/blocks/blue-sweater-intro-video.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Blue Sweater Intro Video</h1>
+  <p>Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/blue-sweater-intro-video.json"
   compositionId="blue-sweater-intro-video"
   compositionSrc="compositions/blue-sweater-intro-video.html"
   title="Blue Sweater Intro Video"
-  description="Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":1523}}
   attribution={{"author":"Joe Sai","authorUrl":"https://x.com/_blue_sweater_","path":"registry/blocks/blue-sweater-intro-video","tags":["showcase","ai","creator","sfx"]}}
@@ -1558,7 +1562,9 @@ That writes `compositions/blue-sweater-intro-video.html`, plus 2 supporting file
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1591,6 +1597,4 @@ Created by [Joe Sai](https://x.com/_blue_sweater_).
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
index c323350a74..84f6c8d0e7 100644
--- a/docs/catalog/blocks/camcorder-hud.mdx
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Camcorder HUD</h1>
+  <p>Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/camcorder-hud.json"
   compositionId="camcorder-hud"
   compositionSrc="compositions/camcorder-hud.html"
   title="Camcorder HUD"
-  description="Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Camera","badge":"Stable","codeLines":163}}
   attribution={{"path":"registry/blocks/camcorder-hud","tags":["camcorder","camera","recording","hud","overlay","creator","media-treatment-overlay"]}}
@@ -198,7 +202,9 @@ That writes one file: `compositions/camcorder-hud.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -229,6 +235,4 @@ Tagged `camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatme
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/camera-dolly-zoom.mdx b/docs/catalog/blocks/camera-dolly-zoom.mdx
index 6252af4dae..880b9cc6e2 100644
--- a/docs/catalog/blocks/camera-dolly-zoom.mdx
+++ b/docs/catalog/blocks/camera-dolly-zoom.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Dolly Zoom (Vertigo Shot)</h1>
+  <p>Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/camera-dolly-zoom.json"
   compositionId="camera-dolly-zoom"
   compositionSrc="compositions/camera-dolly-zoom.html"
   title="Dolly Zoom (Vertigo Shot)"
-  description="Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move."
   variables={[{"id":"direction","type":"enum","label":"Dolly direction","default":"out","options":[{"value":"out","label":"Dolly out + zoom in (background rushes in)"},{"value":"in","label":"Dolly in + zoom out (background falls away)"}]},{"id":"strength","type":"number","label":"Move strength (end / start distance ratio)","default":2,"min":1.1,"max":4,"step":0.1},{"id":"subjectDistance","type":"number","label":"Camera-to-subject distance at the start of the move","default":1400,"min":600,"max":3000,"step":50,"unit":"px"},{"id":"easing","type":"enum","label":"Dolly easing","default":"power2.inOut","options":[{"value":"none","label":"Linear"},{"value":"sine.inOut","label":"Sine in-out"},{"value":"power1.inOut","label":"Power1 in-out"},{"value":"power2.inOut","label":"Power2 in-out"},{"value":"power3.inOut","label":"Power3 in-out"}]}]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":354}}
   attribution={{"path":"registry/blocks/camera-dolly-zoom","tags":["camera","depth","3d","cinematic"]}}
@@ -389,7 +393,9 @@ That writes one file: `compositions/camera-dolly-zoom.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -443,6 +449,4 @@ Tagged `camera` `depth` `3d` `cinematic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/canopy-part-title.mdx b/docs/catalog/blocks/canopy-part-title.mdx
index a5525250ca..0c81d0b21f 100644
--- a/docs/catalog/blocks/canopy-part-title.mdx
+++ b/docs/catalog/blocks/canopy-part-title.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Canopy Part Title</h1>
+  <p>Leaves sweep through the frame and part to reveal the headline.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/canopy-part-title.json"
   compositionId="canopy-part-title"
   compositionSrc="compositions/canopy-part-title/canopy-part-title.html"
   title="Canopy Part Title"
-  description="Leaves sweep through the frame and part to reveal the headline."
   variables={[{"id":"headline1","type":"string","label":"Headline 1","default":"Understory"},{"id":"headline2","type":"string","label":"Headline 2","default":"Move slowly"},{"id":"font","type":"string","label":"Headline font","default":"Helvetica"},{"id":"fontWeight","type":"number","label":"Font weight","default":900,"min":100,"max":900,"step":100},{"id":"fontSize","type":"number","label":"Font size (1 = auto-fit)","default":1,"min":0.3,"max":2,"step":0.01},{"id":"letterSpacing","type":"number","label":"Letter spacing (em)","default":0.01,"min":-0.2,"max":1,"step":0.01},{"id":"background","type":"color","label":"Background","default":"#020805"},{"id":"leafCount","type":"number","label":"Leaves per sweep","default":170,"min":40,"max":320,"step":1},{"id":"stayCount","type":"number","label":"Leaves left behind","default":5,"min":0,"max":20,"step":1},{"id":"sweepSpeed","type":"number","label":"Sweep speed","default":1,"min":0.3,"max":3,"step":0.05},{"id":"retainedBreeze","type":"number","label":"Retained leaf breeze","default":1,"min":0,"max":2,"step":0.05}]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"3D motion","badge":"Stable","codeLines":1389}}
   attribution={{"path":"registry/blocks/canopy-part-title","tags":["3d-motion","title-card","leaves","organic","depth-of-field","two-headlines","sweep"]}}
@@ -1424,7 +1428,9 @@ That writes `compositions/canopy-part-title/canopy-part-title.html`, plus 3 supp
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1455,6 +1461,4 @@ Tagged `3d-motion` `title-card` `leaves` `organic` `depth-of-field` `two-headlin
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-circle-1.mdx b/docs/catalog/blocks/carousel-circle-1.mdx
index 5bc85e5cd0..834822902a 100644
--- a/docs/catalog/blocks/carousel-circle-1.mdx
+++ b/docs/catalog/blocks/carousel-circle-1.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Circle Carousel 1</h1>
+  <p>Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-circle-1.json"
   compositionId="carousel-circle-1"
   compositionSrc="compositions/carousel-circle-1.html"
   title="Circle Carousel 1"
-  description="Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1002}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-circle-1","tags":["carousel","gallery","images","showcase","circle"]}}
@@ -1037,7 +1041,9 @@ That writes `compositions/carousel-circle-1.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1103,6 +1109,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-circle-2.mdx b/docs/catalog/blocks/carousel-circle-2.mdx
index 880666df71..aeed4d2495 100644
--- a/docs/catalog/blocks/carousel-circle-2.mdx
+++ b/docs/catalog/blocks/carousel-circle-2.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Circle Carousel 2</h1>
+  <p>Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-circle-2.json"
   compositionId="carousel-circle-2"
   compositionSrc="compositions/carousel-circle-2.html"
   title="Circle Carousel 2"
-  description="Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1002}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-circle-2","tags":["carousel","gallery","images","showcase","circle"]}}
@@ -1037,7 +1041,9 @@ That writes `compositions/carousel-circle-2.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1103,6 +1109,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-circle-3.mdx b/docs/catalog/blocks/carousel-circle-3.mdx
index 5cc711ca67..0633c5fe28 100644
--- a/docs/catalog/blocks/carousel-circle-3.mdx
+++ b/docs/catalog/blocks/carousel-circle-3.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Circle Carousel 3</h1>
+  <p>Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-circle-3.json"
   compositionId="carousel-circle-3"
   compositionSrc="compositions/carousel-circle-3.html"
   title="Circle Carousel 3"
-  description="Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1002}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-circle-3","tags":["carousel","gallery","images","showcase","circle"]}}
@@ -1037,7 +1041,9 @@ That writes `compositions/carousel-circle-3.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1103,6 +1109,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-circle-4.mdx b/docs/catalog/blocks/carousel-circle-4.mdx
index 7a481b477b..7569cf147f 100644
--- a/docs/catalog/blocks/carousel-circle-4.mdx
+++ b/docs/catalog/blocks/carousel-circle-4.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Circle Carousel 4</h1>
+  <p>Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-circle-4.json"
   compositionId="carousel-circle-4"
   compositionSrc="compositions/carousel-circle-4.html"
   title="Circle Carousel 4"
-  description="Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1002}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-circle-4","tags":["carousel","gallery","images","showcase","circle"]}}
@@ -1037,7 +1041,9 @@ That writes `compositions/carousel-circle-4.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1103,6 +1109,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-circle-5.mdx b/docs/catalog/blocks/carousel-circle-5.mdx
index fc6f32ed3b..adcc236105 100644
--- a/docs/catalog/blocks/carousel-circle-5.mdx
+++ b/docs/catalog/blocks/carousel-circle-5.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Circle Carousel 5</h1>
+  <p>Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-circle-5.json"
   compositionId="carousel-circle-5"
   compositionSrc="compositions/carousel-circle-5.html"
   title="Circle Carousel 5"
-  description="Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1002}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-circle-5","tags":["carousel","gallery","images","showcase","circle"]}}
@@ -1037,7 +1041,9 @@ That writes `compositions/carousel-circle-5.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1103,6 +1109,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-orbit-1.mdx b/docs/catalog/blocks/carousel-orbit-1.mdx
index ff348514d2..4b305de207 100644
--- a/docs/catalog/blocks/carousel-orbit-1.mdx
+++ b/docs/catalog/blocks/carousel-orbit-1.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Orbit Carousel 1</h1>
+  <p>Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-orbit-1.json"
   compositionId="carousel-orbit-1"
   compositionSrc="compositions/carousel-orbit-1.html"
   title="Orbit Carousel 1"
-  description="Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"image13","type":"image","role":"content","label":"Card image 13","description":"Image on card 13 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/dc265f0c99df9596.jpg"},{"id":"image14","type":"image","role":"content","label":"Card image 14","description":"Image on card 14 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/830389dd85314cef.jpg"},{"id":"image15","type":"image","role":"content","label":"Card image 15","description":"Image on card 15 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/bba30166a86960c3.jpg"},{"id":"image16","type":"image","role":"content","label":"Card image 16","description":"Image on card 16 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5cd0712a041701c7.jpg"},{"id":"image17","type":"image","role":"content","label":"Card image 17","description":"Image on card 17 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e92ca3af976fb9bf.jpg"},{"id":"image18","type":"image","role":"content","label":"Card image 18","description":"Image on card 18 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4f27a7562be618.jpg"},{"id":"image19","type":"image","role":"content","label":"Card image 19","description":"Image on card 19 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4d4530bd67c951b4.jpg"},{"id":"image20","type":"image","role":"content","label":"Card image 20","description":"Image on card 20 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image21","type":"image","role":"content","label":"Card image 21","description":"Image on card 21 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/368947470dbc62d2.jpg"},{"id":"image22","type":"image","role":"content","label":"Card image 22","description":"Image on card 22 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image23","type":"image","role":"content","label":"Card image 23","description":"Image on card 23 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/c7e4be702908c77a.jpg"},{"id":"image24","type":"image","role":"content","label":"Card image 24","description":"Image on card 24 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4ddd90caa12fe2bd.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1024}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-orbit-1","tags":["carousel","gallery","images","showcase","orbit","3d"]}}
@@ -1059,7 +1063,9 @@ That writes `compositions/carousel-orbit-1.html`, plus 24 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1137,6 +1143,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-orbit-2.mdx b/docs/catalog/blocks/carousel-orbit-2.mdx
index 7d6ce79492..7cf2b45720 100644
--- a/docs/catalog/blocks/carousel-orbit-2.mdx
+++ b/docs/catalog/blocks/carousel-orbit-2.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Orbit Carousel 2</h1>
+  <p>Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-orbit-2.json"
   compositionId="carousel-orbit-2"
   compositionSrc="compositions/carousel-orbit-2.html"
   title="Orbit Carousel 2"
-  description="Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"image13","type":"image","role":"content","label":"Card image 13","description":"Image on card 13 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/dc265f0c99df9596.jpg"},{"id":"image14","type":"image","role":"content","label":"Card image 14","description":"Image on card 14 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/830389dd85314cef.jpg"},{"id":"image15","type":"image","role":"content","label":"Card image 15","description":"Image on card 15 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/bba30166a86960c3.jpg"},{"id":"image16","type":"image","role":"content","label":"Card image 16","description":"Image on card 16 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5cd0712a041701c7.jpg"},{"id":"image17","type":"image","role":"content","label":"Card image 17","description":"Image on card 17 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e92ca3af976fb9bf.jpg"},{"id":"image18","type":"image","role":"content","label":"Card image 18","description":"Image on card 18 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4f27a7562be618.jpg"},{"id":"image19","type":"image","role":"content","label":"Card image 19","description":"Image on card 19 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4d4530bd67c951b4.jpg"},{"id":"image20","type":"image","role":"content","label":"Card image 20","description":"Image on card 20 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image21","type":"image","role":"content","label":"Card image 21","description":"Image on card 21 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/368947470dbc62d2.jpg"},{"id":"image22","type":"image","role":"content","label":"Card image 22","description":"Image on card 22 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image23","type":"image","role":"content","label":"Card image 23","description":"Image on card 23 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/c7e4be702908c77a.jpg"},{"id":"image24","type":"image","role":"content","label":"Card image 24","description":"Image on card 24 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4ddd90caa12fe2bd.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1024}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-orbit-2","tags":["carousel","gallery","images","showcase","orbit","3d"]}}
@@ -1059,7 +1063,9 @@ That writes `compositions/carousel-orbit-2.html`, plus 24 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1137,6 +1143,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-orbit-3.mdx b/docs/catalog/blocks/carousel-orbit-3.mdx
index 57d67e898d..4b51f647bd 100644
--- a/docs/catalog/blocks/carousel-orbit-3.mdx
+++ b/docs/catalog/blocks/carousel-orbit-3.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Orbit Carousel 3</h1>
+  <p>Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-orbit-3.json"
   compositionId="carousel-orbit-3"
   compositionSrc="compositions/carousel-orbit-3.html"
   title="Orbit Carousel 3"
-  description="Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"image13","type":"image","role":"content","label":"Card image 13","description":"Image on card 13 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/dc265f0c99df9596.jpg"},{"id":"image14","type":"image","role":"content","label":"Card image 14","description":"Image on card 14 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/830389dd85314cef.jpg"},{"id":"image15","type":"image","role":"content","label":"Card image 15","description":"Image on card 15 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/bba30166a86960c3.jpg"},{"id":"image16","type":"image","role":"content","label":"Card image 16","description":"Image on card 16 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5cd0712a041701c7.jpg"},{"id":"image17","type":"image","role":"content","label":"Card image 17","description":"Image on card 17 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e92ca3af976fb9bf.jpg"},{"id":"image18","type":"image","role":"content","label":"Card image 18","description":"Image on card 18 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4f27a7562be618.jpg"},{"id":"image19","type":"image","role":"content","label":"Card image 19","description":"Image on card 19 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4d4530bd67c951b4.jpg"},{"id":"image20","type":"image","role":"content","label":"Card image 20","description":"Image on card 20 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image21","type":"image","role":"content","label":"Card image 21","description":"Image on card 21 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/368947470dbc62d2.jpg"},{"id":"image22","type":"image","role":"content","label":"Card image 22","description":"Image on card 22 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image23","type":"image","role":"content","label":"Card image 23","description":"Image on card 23 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/c7e4be702908c77a.jpg"},{"id":"image24","type":"image","role":"content","label":"Card image 24","description":"Image on card 24 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4ddd90caa12fe2bd.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1024}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-orbit-3","tags":["carousel","gallery","images","showcase","orbit","3d"]}}
@@ -1059,7 +1063,9 @@ That writes `compositions/carousel-orbit-3.html`, plus 24 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1137,6 +1143,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-orbit-4.mdx b/docs/catalog/blocks/carousel-orbit-4.mdx
index 0272c757d9..0f22bb1d5a 100644
--- a/docs/catalog/blocks/carousel-orbit-4.mdx
+++ b/docs/catalog/blocks/carousel-orbit-4.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Orbit Carousel 4</h1>
+  <p>Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-orbit-4.json"
   compositionId="carousel-orbit-4"
   compositionSrc="compositions/carousel-orbit-4.html"
   title="Orbit Carousel 4"
-  description="Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"image13","type":"image","role":"content","label":"Card image 13","description":"Image on card 13 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/dc265f0c99df9596.jpg"},{"id":"image14","type":"image","role":"content","label":"Card image 14","description":"Image on card 14 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/830389dd85314cef.jpg"},{"id":"image15","type":"image","role":"content","label":"Card image 15","description":"Image on card 15 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/bba30166a86960c3.jpg"},{"id":"image16","type":"image","role":"content","label":"Card image 16","description":"Image on card 16 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5cd0712a041701c7.jpg"},{"id":"image17","type":"image","role":"content","label":"Card image 17","description":"Image on card 17 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e92ca3af976fb9bf.jpg"},{"id":"image18","type":"image","role":"content","label":"Card image 18","description":"Image on card 18 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4f27a7562be618.jpg"},{"id":"image19","type":"image","role":"content","label":"Card image 19","description":"Image on card 19 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4d4530bd67c951b4.jpg"},{"id":"image20","type":"image","role":"content","label":"Card image 20","description":"Image on card 20 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image21","type":"image","role":"content","label":"Card image 21","description":"Image on card 21 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/368947470dbc62d2.jpg"},{"id":"image22","type":"image","role":"content","label":"Card image 22","description":"Image on card 22 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image23","type":"image","role":"content","label":"Card image 23","description":"Image on card 23 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/c7e4be702908c77a.jpg"},{"id":"image24","type":"image","role":"content","label":"Card image 24","description":"Image on card 24 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4ddd90caa12fe2bd.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1040}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-orbit-4","tags":["carousel","gallery","images","showcase","orbit","3d"]}}
@@ -1075,7 +1079,9 @@ That writes `compositions/carousel-orbit-4.html`, plus 24 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1153,6 +1159,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-orbit-5.mdx b/docs/catalog/blocks/carousel-orbit-5.mdx
index ec2caf2a97..92ae72a6c2 100644
--- a/docs/catalog/blocks/carousel-orbit-5.mdx
+++ b/docs/catalog/blocks/carousel-orbit-5.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Orbit Carousel 5</h1>
+  <p>Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-orbit-5.json"
   compositionId="carousel-orbit-5"
   compositionSrc="compositions/carousel-orbit-5.html"
   title="Orbit Carousel 5"
-  description="Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"image13","type":"image","role":"content","label":"Card image 13","description":"Image on card 13 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/dc265f0c99df9596.jpg"},{"id":"image14","type":"image","role":"content","label":"Card image 14","description":"Image on card 14 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/830389dd85314cef.jpg"},{"id":"image15","type":"image","role":"content","label":"Card image 15","description":"Image on card 15 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/bba30166a86960c3.jpg"},{"id":"image16","type":"image","role":"content","label":"Card image 16","description":"Image on card 16 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5cd0712a041701c7.jpg"},{"id":"image17","type":"image","role":"content","label":"Card image 17","description":"Image on card 17 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e92ca3af976fb9bf.jpg"},{"id":"image18","type":"image","role":"content","label":"Card image 18","description":"Image on card 18 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4f27a7562be618.jpg"},{"id":"image19","type":"image","role":"content","label":"Card image 19","description":"Image on card 19 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4d4530bd67c951b4.jpg"},{"id":"image20","type":"image","role":"content","label":"Card image 20","description":"Image on card 20 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image21","type":"image","role":"content","label":"Card image 21","description":"Image on card 21 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/368947470dbc62d2.jpg"},{"id":"image22","type":"image","role":"content","label":"Card image 22","description":"Image on card 22 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image23","type":"image","role":"content","label":"Card image 23","description":"Image on card 23 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/c7e4be702908c77a.jpg"},{"id":"image24","type":"image","role":"content","label":"Card image 24","description":"Image on card 24 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4ddd90caa12fe2bd.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1024}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-orbit-5","tags":["carousel","gallery","images","showcase","orbit","3d"]}}
@@ -1059,7 +1063,9 @@ That writes `compositions/carousel-orbit-5.html`, plus 24 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1137,6 +1143,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-path-1.mdx b/docs/catalog/blocks/carousel-path-1.mdx
index a290e45323..0ffdac8c67 100644
--- a/docs/catalog/blocks/carousel-path-1.mdx
+++ b/docs/catalog/blocks/carousel-path-1.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Path Carousel 1</h1>
+  <p>Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-path-1.json"
   compositionId="carousel-path-1"
   compositionSrc="compositions/carousel-path-1.html"
   title="Path Carousel 1"
-  description="Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"image13","type":"image","role":"content","label":"Card image 13","description":"Image on card 13 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/dc265f0c99df9596.jpg"},{"id":"image14","type":"image","role":"content","label":"Card image 14","description":"Image on card 14 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/830389dd85314cef.jpg"},{"id":"image15","type":"image","role":"content","label":"Card image 15","description":"Image on card 15 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/bba30166a86960c3.jpg"},{"id":"image16","type":"image","role":"content","label":"Card image 16","description":"Image on card 16 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5cd0712a041701c7.jpg"},{"id":"image17","type":"image","role":"content","label":"Card image 17","description":"Image on card 17 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e92ca3af976fb9bf.jpg"},{"id":"image18","type":"image","role":"content","label":"Card image 18","description":"Image on card 18 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4f27a7562be618.jpg"},{"id":"image19","type":"image","role":"content","label":"Card image 19","description":"Image on card 19 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4d4530bd67c951b4.jpg"},{"id":"image20","type":"image","role":"content","label":"Card image 20","description":"Image on card 20 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image21","type":"image","role":"content","label":"Card image 21","description":"Image on card 21 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/368947470dbc62d2.jpg"},{"id":"image22","type":"image","role":"content","label":"Card image 22","description":"Image on card 22 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image23","type":"image","role":"content","label":"Card image 23","description":"Image on card 23 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/c7e4be702908c77a.jpg"},{"id":"image24","type":"image","role":"content","label":"Card image 24","description":"Image on card 24 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4ddd90caa12fe2bd.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1046}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-path-1","tags":["carousel","gallery","images","showcase","path"]}}
@@ -1081,7 +1085,9 @@ That writes `compositions/carousel-path-1.html`, plus 24 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1159,6 +1165,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-path-2.mdx b/docs/catalog/blocks/carousel-path-2.mdx
index 03f7e03ddf..d379c00d74 100644
--- a/docs/catalog/blocks/carousel-path-2.mdx
+++ b/docs/catalog/blocks/carousel-path-2.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Path Carousel 2</h1>
+  <p>Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-path-2.json"
   compositionId="carousel-path-2"
   compositionSrc="compositions/carousel-path-2.html"
   title="Path Carousel 2"
-  description="Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1003}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-path-2","tags":["carousel","gallery","images","showcase","path"]}}
@@ -1038,7 +1042,9 @@ That writes `compositions/carousel-path-2.html`, plus 12 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1104,6 +1110,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-path-3.mdx b/docs/catalog/blocks/carousel-path-3.mdx
index ac740c7045..3bf195fc77 100644
--- a/docs/catalog/blocks/carousel-path-3.mdx
+++ b/docs/catalog/blocks/carousel-path-3.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Path Carousel 3</h1>
+  <p>Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-path-3.json"
   compositionId="carousel-path-3"
   compositionSrc="compositions/carousel-path-3.html"
   title="Path Carousel 3"
-  description="Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1017}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-path-3","tags":["carousel","gallery","images","showcase","path"]}}
@@ -1052,7 +1056,9 @@ That writes `compositions/carousel-path-3.html`, plus 12 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1118,6 +1124,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-path-4.mdx b/docs/catalog/blocks/carousel-path-4.mdx
index 3a7cdddab7..06520f9f59 100644
--- a/docs/catalog/blocks/carousel-path-4.mdx
+++ b/docs/catalog/blocks/carousel-path-4.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Path Carousel 4</h1>
+  <p>Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-path-4.json"
   compositionId="carousel-path-4"
   compositionSrc="compositions/carousel-path-4.html"
   title="Path Carousel 4"
-  description="Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"image13","type":"image","role":"content","label":"Card image 13","description":"Image on card 13 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/dc265f0c99df9596.jpg"},{"id":"image14","type":"image","role":"content","label":"Card image 14","description":"Image on card 14 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/830389dd85314cef.jpg"},{"id":"image15","type":"image","role":"content","label":"Card image 15","description":"Image on card 15 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/bba30166a86960c3.jpg"},{"id":"image16","type":"image","role":"content","label":"Card image 16","description":"Image on card 16 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5cd0712a041701c7.jpg"},{"id":"image17","type":"image","role":"content","label":"Card image 17","description":"Image on card 17 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e92ca3af976fb9bf.jpg"},{"id":"image18","type":"image","role":"content","label":"Card image 18","description":"Image on card 18 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4f27a7562be618.jpg"},{"id":"image19","type":"image","role":"content","label":"Card image 19","description":"Image on card 19 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4d4530bd67c951b4.jpg"},{"id":"image20","type":"image","role":"content","label":"Card image 20","description":"Image on card 20 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image21","type":"image","role":"content","label":"Card image 21","description":"Image on card 21 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/368947470dbc62d2.jpg"},{"id":"image22","type":"image","role":"content","label":"Card image 22","description":"Image on card 22 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image23","type":"image","role":"content","label":"Card image 23","description":"Image on card 23 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/c7e4be702908c77a.jpg"},{"id":"image24","type":"image","role":"content","label":"Card image 24","description":"Image on card 24 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4ddd90caa12fe2bd.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1046}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-path-4","tags":["carousel","gallery","images","showcase","path"]}}
@@ -1081,7 +1085,9 @@ That writes `compositions/carousel-path-4.html`, plus 24 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1159,6 +1165,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-path-5.mdx b/docs/catalog/blocks/carousel-path-5.mdx
index a6a6495ba9..b8c79b0de2 100644
--- a/docs/catalog/blocks/carousel-path-5.mdx
+++ b/docs/catalog/blocks/carousel-path-5.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Path Carousel 5</h1>
+  <p>Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-path-5.json"
   compositionId="carousel-path-5"
   compositionSrc="compositions/carousel-path-5.html"
   title="Path Carousel 5"
-  description="Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"image13","type":"image","role":"content","label":"Card image 13","description":"Image on card 13 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/dc265f0c99df9596.jpg"},{"id":"image14","type":"image","role":"content","label":"Card image 14","description":"Image on card 14 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/830389dd85314cef.jpg"},{"id":"image15","type":"image","role":"content","label":"Card image 15","description":"Image on card 15 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/bba30166a86960c3.jpg"},{"id":"image16","type":"image","role":"content","label":"Card image 16","description":"Image on card 16 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5cd0712a041701c7.jpg"},{"id":"image17","type":"image","role":"content","label":"Card image 17","description":"Image on card 17 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e92ca3af976fb9bf.jpg"},{"id":"image18","type":"image","role":"content","label":"Card image 18","description":"Image on card 18 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4f27a7562be618.jpg"},{"id":"image19","type":"image","role":"content","label":"Card image 19","description":"Image on card 19 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4d4530bd67c951b4.jpg"},{"id":"image20","type":"image","role":"content","label":"Card image 20","description":"Image on card 20 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image21","type":"image","role":"content","label":"Card image 21","description":"Image on card 21 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/368947470dbc62d2.jpg"},{"id":"image22","type":"image","role":"content","label":"Card image 22","description":"Image on card 22 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/28b5685774692ce0.jpg"},{"id":"image23","type":"image","role":"content","label":"Card image 23","description":"Image on card 23 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/c7e4be702908c77a.jpg"},{"id":"image24","type":"image","role":"content","label":"Card image 24","description":"Image on card 24 of 24. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4ddd90caa12fe2bd.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1045}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-path-5","tags":["carousel","gallery","images","showcase","path"]}}
@@ -1080,7 +1084,9 @@ That writes `compositions/carousel-path-5.html`, plus 24 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1158,6 +1164,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-text-circle-1.mdx b/docs/catalog/blocks/carousel-text-circle-1.mdx
index 86d6991cf8..c4cc010945 100644
--- a/docs/catalog/blocks/carousel-text-circle-1.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-1.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text + Circle Carousel 1</h1>
+  <p>A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-text-circle-1.json"
   compositionId="carousel-text-circle-1"
   compositionSrc="compositions/carousel-text-circle-1.html"
   title="Text + Circle Carousel 1"
-  description="A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 1)."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"line1","type":"string","role":"content","label":"Headline","description":"First line; words reveal one by one right to left and drift to centre.","default":"Carousels are so in"},{"id":"line2","type":"string","role":"content","label":"Second line","description":"Line after the hard cut; arrives at 1.4× and settles to 1.0.","default":"so we made them in hf"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1043}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-text-circle-1","tags":["carousel","title-card","kinetic-text","images","showcase","circle"]}}
@@ -1078,7 +1082,9 @@ That writes `compositions/carousel-text-circle-1.html`, plus 12 supporting files
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1146,6 +1152,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-text-circle-2.mdx b/docs/catalog/blocks/carousel-text-circle-2.mdx
index 5cdaed98da..fdc8b1044a 100644
--- a/docs/catalog/blocks/carousel-text-circle-2.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-2.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text + Circle Carousel 2</h1>
+  <p>A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-text-circle-2.json"
   compositionId="carousel-text-circle-2"
   compositionSrc="compositions/carousel-text-circle-2.html"
   title="Text + Circle Carousel 2"
-  description="A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 2)."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"line1","type":"string","role":"content","label":"Headline","description":"First line; words reveal one by one right to left and drift to centre.","default":"Carousels are so in"},{"id":"line2","type":"string","role":"content","label":"Second line","description":"Line after the hard cut; arrives at 1.4× and settles to 1.0.","default":"so we made them in hf"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1043}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-text-circle-2","tags":["carousel","title-card","kinetic-text","images","showcase","circle"]}}
@@ -1078,7 +1082,9 @@ That writes `compositions/carousel-text-circle-2.html`, plus 12 supporting files
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1146,6 +1152,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-text-circle-3.mdx b/docs/catalog/blocks/carousel-text-circle-3.mdx
index c8ef56a65a..e4f2b92694 100644
--- a/docs/catalog/blocks/carousel-text-circle-3.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-3.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text + Circle Carousel 3</h1>
+  <p>A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-text-circle-3.json"
   compositionId="carousel-text-circle-3"
   compositionSrc="compositions/carousel-text-circle-3.html"
   title="Text + Circle Carousel 3"
-  description="A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 3)."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"line1","type":"string","role":"content","label":"Headline","description":"First line; words reveal one by one right to left and drift to centre.","default":"Carousels are so in"},{"id":"line2","type":"string","role":"content","label":"Second line","description":"Line after the hard cut; arrives at 1.4× and settles to 1.0.","default":"so we made them in hf"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1043}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-text-circle-3","tags":["carousel","title-card","kinetic-text","images","showcase","circle"]}}
@@ -1078,7 +1082,9 @@ That writes `compositions/carousel-text-circle-3.html`, plus 12 supporting files
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1146,6 +1152,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-text-circle-4.mdx b/docs/catalog/blocks/carousel-text-circle-4.mdx
index 79e48232a4..0ac75d90cb 100644
--- a/docs/catalog/blocks/carousel-text-circle-4.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-4.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text + Circle Carousel 4</h1>
+  <p>A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-text-circle-4.json"
   compositionId="carousel-text-circle-4"
   compositionSrc="compositions/carousel-text-circle-4.html"
   title="Text + Circle Carousel 4"
-  description="A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 4)."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"line1","type":"string","role":"content","label":"Headline","description":"First line; words reveal one by one right to left and drift to centre.","default":"Carousels are so in"},{"id":"line2","type":"string","role":"content","label":"Second line","description":"Line after the hard cut; arrives at 1.4× and settles to 1.0.","default":"so we made them in hf"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1043}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-text-circle-4","tags":["carousel","title-card","kinetic-text","images","showcase","circle"]}}
@@ -1078,7 +1082,9 @@ That writes `compositions/carousel-text-circle-4.html`, plus 12 supporting files
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1146,6 +1152,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-text-circle-5.mdx b/docs/catalog/blocks/carousel-text-circle-5.mdx
index 57137a3c76..20be4b1e29 100644
--- a/docs/catalog/blocks/carousel-text-circle-5.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-5.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text + Circle Carousel 5</h1>
+  <p>A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-text-circle-5.json"
   compositionId="carousel-text-circle-5"
   compositionSrc="compositions/carousel-text-circle-5.html"
   title="Text + Circle Carousel 5"
-  description="A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts to a second line that arrives at 1.4× (Circle style 5)."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"line1","type":"string","role":"content","label":"Headline","description":"First line; words reveal one by one right to left and drift to centre.","default":"Carousels are so in"},{"id":"line2","type":"string","role":"content","label":"Second line","description":"Line after the hard cut; arrives at 1.4× and settles to 1.0.","default":"so we made them in hf"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1043}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-text-circle-5","tags":["carousel","title-card","kinetic-text","images","showcase","circle"]}}
@@ -1078,7 +1082,9 @@ That writes `compositions/carousel-text-circle-5.html`, plus 12 supporting files
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1146,6 +1152,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-vision-1.mdx b/docs/catalog/blocks/carousel-vision-1.mdx
index 2728969554..3501aa3e90 100644
--- a/docs/catalog/blocks/carousel-vision-1.mdx
+++ b/docs/catalog/blocks/carousel-vision-1.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vision Carousel 1</h1>
+  <p>A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-vision-1.json"
   compositionId="carousel-vision-1"
   compositionSrc="compositions/carousel-vision-1.html"
   title="Vision Carousel 1"
-  description="A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 1); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1006}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-vision-1","tags":["carousel","gallery","images","showcase","vision","3d"]}}
@@ -1041,7 +1045,9 @@ That writes `compositions/carousel-vision-1.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1107,6 +1113,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-vision-2.mdx b/docs/catalog/blocks/carousel-vision-2.mdx
index 1711c76a18..83a6cb56a9 100644
--- a/docs/catalog/blocks/carousel-vision-2.mdx
+++ b/docs/catalog/blocks/carousel-vision-2.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vision Carousel 2</h1>
+  <p>A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-vision-2.json"
   compositionId="carousel-vision-2"
   compositionSrc="compositions/carousel-vision-2.html"
   title="Vision Carousel 2"
-  description="A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 2); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1006}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-vision-2","tags":["carousel","gallery","images","showcase","vision","3d"]}}
@@ -1041,7 +1045,9 @@ That writes `compositions/carousel-vision-2.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1107,6 +1113,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-vision-3.mdx b/docs/catalog/blocks/carousel-vision-3.mdx
index 688ccc2156..71ff46120d 100644
--- a/docs/catalog/blocks/carousel-vision-3.mdx
+++ b/docs/catalog/blocks/carousel-vision-3.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vision Carousel 3</h1>
+  <p>A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-vision-3.json"
   compositionId="carousel-vision-3"
   compositionSrc="compositions/carousel-vision-3.html"
   title="Vision Carousel 3"
-  description="A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 3); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1006}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-vision-3","tags":["carousel","gallery","images","showcase","vision","3d"]}}
@@ -1041,7 +1045,9 @@ That writes `compositions/carousel-vision-3.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1107,6 +1113,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-vision-4.mdx b/docs/catalog/blocks/carousel-vision-4.mdx
index 8b434d0645..3bc354bdda 100644
--- a/docs/catalog/blocks/carousel-vision-4.mdx
+++ b/docs/catalog/blocks/carousel-vision-4.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vision Carousel 4</h1>
+  <p>A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-vision-4.json"
   compositionId="carousel-vision-4"
   compositionSrc="compositions/carousel-vision-4.html"
   title="Vision Carousel 4"
-  description="A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 4); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1013}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-vision-4","tags":["carousel","gallery","images","showcase","vision","3d"]}}
@@ -1048,7 +1052,9 @@ That writes `compositions/carousel-vision-4.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1114,6 +1120,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/carousel-vision-5.mdx b/docs/catalog/blocks/carousel-vision-5.mdx
index 0332386e34..90f605fd79 100644
--- a/docs/catalog/blocks/carousel-vision-5.mdx
+++ b/docs/catalog/blocks/carousel-vision-5.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vision Carousel 5</h1>
+  <p>A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/carousel-vision-5.json"
   compositionId="carousel-vision-5"
   compositionSrc="compositions/carousel-vision-5.html"
   title="Vision Carousel 5"
-  description="A ring of large image cards tilted into a row under a 3D camera, each card turning toward the centre (Vision style 5); 12 image slots."
   variables={[{"id":"image1","type":"image","role":"content","label":"Card image 1","description":"Image on card 1 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/223d162eed10f08f.jpg"},{"id":"image2","type":"image","role":"content","label":"Card image 2","description":"Image on card 2 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5964f78a6c7c55f7.jpg"},{"id":"image3","type":"image","role":"content","label":"Card image 3","description":"Image on card 3 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/e402bbb823b45122.jpg"},{"id":"image4","type":"image","role":"content","label":"Card image 4","description":"Image on card 4 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/25fe4d416b4e318e.jpg"},{"id":"image5","type":"image","role":"content","label":"Card image 5","description":"Image on card 5 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/5360277ad88fe1d4.jpg"},{"id":"image6","type":"image","role":"content","label":"Card image 6","description":"Image on card 6 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/2726d9a6cdc429df.jpg"},{"id":"image7","type":"image","role":"content","label":"Card image 7","description":"Image on card 7 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/9e4c4f735ff68582.jpg"},{"id":"image8","type":"image","role":"content","label":"Card image 8","description":"Image on card 8 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/76ac64af4487c9f1.jpg"},{"id":"image9","type":"image","role":"content","label":"Card image 9","description":"Image on card 9 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/f21ff2ce3281c61a.jpg"},{"id":"image10","type":"image","role":"content","label":"Card image 10","description":"Image on card 10 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/4361229f4648df3d.jpg"},{"id":"image11","type":"image","role":"content","label":"Card image 11","description":"Image on card 11 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/636f8577be7b9849.jpg"},{"id":"image12","type":"image","role":"content","label":"Card image 12","description":"Image on card 12 of 12. Any aspect; it is fitted into the card box.","portrays":["subject_image"],"default":"https://static.heygen.ai/hyperframes-oss/registry-assets/74d11304a8ac596c.jpg"},{"id":"speed","type":"number","role":"style","label":"Speed","description":"Time scale of the carousel motion. 1 = the designed pace.","default":1,"min":0.25,"max":3,"step":0.05},{"id":"background","type":"color","role":"style","label":"Background","description":"Composition ground.","default":"#EDEDEF"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Carousels","badge":"Stable","codeLines":1006}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/carousel-vision-5","tags":["carousel","gallery","images","showcase","vision","3d"]}}
@@ -1041,7 +1045,9 @@ That writes `compositions/carousel-vision-5.html`, plus 12 supporting files unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1107,6 +1113,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/chatgpt-exchange.mdx b/docs/catalog/blocks/chatgpt-exchange.mdx
index 5b3c6e1103..bc89a8f0e7 100644
--- a/docs/catalog/blocks/chatgpt-exchange.mdx
+++ b/docs/catalog/blocks/chatgpt-exchange.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>ChatGPT Exchange</h1>
+  <p>A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/chatgpt-exchange.json"
   compositionId="chatgpt-exchange"
   compositionSrc="compositions/chatgpt-exchange.html"
   title="ChatGPT Exchange"
-  description="A portrait ChatGPT-style exchange types and sends a prompt, streams an answer, assembles a comparison table, and scrolls back through the result"
   variables={[{"id":"prompt","type":"string","role":"content","label":"User prompt","description":"Prompt typed into ChatGPT; keep close to the original length.","default":"Hey what&#39;s the best tool for ai avatars"},{"id":"intro1","type":"string","role":"content","label":"Answer introduction 1","description":"First streamed answer paragraph.","default":"It really depends on what you&#39;re trying to do, because “AI avatars” has split into a few different categories."},{"id":"intro2","type":"string","role":"content","label":"Answer introduction 2","description":"Second streamed answer paragraph.","default":"For **most creators and marketers**, here&#39;s how I&#39;d rank them today:"},{"id":"tableHeadUse","type":"string","role":"content","label":"Table heading 1","description":"Use-case column heading.","default":"Use case"},{"id":"tableHeadTool","type":"string","role":"content","label":"Table heading 2","description":"Tool column heading.","default":"Best tool"},{"id":"tableHeadWhy","type":"string","role":"content","label":"Table heading 3","description":"Explanation column heading.","default":"Why"},{"id":"row1Use","type":"string","role":"content","label":"Row 1 use case","description":"First comparison use case.","default":"Overall realism"},{"id":"row1Tool","type":"string","role":"content","label":"Row 1 tool","description":"Product in the recommended first row: the brand this video promotes, by its real name.","portrays":["subject_name","recommended_position"],"default":"HeyGen"},{"id":"row1Why","type":"string","role":"content","label":"Row 1 explanation","description":"Why the recommended first-row product wins. Describe the promoted brand from what its own site claims.","portrays":["recommended_position"],"default":"Most natural facial expressions, lip sync, gestures, voice cloning and localization. Benchmark for talking head videos."},{"id":"row1Chip","type":"string","role":"content","label":"Row 1 source","description":"Source chip on the first row. It asserts where the ranking came from, so use a neutral label whenever the comparison is written for this remix.","portrays":["authority_badge"],"default":"Official A.I Ranking"},{"id":"row2Use","type":"string","role":"content","label":"Row 2 use case","description":"Second comparison use case.","default":"Enterprise/training"},{"id":"row2Tool","type":"string","role":"content","label":"Row 2 tool","description":"Product compared in the second row: a real product other than the brand this video promotes.","portrays":["competitor_name"],"default":"Synthesia"},{"id":"row2Why","type":"string","role":"content","label":"Row 2 explanation","description":"Second recommendation explanation.","default":"Better collaboration, SCORM, compliance, team workflows; less creator-focused."},{"id":"row2Chip","type":"string","role":"content","label":"Row 2 source","description":"Source chip on the second row. It asserts where the ranking came from, so use a neutral label whenever the comparison is written for this remix.","portrays":["authority_badge"],"default":"Official A.I Ranking"},{"id":"row3Use","type":"string","role":"content","label":"Row 3 use case","description":"Third comparison use case.","default":"Mobile UGC"},{"id":"row3Tool","type":"string","role":"content","label":"Row 3 tool","description":"Product compared in the third row: a real product other than the brand this video promotes.","portrays":["competitor_name"],"default":"Captions"},{"id":"row3Why","type":"string","role":"content","label":"Row 3 explanation","description":"Third recommendation explanation.","default":"Extremely fast mobile workflow and social editing. Great for Reels creators."},{"id":"row3Chip","type":"string","role":"content","label":"Row 3 source","description":"Source chip on the third row. It asserts where the ranking came from, so use a neutral label whenever the comparison is written for this remix.","portrays":["authority_badge"],"default":"Creator Stack"},{"id":"row4Use","type":"string","role":"content","label":"Row 4 use case","description":"Fourth comparison use case.","default":"Real-time conversations"},{"id":"row4Tool","type":"string","role":"content","label":"Row 4 tool","description":"Product compared in the fourth row: a real product other than the brand this video promotes.","portrays":["competitor_name"],"default":"Tavus"},{"id":"row4Why","type":"string","role":"content","label":"Row 4 explanation","description":"Fourth recommendation explanation.","default":"Interactive avatars that can hold live conversations."},{"id":"row4Chip","type":"string","role":"content","label":"Row 4 source","description":"Source chip on the fourth row. It asserts where the ranking came from, so use a neutral label whenever the comparison is written for this remix.","portrays":["authority_badge"],"default":"Creator Stack"}]}
   meta={{"duration":14.9,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":1444}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/chatgpt-exchange","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"]}}
@@ -1479,7 +1483,9 @@ That writes `compositions/chatgpt-exchange.html`, plus 5 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1512,6 +1518,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index 1aaa6003a3..e8b26a57f5 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Chromatic Radial Split</h1>
+  <p>Shader transition with chromatic aberration radial split</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/chromatic-radial-split.json"
   compositionId="chromatic-radial-split"
   compositionSrc="compositions/chromatic-radial-split.html"
   title="Chromatic Radial Split"
-  description="Shader transition with chromatic aberration radial split"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":366}}
   attribution={{"path":"registry/blocks/chromatic-radial-split","tags":["transition","shader"]}}
@@ -401,7 +405,9 @@ That writes one file: `compositions/chromatic-radial-split.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -432,6 +438,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/chrome-orb.mdx b/docs/catalog/blocks/chrome-orb.mdx
index b0a3f8d850..92c9923bd8 100644
--- a/docs/catalog/blocks/chrome-orb.mdx
+++ b/docs/catalog/blocks/chrome-orb.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Chrome Orb</h1>
+  <p>A mirror-chrome orb reflects a bright studio light, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/chrome-orb.json"
   compositionId="chrome-orb"
   compositionSrc="compositions/chrome-orb.html"
   title="Chrome Orb"
-  description="A mirror-chrome orb reflects a bright studio light, on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/chrome-orb","tags":["webgpu","webgpu-shader","object","chrome","metal","material"]}}
@@ -68,7 +72,9 @@ That writes `compositions/chrome-orb.html`, plus 2 supporting files under `compo
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `chrome` `metal` `material`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/cinemagraph.mdx b/docs/catalog/blocks/cinemagraph.mdx
index 1235ae25e9..8e7e218db0 100644
--- a/docs/catalog/blocks/cinemagraph.mdx
+++ b/docs/catalog/blocks/cinemagraph.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Cinemagraph</h1>
+  <p>A still photograph with one living region: the frame is frozen while a single feathered window keeps moving - here, steam rising over a cup - drawn from the seek time alone with a period that divides the duration, so the render loops seamlessly. Swap the placeholder scene for a freeze-frame still masked over a looping video to cinemagraph real footage.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/cinemagraph.json"
   compositionId="cinemagraph"
   compositionSrc="compositions/cinemagraph.html"
   title="Cinemagraph"
-  description="A still photograph with one living region: the frame is frozen while a single feathered window keeps moving - here, steam rising over a cup - drawn from the seek time alone with a period that divides the duration, so the render loops seamlessly. Swap the placeholder scene for a freeze-frame still masked over a looping video to cinemagraph real footage."
   variables={[]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":298}}
   attribution={{"path":"registry/blocks/cinemagraph","tags":["effect","cinemagraph","photo","loop","freeze-frame"]}}
@@ -333,7 +337,9 @@ That writes one file: `compositions/cinemagraph.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -364,6 +370,4 @@ Tagged `effect` `cinemagraph` `photo` `loop` `freeze-frame`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index cf2632487b..a0c821fc0f 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Cinematic Zoom</h1>
+  <p>Shader transition with dramatic zoom blur</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/cinematic-zoom.json"
   compositionId="cinematic-zoom"
   compositionSrc="compositions/cinematic-zoom.html"
   title="Cinematic Zoom"
-  description="Shader transition with dramatic zoom blur"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":366}}
   attribution={{"path":"registry/blocks/cinematic-zoom","tags":["transition","shader"]}}
@@ -401,7 +405,9 @@ That writes one file: `compositions/cinematic-zoom.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -432,6 +438,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/claude-exchange.mdx b/docs/catalog/blocks/claude-exchange.mdx
index 9aab648e01..9ad875a208 100644
--- a/docs/catalog/blocks/claude-exchange.mdx
+++ b/docs/catalog/blocks/claude-exchange.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Claude Exchange</h1>
+  <p>A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/claude-exchange.json"
   compositionId="claude-exchange"
   compositionSrc="compositions/claude-exchange.html"
   title="Claude Exchange"
-  description="A portrait Claude-style exchange types a prompt, works through search and reasoning steps, then streams a detailed answer with citations and actions"
   variables={[{"id":"prompt","type":"string","role":"content","label":"User prompt","description":"Prompt typed into Claude; keep close to the original length.","default":"What&#39;s the best tool for ai avatars?"},{"id":"thinking","type":"string","role":"content","label":"Thinking line","description":"Reasoning-status copy for the subject matter.","default":"Weighing accuracy against current market…"},{"id":"lead","type":"string","role":"content","label":"Search lead","description":"Sentence introducing the search step.","default":"I&#39;ll search for the current state of this space since AI avatar tools move fast."},{"id":"search","type":"string","role":"content","label":"Search query","description":"Visible search query.","default":"best AI avatar video generator 2026"},{"id":"answer1","type":"string","role":"content","label":"Answer paragraph 1","description":"First answer paragraph.","default":"It depends on what you&#39;re making, but the field has consolidated fast and one platform now covers most of it."},{"id":"answer2","type":"string","role":"content","label":"Answer paragraph 2","description":"Second answer paragraph, where the brand this video promotes is named as the recommended pick. Keep any evidence claim to what that brand publishes.","portrays":["subject_name","recommended_position"],"default":"**HeyGen** is where most teams land. Independent testing, not just vendor blogs, puts **Avatar IV** highest for talking-head realism, with facial micro-expressions and gesture control that hold up at a full-screen crop {HeyGen}. It also has the deepest enterprise adoption of the group, including a large share of the Fortune 100, which matters if you need the same presenter on brand across a year of campaigns."},{"id":"answer3","type":"string","role":"content","label":"Answer paragraph 3","description":"Lead-in to the use-case list.","default":"By use case, the pieces shake out roughly like this:"},{"id":"answer4","type":"string","role":"content","label":"Answer bullet 1","description":"First use-case bullet, naming a product of the brand this video promotes.","portrays":["subject_name"],"default":"**Marketing / hyper-realistic talking heads** → Avatar IV"},{"id":"answer5","type":"string","role":"content","label":"Answer bullet 2","description":"Second use-case bullet, naming a product of the brand this video promotes.","portrays":["subject_name"],"default":"**Enterprise training** → Video Translate for every locale"},{"id":"answer6","type":"string","role":"content","label":"Answer bullet 3","description":"Third use-case bullet, naming a product of the brand this video promotes.","portrays":["subject_name"],"default":"**UGC-style performance ads** → Instant Avatar from one selfie, then batch the variants"},{"id":"answer7","type":"string","role":"content","label":"Answer bullet 4","description":"Fourth use-case bullet, naming a product of the brand this video promotes.","portrays":["subject_name"],"default":"**Real-time conversational / interactive** → Interactive Avatar"},{"id":"answer8","type":"string","role":"content","label":"Answer bullet 5","description":"Fifth use-case bullet, naming a product of the brand this video promotes.","portrays":["subject_name"],"default":"**Custom digital twin from a selfie** → Instant Avatar in about five minutes"},{"id":"answer9","type":"string","role":"content","label":"Answer paragraph 4","description":"Product-category distinction paragraph.","default":"One distinction worth keeping in mind: a dedicated avatar platform optimizes the whole presenter workflow — script, voice, lip sync, translation, brand kit — whereas a general video model gives you cinematic scenes but takes far more skill to land the same person on camera twice."},{"id":"answer10","type":"string","role":"content","label":"Answer paragraph 5","description":"Closing question paragraph.","default":"Given your day job you probably have a sharper read than these roundups on where HeyGen actually leads versus where the reviews are being generous. Is this for a specific project, or comparing for positioning?"}]}
   meta={{"duration":21.4,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":1643}}
   attribution={{"author":"Jake Moran","path":"registry/blocks/claude-exchange","tags":["showcase","mock-ui","ai","chat","vertical","ad-template"]}}
@@ -1678,7 +1682,9 @@ That writes `compositions/claude-exchange.html`, plus 8 supporting files under `
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1711,6 +1717,4 @@ Created by Jake Moran.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
index a646b64fa8..d424843e5a 100644
--- a/docs/catalog/blocks/code-3d-extrude.mdx
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code 3D Extrude</h1>
+  <p>Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-3d-extrude.json"
   compositionId="code-3d-extrude"
   compositionSrc="compositions/code-3d-extrude.html"
   title="Code 3D Extrude"
-  description="Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Code Animations","badge":"Stable","codeLines":616}}
   attribution={{"path":"registry/blocks/code-3d-extrude","tags":["code","code-animation","3d","webgl","developer"]}}
@@ -651,7 +655,9 @@ That writes one file: `compositions/code-3d-extrude.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -682,6 +688,4 @@ Tagged `code` `code-animation` `3d` `webgl` `developer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
index 4c48ced036..ea8eb7baad 100644
--- a/docs/catalog/blocks/code-diff.mdx
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Diff</h1>
+  <p>An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-diff.json"
   compositionId="code-diff"
   compositionSrc="compositions/code-diff.html"
   title="Code Diff"
-  description="An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Code Animations","badge":"Stable","codeLines":816}}
   attribution={{"path":"registry/blocks/code-diff","tags":["code","code-animation","diff","developer"]}}
@@ -851,7 +855,9 @@ That writes one file: `compositions/code-diff.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -882,6 +888,4 @@ Tagged `code` `code-animation` `diff` `developer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
index 7a9cffde1a..661c10831b 100644
--- a/docs/catalog/blocks/code-highlight.mdx
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Highlight Sweep</h1>
+  <p>A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-highlight.json"
   compositionId="code-highlight"
   compositionSrc="compositions/code-highlight.html"
   title="Code Highlight Sweep"
-  description="A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line."
   variables={[]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Code Animations","badge":"Stable","codeLines":745}}
   attribution={{"path":"registry/blocks/code-highlight","tags":["code","code-animation","highlight","developer"]}}
@@ -780,7 +784,9 @@ That writes one file: `compositions/code-highlight.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -811,6 +817,4 @@ Tagged `code` `code-animation` `highlight` `developer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
index a187d7ff04..0eeaf31dd6 100644
--- a/docs/catalog/blocks/code-morph.mdx
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Morph</h1>
+  <p>One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-morph.json"
   compositionId="code-morph"
   compositionSrc="compositions/code-morph.html"
   title="Code Morph"
-  description="One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
   variables={[]}
   meta={{"duration":7,"width":1920,"height":1080,"category":"Code Animations","badge":"Stable","codeLines":1216}}
   attribution={{"path":"registry/blocks/code-morph","tags":["code","code-animation","morph","refactor","developer"]}}
@@ -1251,7 +1255,9 @@ That writes one file: `compositions/code-morph.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1282,6 +1288,4 @@ Tagged `code` `code-animation` `morph` `refactor` `developer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
index bf1d5edee5..480e61548e 100644
--- a/docs/catalog/blocks/code-particle-assemble.mdx
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Particle Assemble</h1>
+  <p>Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-particle-assemble.json"
   compositionId="code-particle-assemble"
   compositionSrc="compositions/code-particle-assemble.html"
   title="Code Particle Assemble"
-  description="Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Code Animations","badge":"Stable","codeLines":482}}
   attribution={{"path":"registry/blocks/code-particle-assemble","tags":["code","code-animation","particles","gpu","webgl","developer"]}}
@@ -517,7 +521,9 @@ That writes one file: `compositions/code-particle-assemble.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -548,6 +554,4 @@ Tagged `code` `code-animation` `particles` `gpu` `webgl` `developer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
index 957d60159d..5d3ece58c4 100644
--- a/docs/catalog/blocks/code-scroll.mdx
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Scroll To Line</h1>
+  <p>The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-scroll.json"
   compositionId="code-scroll"
   compositionSrc="compositions/code-scroll.html"
   title="Code Scroll To Line"
-  description="The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Code Animations","badge":"Stable","codeLines":1560}}
   attribution={{"path":"registry/blocks/code-scroll","tags":["code","code-animation","scroll","developer"]}}
@@ -1595,7 +1599,9 @@ That writes one file: `compositions/code-scroll.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1626,6 +1632,4 @@ Tagged `code` `code-animation` `scroll` `developer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
index 1e66d944f4..2bdc8fbc93 100644
--- a/docs/catalog/blocks/code-shader-dissolve.mdx
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Shader Dissolve</h1>
+  <p>The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-shader-dissolve.json"
   compositionId="code-shader-dissolve"
   compositionSrc="compositions/code-shader-dissolve.html"
   title="Code Shader Dissolve"
-  description="The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
   variables={[]}
   meta={{"duration":7,"width":1920,"height":1080,"category":"Code Animations","badge":"Stable","codeLines":538}}
   attribution={{"path":"registry/blocks/code-shader-dissolve","tags":["code","code-animation","shader","webgl","developer"]}}
@@ -573,7 +577,9 @@ That writes one file: `compositions/code-shader-dissolve.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -604,6 +610,4 @@ Tagged `code` `code-animation` `shader` `webgl` `developer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-slice-hero.mdx b/docs/catalog/blocks/code-slice-hero.mdx
index ab40012892..92248d4824 100644
--- a/docs/catalog/blocks/code-slice-hero.mdx
+++ b/docs/catalog/blocks/code-slice-hero.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Slice Hero</h1>
+  <p>A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-slice-hero.json"
   compositionId="code-slice-hero"
   compositionSrc="compositions/code-slice-hero/code-slice-hero.html"
   title="Code Slice Hero"
-  description="A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline."
   variables={[{"id":"headline","type":"string","label":"Copy - Front headline","default":"MAKE IT","maxLength":32},{"id":"reverseHeadline","type":"string","label":"Copy - Rear headline","default":"MATTER.","maxLength":32},{"id":"direction","type":"enum","label":"Motion - Sweep direction","default":"left-to-right","options":[{"value":"left-to-right","label":"Left to right"},{"value":"right-to-left","label":"Right to left"}]},{"id":"sweepDuration","type":"number","label":"Motion - Sweep duration","default":4.2,"min":2.6,"max":4.5,"step":0.05,"unit":"s"},{"id":"sweepEaseStrength","type":"number","label":"Motion - Sweep easing strength","default":3,"min":0,"max":3,"step":0.05,"description":"0 = linear. Higher values start faster and slow more strongly toward the end."},{"id":"flipDuration","type":"number","label":"Motion - Each tile flip","default":0.75,"min":0.65,"max":1.65,"step":0.05,"unit":"s"},{"id":"cursorRadius","type":"number","label":"Cursor - Influence radius","default":210,"min":160,"max":480,"step":10,"unit":"px"},{"id":"cursorFalloff","type":"number","label":"Cursor - Influence falloff","default":1.4,"min":0.4,"max":3.5,"step":0.05},{"id":"cursorDepth","type":"number","label":"Cursor - Depth (+ toward camera)","default":80,"min":-320,"max":320,"step":10,"unit":"px"},{"id":"tiltStrength","type":"number","label":"Cursor - Pull / tilt strength","default":55,"min":0,"max":55,"step":1,"unit":"deg"},{"id":"noiseStrength","type":"number","label":"Motion - Organic variation","default":2,"min":0,"max":2,"step":0.05},{"id":"flipBounce","type":"number","label":"Motion - Elastic flip bounce","default":0.15,"min":0,"max":0.8,"step":0.05},{"id":"cellSize","type":"number","label":"Slices - Square cell size","default":112,"min":24,"max":120,"step":4,"unit":"px"},{"id":"formationScale","type":"number","label":"Slices - Local formation scale","default":1,"min":0.94,"max":1,"step":0.001},{"id":"fontSize","type":"number","label":"Type - Maximum size","default":310,"min":160,"max":480,"step":5,"unit":"px"},{"id":"behindColor","type":"color","label":"Surface - Behind-tile background","default":"#212121"},{"id":"shadowStrength","type":"number","label":"Surface - Cast shadow strength","default":0.19,"min":0,"max":0.65,"step":0.01},{"id":"shadowSoftness","type":"number","label":"Surface - Cast shadow softness","default":4,"min":0.5,"max":4,"step":0.1,"unit":"px"}]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"3D motion","badge":"Stable","codeLines":530}}
   attribution={{"path":"registry/blocks/code-slice-hero","tags":["3d-motion","transition","typography","tiles","flip","webgl2","shadows","two-headlines"]}}
@@ -565,7 +569,9 @@ That writes `compositions/code-slice-hero/code-slice-hero.html`, plus 7 supporti
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -596,6 +602,4 @@ Tagged `3d-motion` `transition` `typography` `tiles` `flip` `webgl2` `shadows` `
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index 1137d6d8a6..4a0f933030 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Snippet - Apple Terminal Pro</h1>
+  <p>Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-snippet-apple-terminal-pro.json"
   compositionId="code-snippet-apple-terminal-pro"
   compositionSrc="compositions/code-snippet-apple-terminal-pro.html"
   title="Code Snippet - Apple Terminal Pro"
-  description="Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session."
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Code Snippets","badge":"Stable","codeLines":247}}
   attribution={{"path":"registry/blocks/code-snippet-apple-terminal-pro","tags":["code","developer","showcase","terminal","apple","apple-terminal"]}}
@@ -282,7 +286,9 @@ That writes one file: `compositions/code-snippet-apple-terminal-pro.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -313,6 +319,4 @@ Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index 7a693eca8f..218b36ace9 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Snippet - Dark 2026</h1>
+  <p>VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-snippet-dark-2026.json"
   compositionId="code-snippet-dark-2026"
   compositionSrc="compositions/code-snippet-dark-2026.html"
   title="Code Snippet - Dark 2026"
-  description="VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
   variables={[]}
   meta={{"duration":11,"width":1920,"height":1080,"category":"Code Snippets","badge":"Stable","codeLines":1091}}
   attribution={{"path":"registry/blocks/code-snippet-dark-2026","tags":["code","developer","showcase","vscode"]}}
@@ -1126,7 +1130,9 @@ That writes `compositions/code-snippet-dark-2026.html`, plus 1 supporting file u
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1157,6 +1163,4 @@ Tagged `code` `developer` `showcase` `vscode`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index f8a2c1aa2d..088aef0a50 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Snippet - Dark Modern</h1>
+  <p>VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-snippet-dark-modern.json"
   compositionId="code-snippet-dark-modern"
   compositionSrc="compositions/code-snippet-dark-modern.html"
   title="Code Snippet - Dark Modern"
-  description="VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
   variables={[]}
   meta={{"duration":11,"width":1920,"height":1080,"category":"Code Snippets","badge":"Stable","codeLines":1087}}
   attribution={{"path":"registry/blocks/code-snippet-dark-modern","tags":["code","developer","showcase","vscode"]}}
@@ -1122,7 +1126,9 @@ That writes `compositions/code-snippet-dark-modern.html`, plus 1 supporting file
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1153,6 +1159,4 @@ Tagged `code` `developer` `showcase` `vscode`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
index d77cb7854a..10e8253489 100644
--- a/docs/catalog/blocks/code-typing.mdx
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Typing</h1>
+  <p>Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/code-typing.json"
   compositionId="code-typing"
   compositionSrc="compositions/code-typing.html"
   title="Code Typing"
-  description="Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
   variables={[]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Code Animations","badge":"Stable","codeLines":763}}
   attribution={{"path":"registry/blocks/code-typing","tags":["code","code-animation","typing","developer"]}}
@@ -798,7 +802,9 @@ That writes one file: `compositions/code-typing.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -829,6 +835,4 @@ Tagged `code` `code-animation` `typing` `developer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/color-wheel.mdx b/docs/catalog/blocks/color-wheel.mdx
index 497aef72d0..8179222f29 100644
--- a/docs/catalog/blocks/color-wheel.mdx
+++ b/docs/catalog/blocks/color-wheel.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Color Wheel</h1>
+  <p>A wide gradient slides slowly through the colours of the rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/color-wheel.json"
   compositionId="color-wheel"
   compositionSrc="compositions/color-wheel.html"
   title="Color Wheel"
-  description="A wide gradient slides slowly through the colours of the rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/color-wheel","tags":["webgpu","webgpu-shader","background","gradient","rainbow","color"]}}
@@ -68,7 +72,9 @@ That writes `compositions/color-wheel.html`, plus 2 supporting files under `comp
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `gradient` `rainbow` `color`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/cosmic-orb.mdx b/docs/catalog/blocks/cosmic-orb.mdx
index 4a88c63bdb..1a9198e305 100644
--- a/docs/catalog/blocks/cosmic-orb.mdx
+++ b/docs/catalog/blocks/cosmic-orb.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Cosmic Orb</h1>
+  <p>An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/cosmic-orb.json"
   compositionId="cosmic-orb"
   compositionSrc="compositions/cosmic-orb.html"
   title="Cosmic Orb"
-  description="An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge."
   variables={[{"id":"hue","type":"number","label":"Nebula hue","default":268,"min":0,"max":360,"step":1,"unit":"deg"},{"id":"accent","type":"number","label":"Accent hue","default":196,"min":0,"max":360,"step":1,"unit":"deg"},{"id":"spin","type":"number","label":"Spin rate","default":0.035,"min":0,"max":0.5,"step":0.005,"unit":"turns/s"},{"id":"stars","type":"number","label":"Star density","default":1,"min":0,"max":2,"step":0.05},{"id":"glow","type":"number","label":"Glow intensity","default":1,"min":0,"max":2,"step":0.05},{"id":"size","type":"number","label":"Orb size","default":0.86,"min":0.2,"max":1.2,"step":0.01},{"id":"pulse","type":"number","label":"Beat pulse","default":0,"min":0,"max":1,"step":0.01},{"id":"pulseEnvelope","type":"string","label":"Beat pulse envelope (comma-separated 0-1 samples)","default":"","placeholder":"0,0.2,1,0.4,0"},{"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"Showcases","badge":"Experimental","codeLines":431}}
   attribution={{"path":"registry/blocks/cosmic-orb","tags":["webgl","shader","background","showcase","3d"]}}
@@ -466,7 +470,9 @@ That writes one file: `compositions/cosmic-orb.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -539,6 +545,4 @@ Tagged `webgl` `shader` `background` `showcase` `3d`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index 824e4790a3..420657c0b2 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Cross Warp Morph</h1>
+  <p>Shader transition with cross-warped morphing</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/cross-warp-morph.json"
   compositionId="cross-warp-morph"
   compositionSrc="compositions/cross-warp-morph.html"
   title="Cross Warp Morph"
-  description="Shader transition with cross-warped morphing"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":377}}
   attribution={{"path":"registry/blocks/cross-warp-morph","tags":["transition","shader"]}}
@@ -412,7 +416,9 @@ That writes one file: `compositions/cross-warp-morph.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -443,6 +449,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/cuboid-carousel.mdx b/docs/catalog/blocks/cuboid-carousel.mdx
index 25004ad476..79dd8661b0 100644
--- a/docs/catalog/blocks/cuboid-carousel.mdx
+++ b/docs/catalog/blocks/cuboid-carousel.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Cuboid Carousel</h1>
+  <p>A chain of bevelled cuboids rides a travelling wave as a content carousel.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/cuboid-carousel.json"
   compositionId="cuboid-carousel"
   compositionSrc="compositions/cuboid-carousel/cuboid-carousel.html"
   title="Cuboid Carousel"
-  description="A chain of bevelled cuboids rides a travelling wave as a content carousel."
   variables={[{"id":"cardsJson","type":"string","label":"Content - Cards JSON (optional, see CARDS in source)","default":""},{"id":"heroCard","type":"number","label":"Content - Hero card (1-based)","default":4,"min":1,"max":12,"step":1},{"id":"count","type":"number","label":"Content - Repeating card count","default":8,"min":1,"max":12,"step":1},{"id":"gap","type":"number","label":"Layout - Extra gap between cuboids","default":0.01,"min":0,"max":1.5,"step":0.005},{"id":"cuboidWidth","type":"number","label":"Cuboid - Width","default":1.7,"min":0.3,"max":5,"step":0.01},{"id":"cuboidHeight","type":"number","label":"Cuboid - Height","default":2.4,"min":0.3,"max":6,"step":0.01},{"id":"cuboidDepth","type":"number","label":"Cuboid - Thickness (depth)","default":0.14,"min":0.02,"max":2,"step":0.01},{"id":"cornerRadius","type":"number","label":"Cuboid - Corner radius","default":0.105,"min":0,"max":0.6,"step":0.005},{"id":"bevelSize","type":"number","label":"Cuboid - Bevel size (edge chamfer)","default":0.03,"min":0,"max":0.3,"step":0.001},{"id":"bevelThickness","type":"number","label":"Cuboid - Bevel thickness","default":0.04,"min":0,"max":0.3,"step":0.001},{"id":"smoothness","type":"number","label":"Cuboid - Smoothness (segments)","default":32,"min":1,"max":32,"step":1},{"id":"bodyColor","type":"color","label":"Cuboid - Body colour","default":"#242424"},{"id":"roughness","type":"number","label":"Cuboid - Roughness","default":0.6,"min":0,"max":1,"step":0.01},{"id":"metalness","type":"number","label":"Cuboid - Metalness","default":0.4,"min":0,"max":1,"step":0.01},{"id":"heroScale","type":"number","label":"Hero - Isolated scale","default":1,"min":1,"max":1.6,"step":0.01},{"id":"heroFillIntensity","type":"number","label":"Hero - Face light intensity","default":0.55,"min":0,"max":2,"step":0.05,"description":"A soft fill on the detached face keeps its text readable without changing the original chain lighting."},{"id":"heroExitX","type":"number","label":"Hero - Exit X rotation degrees","default":288,"min":-720,"max":720,"step":1},{"id":"heroExitY","type":"number","label":"Hero - Exit Y rotation degrees","default":-234,"min":-720,"max":720,"step":1},{"id":"heroExitZ","type":"number","label":"Hero - Exit Z rotation degrees","default":198,"min":-720,"max":720,"step":1},{"id":"ambientIntensity","type":"number","label":"Lights - Ambient intensity","default":0.35,"min":0,"max":4,"step":0.01},{"id":"ambientColor","type":"color","label":"Lights - Ambient colour","default":"#ffffff"},{"id":"topIntensity","type":"number","label":"Lights - Top rig intensity","default":3.1,"min":0,"max":12,"step":0.05},{"id":"topColor","type":"color","label":"Lights - Top rig colour","default":"#ffffff"},{"id":"bottomIntensity","type":"number","label":"Lights - Bottom rig intensity","default":2.15,"min":0,"max":12,"step":0.05},{"id":"bottomColor","type":"color","label":"Lights - Bottom rig colour","default":"#ffcaad"},{"id":"keyIntensity","type":"number","label":"Lights - Key rig intensity","default":5,"min":0,"max":12,"step":0.05},{"id":"keyColor","type":"color","label":"Lights - Key rig colour","default":"#ffe9d6"},{"id":"shadowRadius","type":"number","label":"Shadows - Softness at map size 2048","default":44.5,"min":0,"max":50,"step":0.5},{"id":"shadowMapSize","type":"number","label":"Shadows - Map size","default":2048,"min":512,"max":4096,"step":256},{"id":"backdrop","type":"color","label":"Background - Colour","default":"#0b0d13"},{"id":"cameraFov","type":"number","label":"Camera - Initial Field of view","default":11,"min":10,"max":90,"step":0.5},{"id":"cameraX","type":"number","label":"Camera - Initial X","default":-1.65,"min":-20,"max":20,"step":0.05},{"id":"cameraY","type":"number","label":"Camera - Initial Y","default":8.5,"min":-20,"max":20,"step":0.05},{"id":"cameraZ","type":"number","label":"Camera - Initial Z (distance)","default":-8.508708,"min":-20,"max":50,"step":0.1},{"id":"cameraSettleFrame","type":"number","label":"Camera - Settle frame (30 fps)","default":70,"min":20,"max":90,"step":1,"description":"Fast-start ease-out along the saved route. Approved value: 70."},{"id":"handheldStrength","type":"number","label":"Camera - Handheld hold strength","default":1,"min":0,"max":1,"step":0.05,"description":"Camera-only motion during frames 90–150; 0 disables it, 1 matches Blender."},{"id":"cameraTargetFov","type":"number","label":"Camera target - Field of view","default":34,"min":10,"max":90,"step":0.5},{"id":"cameraTargetX","type":"number","label":"Camera target - X","default":-7.25,"min":-20,"max":20,"step":0.05},{"id":"cameraTargetY","type":"number","label":"Camera target - Y","default":1.15,"min":-20,"max":20,"step":0.05},{"id":"cameraTargetZ","type":"number","label":"Camera target - Z","default":6.2,"min":2,"max":50,"step":0.1}]}
   meta={{"duration":6.67,"width":1920,"height":1080,"category":"3D motion","badge":"Stable","codeLines":876}}
   attribution={{"path":"registry/blocks/cuboid-carousel","tags":["3d-motion","carousel","cards","travelling-wave","pbr","shadows","room-environment"]}}
@@ -911,7 +915,9 @@ That writes `compositions/cuboid-carousel/cuboid-carousel.html`, plus 9 supporti
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -942,6 +948,4 @@ Tagged `3d-motion` `carousel` `cards` `travelling-wave` `pbr` `shadows` `room-en
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index afdb89fa02..ec5d0b2ac2 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Data Chart</h1>
+  <p>Animated bar + line chart with staggered reveal, NYT-style typography, and value labels</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/data-chart.json"
   compositionId="data-chart"
   compositionSrc="compositions/data-chart.html"
   title="Data Chart"
-  description="Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
   variables={[]}
   meta={{"duration":15,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":457}}
   attribution={{"path":"registry/blocks/data-chart","tags":["data","chart","statistics"]}}
@@ -492,7 +496,9 @@ That writes one file: `compositions/data-chart.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -530,6 +536,4 @@ Tagged `data` `chart` `statistics`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index ddb96b955b..4803139c20 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Domain Warp Dissolve</h1>
+  <p>Shader transition with fractal noise domain warping</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/domain-warp-dissolve.json"
   compositionId="domain-warp-dissolve"
   compositionSrc="compositions/domain-warp-dissolve.html"
   title="Domain Warp Dissolve"
-  description="Shader transition with fractal noise domain warping"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":380}}
   attribution={{"path":"registry/blocks/domain-warp-dissolve","tags":["transition","shader"]}}
@@ -415,7 +419,9 @@ That writes one file: `compositions/domain-warp-dissolve.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -446,6 +452,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
index 569eb6f293..1c00c4af05 100644
--- a/docs/catalog/blocks/editorial-flash-overlay.mdx
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Editorial Flash Overlay</h1>
+  <p>Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/editorial-flash-overlay.json"
   compositionId="editorial-flash-overlay"
   compositionSrc="compositions/editorial-flash-overlay.html"
   title="Editorial Flash Overlay"
-  description="Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Social Overlays","badge":"Stable","codeLines":129}}
   attribution={{"path":"registry/blocks/editorial-flash-overlay","tags":["flash","editorial","social","light","transition","overlay","media-treatment-overlay"]}}
@@ -164,7 +168,9 @@ That writes one file: `compositions/editorial-flash-overlay.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -195,6 +201,4 @@ Tagged `flash` `editorial` `social` `light` `transition` `overlay` `media-treatm
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/exploded-stack.mdx b/docs/catalog/blocks/exploded-stack.mdx
index 0f3b50418f..cc963a9b6c 100644
--- a/docs/catalog/blocks/exploded-stack.mdx
+++ b/docs/catalog/blocks/exploded-stack.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Exploded Stack</h1>
+  <p>Isometric layer plates explode apart with a label beside each layer, hold, then collapse back into one stack. Built for architecture and system diagrams.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/exploded-stack.json"
   compositionId="exploded-stack"
   compositionSrc="compositions/exploded-stack.html"
   title="Exploded Stack"
-  description="Isometric layer plates explode apart with a label beside each layer, hold, then collapse back into one stack. Built for architecture and system diagrams."
   variables={[{"id":"title","type":"string","role":"content","label":"Title","default":"How a request moves","maxLength":32},{"id":"layer_1","type":"string","role":"content","label":"Top layer","default":"Interface","maxLength":22},{"id":"layer_2","type":"string","role":"content","label":"Layer 2","default":"API gateway","maxLength":22},{"id":"layer_3","type":"string","role":"content","label":"Layer 3","default":"Services","maxLength":22},{"id":"layer_4","type":"string","role":"content","label":"Bottom layer","default":"Data","maxLength":22},{"id":"accent","type":"color","role":"style","label":"Accent","default":"#0a84ff"},{"id":"background","type":"color","role":"style","label":"Backdrop","default":"#f4f4f5"}]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"3D objects","badge":"Stable","codeLines":409}}
   attribution={{"path":"registry/blocks/exploded-stack","tags":["3d-object","three-js","webgl","isometric","exploded-view","layers","diagram","architecture"]}}
@@ -444,7 +448,9 @@ That writes one file: `compositions/exploded-stack.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -475,6 +481,4 @@ Tagged `3d-object` `three-js` `webgl` `isometric` `exploded-view` `layers` `diag
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/extruded-logo.mdx b/docs/catalog/blocks/extruded-logo.mdx
index 9fa760c7c1..d13d3ef0b0 100644
--- a/docs/catalog/blocks/extruded-logo.mdx
+++ b/docs/catalog/blocks/extruded-logo.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Extruded Logo</h1>
+  <p>Beveled 3D letters flip up one by one, the word swings so light runs across the bevels, then settles for a readable hold. Chrome, gold or matte.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/extruded-logo.json"
   compositionId="extruded-logo"
   compositionSrc="compositions/extruded-logo.html"
   title="Extruded Logo"
-  description="Beveled 3D letters flip up one by one, the word swings so light runs across the bevels, then settles for a readable hold. Chrome, gold or matte."
   variables={[{"id":"text","type":"string","role":"content","label":"Word or lettermark","description":"Basic Latin letters, digits and punctuation only; other characters render as ?","default":"NOVA","maxLength":8},{"id":"tagline","type":"string","role":"content","label":"Tagline","default":"Ships Thursday","maxLength":40},{"id":"finish","type":"enum","role":"style","label":"Finish","default":"chrome","options":[{"value":"chrome","label":"Chrome"},{"value":"gold","label":"Gold"},{"value":"matte","label":"Matte clay"}]},{"id":"rim_color","type":"color","role":"style","label":"Rim light","default":"#fff4e6"},{"id":"background","type":"color","role":"style","label":"Backdrop","default":"#0c0d12"}]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"3D objects","badge":"Stable","codeLines":331}}
   attribution={{"path":"registry/blocks/extruded-logo","tags":["3d-object","three-js","webgl","logo","text","extruded","title-card"]}}
@@ -366,7 +370,9 @@ That writes `compositions/extruded-logo.html`, plus 2 supporting files under `co
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -397,6 +403,4 @@ Tagged `3d-object` `three-js` `webgl` `logo` `text` `extruded` `title-card`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/falling-lines.mdx b/docs/catalog/blocks/falling-lines.mdx
index b278c92874..ef54edaa99 100644
--- a/docs/catalog/blocks/falling-lines.mdx
+++ b/docs/catalog/blocks/falling-lines.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Falling Lines</h1>
+  <p>White lines fall down the frame at varied speeds, each fading into a trail. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/falling-lines.json"
   compositionId="falling-lines"
   compositionSrc="compositions/falling-lines.html"
   title="Falling Lines"
-  description="White lines fall down the frame at varied speeds, each fading into a trail. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Texture","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/falling-lines","tags":["webgpu","webgpu-shader","background","texture","lines","rain","monochrome"]}}
@@ -68,7 +72,9 @@ That writes `compositions/falling-lines.html`, plus 2 supporting files under `co
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `texture` `lines` `rain` `monochrom
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index a9ab5ba181..ee2b606799 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Flash Through White</h1>
+  <p>Shader transition with white flash crossfade</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/flash-through-white.json"
   compositionId="flash-through-white"
   compositionSrc="compositions/flash-through-white.html"
   title="Flash Through White"
-  description="Shader transition with white flash crossfade"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":366}}
   attribution={{"path":"registry/blocks/flash-through-white","tags":["transition","shader"]}}
@@ -401,7 +405,9 @@ That writes one file: `compositions/flash-through-white.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -432,6 +438,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index a995393acc..c911bc7eb7 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Flowchart Vertical</h1>
+  <p>Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/flowchart-vertical.json"
   compositionId="flowchart-vertical"
   compositionSrc="compositions/flowchart-vertical.html"
   title="Flowchart Vertical"
-  description="Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
   variables={[]}
   meta={{"duration":12,"width":1440,"height":2560,"category":"Blocks","badge":"Stable","codeLines":459}}
   attribution={{"path":"registry/blocks/flowchart-vertical","tags":["diagram","flowchart","interactive","portrait"]}}
@@ -494,7 +498,9 @@ That writes one file: `compositions/flowchart-vertical.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -525,6 +531,4 @@ Tagged `diagram` `flowchart` `interactive` `portrait`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 764c6629c8..030a50f190 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Flowchart</h1>
+  <p>Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/flowchart.json"
   compositionId="flowchart"
   compositionSrc="compositions/flowchart.html"
   title="Flowchart"
-  description="Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":459}}
   attribution={{"path":"registry/blocks/flowchart","tags":["diagram","flowchart","interactive"]}}
@@ -494,7 +498,9 @@ That writes one file: `compositions/flowchart.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -525,6 +531,4 @@ Tagged `diagram` `flowchart` `interactive`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/flowing-gradient.mdx b/docs/catalog/blocks/flowing-gradient.mdx
index d8ec3c2633..8f85d60c20 100644
--- a/docs/catalog/blocks/flowing-gradient.mdx
+++ b/docs/catalog/blocks/flowing-gradient.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Flowing Gradient</h1>
+  <p>Bands of orange and violet flow across the frame in a smooth gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/flowing-gradient.json"
   compositionId="flowing-gradient"
   compositionSrc="compositions/flowing-gradient.html"
   title="Flowing Gradient"
-  description="Bands of orange and violet flow across the frame in a smooth gradient. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/flowing-gradient","tags":["webgpu","webgpu-shader","background","gradient","color","flow"]}}
@@ -68,7 +72,9 @@ That writes `compositions/flowing-gradient.html`, plus 2 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `gradient` `color` `flow`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/fractal-noise.mdx b/docs/catalog/blocks/fractal-noise.mdx
index c6e05adf49..841feddfec 100644
--- a/docs/catalog/blocks/fractal-noise.mdx
+++ b/docs/catalog/blocks/fractal-noise.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Fractal Noise</h1>
+  <p>Soft grey fractal noise drifts across the frame like slow clouds. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/fractal-noise.json"
   compositionId="fractal-noise"
   compositionSrc="compositions/fractal-noise.html"
   title="Fractal Noise"
-  description="Soft grey fractal noise drifts across the frame like slow clouds. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Texture","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/fractal-noise","tags":["webgpu","webgpu-shader","background","noise","texture","clouds"]}}
@@ -68,7 +72,9 @@ That writes `compositions/fractal-noise.html`, plus 2 supporting files under `co
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `noise` `texture` `clouds`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
index 75c9c85fd2..a597660c2c 100644
--- a/docs/catalog/blocks/freeze-frame-dressing.mdx
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Freeze-Frame Dressing</h1>
+  <p>Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/freeze-frame-dressing.json"
   compositionId="freeze-frame-dressing"
   compositionSrc="compositions/freeze-frame-dressing.html"
   title="Freeze-Frame Dressing"
-  description="Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Social Overlays","badge":"Stable","codeLines":120}}
   attribution={{"path":"registry/blocks/freeze-frame-dressing","tags":["freeze-frame","cutout","scrapbook","paper","social","overlay","media-treatment-overlay"]}}
@@ -155,7 +159,9 @@ That writes one file: `compositions/freeze-frame-dressing.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -186,6 +192,4 @@ Tagged `freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-tre
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/frost-sequence-camera-orbit.mdx b/docs/catalog/blocks/frost-sequence-camera-orbit.mdx
index ae4fe58871..8ba6222148 100644
--- a/docs/catalog/blocks/frost-sequence-camera-orbit.mdx
+++ b/docs/catalog/blocks/frost-sequence-camera-orbit.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Frost Sequence Camera Orbit</h1>
+  <p>An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/frost-sequence-camera-orbit.json"
   compositionId="frost-sequence-camera-orbit"
   compositionSrc="compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html"
   title="Frost Sequence Camera Orbit"
-  description="An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades."
   variables={[{"id":"headline1","type":"string","label":"First text (| = line break)","default":"Hard to|break.","maxLength":60},{"id":"headline2","type":"string","label":"Second text (| = line break)","default":"Easy to|remember.","maxLength":60},{"id":"logoUrl","type":"string","label":"Logo SVG asset path (upload in Assets, then paste path)","default":"assets/logo.svg","maxLength":200},{"id":"assemblyMode","type":"enum","label":"Assembly response","default":"hybrid","options":[{"value":"physical","label":"Physical attraction (100 = full strength)"},{"value":"directed","label":"Direct progress (100 = assembled)"},{"value":"hybrid","label":"Hybrid progress + physical flight"}]},{"id":"materialBaseColor","type":"color","label":"Base color","default":"#ffffff","materialSection":"Base","materialScope":"object"},{"id":"baseRoughness","type":"number","label":"Base roughness","default":0.31,"min":0,"max":0.5,"step":0.005,"materialSection":"Base","materialScope":"object"},{"id":"materialTransmission","type":"boolean","label":"Transmission","default":true,"materialSection":"Transmission","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"materialBacklight","type":"number","label":"Backlight through ice","default":0.27,"min":0,"max":2,"step":0.01,"materialSection":"Transmission","materialScope":"object"},{"id":"ior","type":"number","label":"Index of refraction","default":1.675,"min":1,"max":2,"step":0.005,"materialSection":"Transmission","materialScope":"object"},{"id":"thicknessScale","type":"number","label":"Thickness scale","default":2.04,"min":0.1,"max":3,"step":0.01,"materialSection":"Transmission","materialScope":"object"},{"id":"materialAbsorption","type":"boolean","label":"Absorption / tint","default":true,"materialSection":"Absorption / tint","materialScope":"object","materialToggle":true,"materialRequires":["materialTransmission"],"description":"Switch off to remove this feature without losing its settings."},{"id":"attenuationColor","type":"color","label":"Attenuation colour (white = no absorption, clear glass)","default":"#d5f4ff","materialSection":"Absorption / tint","materialScope":"object"},{"id":"attenuationDistance","type":"number","label":"Attenuation distance","default":6.54,"min":0.05,"max":12,"step":0.01,"materialSection":"Absorption / tint","materialScope":"object"},{"id":"materialDispersion","type":"boolean","label":"Dispersion","default":false,"materialSection":"Dispersion","materialScope":"object","materialToggle":true,"materialRequires":["materialTransmission"],"description":"Switch off to remove this feature without losing its settings."},{"id":"dispersion","type":"number","label":"Dispersion (0 = off; on/off reloads)","default":0.12,"min":0,"max":0.3,"step":0.005,"materialSection":"Dispersion","materialScope":"object"},{"id":"materialReflections","type":"boolean","label":"Reflections","default":true,"materialSection":"Reflections","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"envIntensity","type":"number","label":"Environment intensity","default":2.04,"min":0,"max":3,"step":0.01,"materialSection":"Reflections","materialScope":"object"},{"id":"specularIntensity","type":"number","label":"Specular intensity","default":1.44,"min":0,"max":2,"step":0.01,"materialSection":"Reflections","materialScope":"object"},{"id":"materialFrost","type":"boolean","label":"Frost","default":true,"materialSection":"Frost","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"materialInteriorFrost","type":"number","label":"Uniform frost","default":0,"min":0,"max":1,"step":0.01,"materialSection":"Frost","materialScope":"object"},{"id":"frostScale","type":"number","label":"Scale","default":0.7,"min":0.2,"max":6,"step":0.05,"materialSection":"Frost","materialScope":"object"},{"id":"frostThreshold","type":"number","label":"Threshold (1 = no frost, clear glass)","default":0.62,"min":0,"max":1,"step":0.01,"materialSection":"Frost","materialScope":"object"},{"id":"frostSoftness","type":"number","label":"Softness","default":0.24,"min":0.01,"max":1,"step":0.01,"materialSection":"Frost","materialScope":"object"},{"id":"frostRoughness","type":"number","label":"Roughness","default":0.73,"min":0,"max":1,"step":0.01,"materialSection":"Frost","materialScope":"object"},{"id":"frostDiffuse","type":"number","label":"Diffuse (how much light frosted areas catch)","default":0.11,"min":0,"max":1,"step":0.01,"materialSection":"Frost","materialScope":"object"},{"id":"materialSurfaceBumps","type":"boolean","label":"Object surface bumps / crack notches","default":false,"materialSection":"Surface bumps","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Disable crystal, grain, micro, ripple and crack normal perturbations and crack notches on the solid. Preserves their settings and the shard finish."},{"id":"materialCrystals","type":"boolean","label":"Crystal bumps","default":true,"materialSection":"Crystal bumps","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"crystalBump","type":"number","label":"Crystal bump","default":0.01,"min":0,"max":1,"step":0.01,"materialSection":"Crystal bumps","materialScope":"object"},{"id":"crystalScale","type":"number","label":"Crystal scale","default":4,"min":4,"max":80,"step":1,"materialSection":"Crystal bumps","materialScope":"object"},{"id":"materialGrain","type":"boolean","label":"Grain bumps","default":true,"materialSection":"Grain bumps","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"materialGrainAmount","type":"number","label":"Grain strength","default":0.47,"min":0,"max":2,"step":0.01,"materialSection":"Grain bumps","materialScope":"object"},{"id":"materialGrainScale","type":"number","label":"Grain scale","default":150,"min":1,"max":150,"step":1,"materialSection":"Grain bumps","materialScope":"object"},{"id":"materialCutNormals","type":"boolean","label":"Fracture normals","default":true,"materialSection":"Fracture normals","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"materialMicro","type":"boolean","label":"Micro bumps","default":true,"materialSection":"Micro bumps","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"microBump","type":"number","label":"Micro bump","default":0.445,"min":0,"max":1,"step":0.005,"materialSection":"Micro bumps","materialScope":"object"},{"id":"microScale","type":"number","label":"Micro scale","default":10,"min":10,"max":200,"step":1,"materialSection":"Micro bumps","materialScope":"object"},{"id":"microCoverage","type":"number","label":"Micro coverage","default":0.25,"min":0,"max":1,"step":0.01,"materialSection":"Micro bumps","materialScope":"object"},{"id":"bumpMaskScale","type":"number","label":"Mask scale","default":1.45,"min":0.1,"max":6,"step":0.05,"materialSection":"Micro bumps","materialScope":"object"},{"id":"materialRipples","type":"boolean","label":"Ripples","default":true,"materialSection":"Ripples","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"rippleBump","type":"number","label":"Ripple bump","default":0.22,"min":0,"max":1,"step":0.01,"materialSection":"Ripples","materialScope":"object"},{"id":"rippleScale","type":"number","label":"Ripple scale","default":23,"min":2,"max":30,"step":0.5,"materialSection":"Ripples","materialScope":"object"},{"id":"materialSmudges","type":"boolean","label":"Smudges","default":true,"materialSection":"Smudges","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"smudgeAmount","type":"number","label":"Amount","default":0.78,"min":0,"max":1,"step":0.01,"materialSection":"Smudges","materialScope":"object"},{"id":"smudgeCoverage","type":"number","label":"Coverage","default":0.58,"min":0,"max":1,"step":0.01,"materialSection":"Smudges","materialScope":"object"},{"id":"smudgeMaskScale","type":"number","label":"Mask scale","default":1.85,"min":0.1,"max":6,"step":0.05,"materialSection":"Smudges","materialScope":"object"},{"id":"smudgeAnisotropy","type":"number","label":"Anisotropy","default":16.5,"min":1,"max":20,"step":0.5,"materialSection":"Smudges","materialScope":"object"},{"id":"smudgeRoughness","type":"number","label":"Roughness","default":0.75,"min":0,"max":1,"step":0.01,"materialSection":"Smudges","materialScope":"object"},{"id":"smudgeWhiteness","type":"number","label":"Whiteness","default":0.035,"min":0,"max":0.5,"step":0.005,"materialSection":"Smudges","materialScope":"object"},{"id":"smudgeScale","type":"number","label":"Scale","default":1.3,"min":0.5,"max":10,"step":0.1,"materialSection":"Smudges","materialScope":"object"},{"id":"materialCracks","type":"boolean","label":"Cracks","default":true,"materialSection":"Cracks","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"crackLargeScale","type":"number","label":"Large scale","default":2.45,"min":0.3,"max":8,"step":0.05,"materialSection":"Cracks","materialScope":"object"},{"id":"crackWarp","type":"number","label":"Warp","default":0.22,"min":0,"max":1.5,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"crackCoverage","type":"number","label":"Coverage","default":0.19,"min":0,"max":1,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"crackRegionScale","type":"number","label":"Region scale","default":1.8,"min":0.1,"max":4,"step":0.05,"materialSection":"Cracks","materialScope":"object"},{"id":"crackRegionCoverage","type":"number","label":"Region coverage","default":0.6,"min":0,"max":1,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"veinScale","type":"number","label":"Vein scale","default":8,"min":1,"max":20,"step":0.25,"materialSection":"Cracks","materialScope":"object"},{"id":"veinContrast","type":"number","label":"Vein contrast","default":0.55,"min":0,"max":1,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"crackWidth","type":"number","label":"Width","default":0.0025,"min":0.0005,"max":0.02,"step":0.0005,"materialSection":"Cracks","materialScope":"object"},{"id":"crackBrightness","type":"number","label":"Brightness","default":0.65,"min":0,"max":3,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"crackDarkness","type":"number","label":"Darkness","default":0.69,"min":0,"max":1,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"crackRefraction","type":"number","label":"Refraction","default":0.076,"min":0,"max":0.1,"step":0.001,"materialSection":"Cracks","materialScope":"object"},{"id":"crackSurfaceStrength","type":"number","label":"Surface strength","default":0.16,"min":0,"max":1,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"fineScale","type":"number","label":"Fine scale","default":18.4,"min":2,"max":20,"step":0.1,"materialSection":"Cracks","materialScope":"object"},{"id":"fineAmount","type":"number","label":"Fine amount","default":0.52,"min":0,"max":1,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"fineCoverage","type":"number","label":"Fine coverage","default":1,"min":0,"max":1,"step":0.01,"materialSection":"Cracks","materialScope":"object"},{"id":"materialScatter","type":"boolean","label":"Internal scattering","default":true,"materialSection":"Internal scattering","materialScope":"object","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"materialInclusionScale","type":"number","label":"Inclusion scale","default":0.05,"min":0.05,"max":3,"step":0.01,"materialSection":"Internal scattering","materialScope":"object"},{"id":"materialInclusionAmount","type":"number","label":"Photographic inclusions","default":2,"min":0,"max":2,"step":0.01,"materialSection":"Internal scattering","materialScope":"object"},{"id":"interiorScatter","type":"number","label":"Interior scatter","default":0.09,"min":0,"max":1,"step":0.01,"materialSection":"Internal scattering","materialScope":"object"},{"id":"materialClearcoat","type":"boolean","label":"Clearcoat","default":true,"materialSection":"Clearcoat","materialScope":"object","materialToggle":true,"materialRequires":["materialReflections"],"description":"Switch off to remove this feature without losing its settings."},{"id":"clearcoat","type":"number","label":"Clearcoat","default":0,"min":0,"max":1,"step":0.01,"materialSection":"Clearcoat","materialScope":"object"},{"id":"clearcoatRoughness","type":"number","label":"Clearcoat roughness","default":0,"min":0,"max":1,"step":0.005,"materialSection":"Clearcoat","materialScope":"object"},{"id":"materialShardNormals","type":"boolean","label":"Shard normals","default":true,"materialSection":"Shard normals","materialScope":"shards","materialToggle":true,"materialRequires":[],"description":"Switch off to remove this feature without losing its settings."},{"id":"spriteNormal","type":"number","label":"Sprite normal strength","default":0.15,"min":0,"max":2.5,"step":0.05,"materialSection":"Shard normals","materialScope":"shards"},{"id":"materialShardFrost","type":"boolean","label":"Shard frost","default":true,"materialSection":"Shard frost","materialScope":"shards","materialToggle":true,"materialRequires":[],"description":"Uses the shared material settings from Logo & text. This switch enables them on shards."},{"id":"materialShardTransmission","type":"boolean","label":"Shard transparency","default":true,"materialSection":"Shard transparency","materialScope":"shards","materialToggle":true,"materialRequires":[],"description":"Uses the shared material settings from Logo & text. This switch enables them on shards."},{"id":"spriteSeeThrough","type":"number","label":"See-through (0 = off; on/off reloads)","default":1,"min":0,"max":1,"step":0.01,"materialSection":"Shard transparency","materialScope":"shards"},{"id":"materialShardReflections","type":"boolean","label":"Shard reflections","default":true,"materialSection":"Shard reflections","materialScope":"shards","materialToggle":true,"materialRequires":[],"description":"Uses the shared material settings from Logo & text. This switch enables them on shards."},{"id":"minPixelSize","type":"number","label":"Minimum pixel size","default":0.25,"min":0,"max":4,"step":0.05,"materialSection":"Shard shape","materialScope":"shards"},{"id":"grainSizeMultiplier","type":"number","label":"Grain size multiplier","default":1.05,"min":0.2,"max":4,"step":0.05,"materialSection":"Shard shape","materialScope":"shards"},{"id":"spriteSize","type":"number","label":"Sprite size","default":1.9,"min":0.3,"max":4,"step":0.05,"materialSection":"Shard shape","materialScope":"shards"},{"id":"spriteTilt","type":"number","label":"Sprite tilt","default":12,"min":0,"max":70,"step":1,"unit":"deg","materialSection":"Shard shape","materialScope":"shards"},{"id":"spriteAlphaCut","type":"number","label":"Alpha cut","default":0.6,"min":0.05,"max":0.6,"step":0.01,"materialSection":"Shard shape","materialScope":"shards"},{"id":"fontWeight","type":"enum","label":"Type - Weight (Geist)","default":"600","options":[{"value":"400","label":"Regular 400"},{"value":"600","label":"SemiBold 600"},{"value":"700","label":"Bold 700"}]},{"id":"letterSpacing","type":"number","label":"Type - Letter spacing","default":0.01,"min":-0.1,"max":0.4,"step":0.005,"unit":"em"},{"id":"shardAmount","type":"number","label":"Shards - Visible fraction of the broken volume (Powder amount)","default":0.44,"min":0.02,"max":1,"step":0.01},{"id":"strayDust","type":"number","label":"Shards - Ambient dust motes around the object (the experiment had 40)","default":24,"min":0,"max":200,"step":1},{"id":"sliceRadius","type":"number","label":"Break - First (diagonal) slice radius","default":0.6,"min":0.05,"max":1.5,"step":0.01},{"id":"sliceStrength","type":"number","label":"Break - First slice strength","default":21.5,"min":1,"max":40,"step":0.5},{"id":"finalEjectBoost","type":"number","label":"Break - Last break: eject speed and speed cap multiplier","default":2.5,"min":1,"max":6,"step":0.1},{"id":"shatterRadius","type":"number","label":"Break - Follow-up slice radius (sets their spacing too)","default":0.45,"min":0.1,"max":1.5,"step":0.01},{"id":"shatterStrength","type":"number","label":"Break - Follow-up slice strength","default":32.5,"min":1,"max":40,"step":0.5},{"id":"cutThreshold","type":"number","label":"Tune break - Cut threshold (surface gone above this erosion)","default":0.3,"min":0.3,"max":0.98,"step":0.01},{"id":"cutSoftness","type":"number","label":"Tune break - Cut softness","default":0.19,"min":0.005,"max":0.3,"step":0.005},{"id":"edgeWidth","type":"number","label":"Tune break - Crumbly edge band width","default":0.19,"min":0.05,"max":0.8,"step":0.01},{"id":"edgeInset","type":"number","label":"Tune break - Edge inset","default":0,"min":0,"max":0.3,"step":0.005},{"id":"brushSoftness","type":"number","label":"Tune break - Brush softness (edge falloff of a slice)","default":0.15,"min":0.02,"max":1,"step":0.01},{"id":"brushNoise","type":"number","label":"Tune break - Brush noise (ragged boundary)","default":0.4,"min":0,"max":1,"step":0.01},{"id":"crumbleRate","type":"number","label":"Tune break - Crumble rate along cracks (high = the whole shape goes at once)","default":4.3,"min":0,"max":6,"step":0.05},{"id":"crumbleCrackBias","type":"number","label":"Tune break - Crumble crack bias","default":5.1,"min":0,"max":6,"step":0.05},{"id":"crumbleDuration","type":"number","label":"Tune break - Crumble duration after a stroke","default":0.35,"min":0,"max":2,"step":0.01},{"id":"ejectSpeed","type":"number","label":"Flight - Eject speed","default":0.91,"min":0,"max":4,"step":0.01},{"id":"ejectSpread","type":"number","label":"Flight - Eject spread along the normal","default":0.48,"min":0,"max":3,"step":0.01},{"id":"ejectTurbulence","type":"number","label":"Flight - Eject turbulence","default":4,"min":0,"max":4,"step":0.01},{"id":"drag","type":"number","label":"Flight - Drag (speed decays by this per second)","default":0,"min":0,"max":8,"step":0.01},{"id":"gravity","type":"number","label":"Flight - Gravity (0 = shards never fall)","default":0,"min":0,"max":2,"step":0.005},{"id":"turbulence","type":"number","label":"Flight - Turbulence strength (curl noise)","default":4,"min":0,"max":4,"step":0.01},{"id":"turbulenceScale","type":"number","label":"Flight - Turbulence scale","default":2.65,"min":0.2,"max":8,"step":0.05},{"id":"turbulenceDecay","type":"number","label":"Flight - Turbulence decay with age (low = keeps swirling)","default":3.65,"min":0.05,"max":4,"step":0.01},{"id":"clumpCohesion","type":"number","label":"Flight - Clump cohesion (shards orbit a leader; 0 = none)","default":0.9,"min":0,"max":10,"step":0.05},{"id":"followObject","type":"number","label":"Flight - Shards follow the object motion for (s; 30 = whole flight)","default":30,"min":0,"max":30,"step":0.5,"unit":"s"},{"id":"settleTime","type":"number","label":"Flight - Settle time (velocity is killed after this; 12 = never)","default":2.2,"min":0.3,"max":12,"step":0.05},{"id":"settledDrift","type":"number","label":"Flight - Organic drift once settled (curl noise)","default":1,"min":0,"max":1,"step":0.005},{"id":"maxSpeed","type":"number","label":"Flight - Speed cap","default":26.3,"min":1,"max":40,"step":0.1},{"id":"repelStrength","type":"number","label":"Flight - Push out of the solid shape while it breaks","default":30,"min":0,"max":30,"step":0.1},{"id":"repelRange","type":"number","label":"Flight - Push range outside the surface","default":0.97,"min":0.02,"max":2,"step":0.01},{"id":"repelRadial","type":"number","label":"Flight - Push away from the shape centre (clears pockets and the hole)","default":17.5,"min":0,"max":60,"step":0.5},{"id":"repelRadialRange","type":"number","label":"Flight - Radial push range (object radii)","default":3.3,"min":1,"max":4,"step":0.05},{"id":"tumble","type":"number","label":"Flight - Tumble rate","default":1.05,"min":0,"max":12,"step":0.05},{"id":"returnGroupStagger","type":"number","label":"Assembly - Regional delay (seconds)","default":1.35,"min":0,"max":1.5,"step":0.05,"unit":"s"},{"id":"returnGroupScale","type":"number","label":"Assembly - Region / noise size","default":2.55,"min":0.1,"max":3,"step":0.05,"description":"Larger values form broader connected patches. Noise is evaluated only on retarget."},{"id":"returnGroupSeed","type":"number","label":"Return - Group timing seed","default":60765,"min":0,"max":65535,"step":1},{"id":"formSpread","type":"number","label":"Return - Wave spread (nearest shards leave first, seconds)","default":0,"min":0,"max":4,"step":0.05,"unit":"s"},{"id":"waveReach","type":"number","label":"Return - Distance over which the wave spreads","default":10,"min":0.2,"max":10,"step":0.1},{"id":"formJitter","type":"number","label":"Return - Per-shard stagger (random delay up to this)","default":2.8,"min":0,"max":3,"step":0.05,"unit":"s"},{"id":"formFill","type":"number","label":"Return - Fill-in rate for voxels no shard returns to","default":3,"min":0.05,"max":3,"step":0.05},{"id":"returnSpring","type":"number","label":"Return - Spring stiffness","default":29.9,"min":0.5,"max":40,"step":0.1},{"id":"returnDamping","type":"number","label":"Return - Spring damping","default":1.34,"min":0.2,"max":2,"step":0.01},{"id":"returnRamp","type":"number","label":"Return - Spring ramp-in (seconds until it pulls at full strength)","default":0.45,"min":0,"max":3,"step":0.05},{"id":"returnMaxSpeed","type":"number","label":"Return - Speed cap on the way home","default":60,"min":1,"max":60,"step":0.5},{"id":"alignToSurface","type":"number","label":"Return - Shards turn to lie on the surface (0 = keep tumbling)","default":1,"min":0,"max":1,"step":0.01},{"id":"alignCurve","type":"number","label":"Return - Alignment curve over the flight home (1 linear, higher = later)","default":3.75,"min":0.2,"max":4,"step":0.05},{"id":"healRate","type":"number","label":"Return - Neighbour heal rate","default":3,"min":0.02,"max":3,"step":0.01},{"id":"cellRestore","type":"number","label":"Return - Cell restore rate","default":60,"min":0,"max":60,"step":0.5},{"id":"landedFade","type":"number","label":"Return - Landed shard fade","default":1.65,"min":0,"max":2,"step":0.01},{"id":"refrostTime","type":"number","label":"Return - Refrost time","default":10.6,"min":0.2,"max":12,"step":0.1},{"id":"keyColor","type":"color","label":"Light - Key colour","default":"#f0f7ff"},{"id":"keyIntensity","type":"number","label":"Light - Key intensity","default":5.05,"min":0,"max":12,"step":0.05},{"id":"keyElevation","type":"number","label":"Light - Key elevation","default":42,"min":10,"max":89,"step":0.5,"unit":"deg"},{"id":"keyAzimuth","type":"number","label":"Light - Key azimuth","default":-38,"min":-90,"max":90,"step":0.5,"unit":"deg"},{"id":"keySize","type":"number","label":"Light - Key size (softbox)","default":1.25,"min":0.2,"max":3,"step":0.01},{"id":"fill","type":"number","label":"Light - Fill intensity (hemisphere, diffuse only: barely shows on clear ice)","default":0.18,"min":0,"max":1.5,"step":0.005},{"id":"fillColor","type":"color","label":"Light - Fill sky colour","default":"#cadde9"},{"id":"fillGroundColor","type":"color","label":"Light - Fill ground colour","default":"#172635"},{"id":"rim","type":"number","label":"Light - Rim spot intensity","default":2.5,"min":0,"max":5,"step":0.01},{"id":"rimColor","type":"color","label":"Light - Rim colour","default":"#d9f1ff"},{"id":"rimElevation","type":"number","label":"Light - Rim elevation (0 = straight behind)","default":20,"min":0,"max":89,"step":0.5,"unit":"deg"},{"id":"swayAmplitude","type":"number","label":"Light - Key sway amplitude","default":0,"min":0,"max":0.15,"step":0.001},{"id":"swayPeriod","type":"number","label":"Light - Key sway period","default":35,"min":2,"max":40,"step":0.5,"unit":"s"},{"id":"envSoftbox","type":"number","label":"Light - Environment softbox (the main light on glass)","default":1.1,"min":0,"max":3,"step":0.01},{"id":"envRim","type":"number","label":"Light - Environment rim strip","default":1.4,"min":0,"max":3,"step":0.01},{"id":"envFill","type":"number","label":"Light - Environment front fill","default":0.22,"min":0,"max":1,"step":0.005},{"id":"backdropTop","type":"color","label":"Backdrop - Top colour","default":"#050505"},{"id":"backdropMid","type":"color","label":"Backdrop - Mid colour","default":"#050505"},{"id":"backdropBottom","type":"color","label":"Backdrop - Bottom colour","default":"#050505"},{"id":"backdropCenterX","type":"number","label":"Backdrop - Bloom centre X","default":0.73,"min":0,"max":1,"step":0.005},{"id":"backdropCenterY","type":"number","label":"Backdrop - Bloom centre Y","default":0.22,"min":0,"max":2,"step":0.005},{"id":"backdropRadius","type":"number","label":"Backdrop - Bloom radius","default":0.8,"min":0.1,"max":2,"step":0.005},{"id":"backdropFalloff","type":"number","label":"Backdrop - Bloom falloff","default":0.85,"min":0.5,"max":6,"step":0.01},{"id":"backdropNoise","type":"number","label":"Backdrop - Dither noise","default":0,"min":0,"max":3,"step":0.05},{"id":"bloomThreshold","type":"number","label":"Post - Bloom threshold","default":3,"min":0,"max":3,"step":0.01},{"id":"bloomIntensity","type":"number","label":"Post - Bloom intensity","default":0.04,"min":0,"max":1.5,"step":0.005},{"id":"bloomRadius","type":"number","label":"Post - Bloom radius","default":1,"min":0,"max":1,"step":0.005},{"id":"monochrome","type":"number","label":"Post - Monochrome","default":0.04,"min":0,"max":1,"step":0.01},{"id":"tonemap","type":"enum","label":"Post - Tonemap","default":"aces","options":[{"value":"agx","label":"AgX"},{"value":"aces","label":"ACES"},{"value":"neutral","label":"Neutral"},{"value":"linear","label":"Linear"}]},{"id":"exposure","type":"number","label":"Post - Exposure","default":1,"min":0.1,"max":4,"step":0.01},{"id":"contrast","type":"number","label":"Post - Contrast","default":1.03,"min":0.6,"max":1.6,"step":0.005},{"id":"blackLift","type":"number","label":"Post - Black lift","default":0,"min":0,"max":0.1,"step":0.001},{"id":"vignetteStrength","type":"number","label":"Post - Vignette strength","default":0.14,"min":0,"max":1,"step":0.005},{"id":"vignetteSoftness","type":"number","label":"Post - Vignette softness","default":1.2,"min":0.1,"max":1.5,"step":0.005},{"id":"vignetteRadius","type":"number","label":"Post - Vignette radius","default":1.2,"min":0.2,"max":1.6,"step":0.005},{"id":"grainStrength","type":"number","label":"Post - Film grain","default":0,"min":0,"max":0.15,"step":0.001},{"id":"quality","type":"enum","label":"Performance - Quality profile","default":"full","options":[{"value":"full","label":"Full (baked look; needs a real GPU)"},{"value":"lite","label":"Lite (the source ?lite profile for software WebGPU)"}]},{"id":"upscaler","type":"enum","label":"Performance - Upscaler","default":"fsr1","options":[{"value":"fsr1","label":"FSR 1 (TRAA + EASU/RCAS)"},{"value":"taau","label":"TAAU"},{"value":"bilinear","label":"Bilinear"},{"value":"native","label":"Native (no upscale)"}]},{"id":"renderScale","type":"number","label":"Performance - Scene resolution scale (upscaled to 1080p)","default":1,"min":0.35,"max":1,"step":0.05},{"id":"shapeResolution","type":"enum","label":"Shape voxel resolution","default":"256","options":[{"value":"128","label":"128 — draft"},{"value":"256","label":"256 — high"},{"value":"384","label":"384 — ultra"}],"description":"Resolution of the logo and text distance fields. Rebuilds shapes; higher values increase startup time and memory. Independent of breakup resolution."},{"id":"erosionResolution","type":"enum","label":"Performance - Erosion field resolution (voxels per axis)","default":"96","options":[{"value":"64","label":"64"},{"value":"96","label":"96"},{"value":"128","label":"128"},{"value":"192","label":"192 (baked)"}]},{"id":"particleCount","type":"enum","label":"Performance - Powder particles","default":"100k","options":[{"value":"100k","label":"100k (baked)"},{"value":"250k","label":"250k"},{"value":"500k","label":"500k"},{"value":"1M","label":"1M"}]},{"id":"logoMeshDetail","type":"number","label":"Shape - Logo mesh detail (1-4; higher = finer surface)","default":2,"min":1,"max":4,"step":1},{"id":"deformStrength","type":"number","label":"Geometry - Ice deformation strength (0 = original)","default":0,"min":0,"max":0.08,"step":0.001},{"id":"deformScale","type":"number","label":"Geometry - Noise feature size (larger = broader)","default":0.41,"min":0.001,"max":0.5,"step":0.001},{"id":"deformSeed","type":"number","label":"Geometry - Deformation seed","default":7,"min":0,"max":65535,"step":1},{"id":"rimAzimuth","type":"number","label":"Light - Rim azimuth","default":-146,"min":-180,"max":180,"step":1},{"id":"rimAngle","type":"number","label":"Light - Rim beam angle","default":26,"min":10,"max":89,"step":1},{"id":"rimSize","type":"number","label":"Light - Rim reflection size","default":0.45,"min":0.1,"max":3,"step":0.05},{"id":"fillReflectionStrength","type":"number","label":"Light - Fill reflection strength","default":0.3,"min":0,"max":2,"step":0.01},{"id":"accentCoolIntensity","type":"number","label":"Studio Cool accent - intensity","default":3.71,"min":0,"max":4,"step":0.01},{"id":"accentCoolReflection","type":"number","label":"Studio Cool accent - reflection","default":2.31,"min":0,"max":3,"step":0.01},{"id":"accentCoolElevation","type":"number","label":"Studio Cool accent - elevation","default":63,"min":-85,"max":85,"step":1},{"id":"accentCoolAzimuth","type":"number","label":"Studio Cool accent - azimuth","default":22,"min":-180,"max":180,"step":1},{"id":"accentCoolSize","type":"number","label":"Studio Cool accent - size","default":2.65,"min":0.1,"max":3,"step":0.05},{"id":"accentCoolColor","type":"color","label":"Studio Cool accent - color","default":"#ff5900"},{"id":"accentWarmIntensity","type":"number","label":"Studio Warm accent - intensity","default":2.99,"min":0,"max":4,"step":0.01},{"id":"accentWarmReflection","type":"number","label":"Studio Warm accent - reflection","default":0.34,"min":0,"max":3,"step":0.01},{"id":"accentWarmElevation","type":"number","label":"Studio Warm accent - elevation","default":30,"min":-85,"max":85,"step":1},{"id":"accentWarmAzimuth","type":"number","label":"Studio Warm accent - azimuth","default":-30,"min":-180,"max":180,"step":1},{"id":"accentWarmSize","type":"number","label":"Studio Warm accent - size","default":1.2,"min":0.1,"max":3,"step":0.05},{"id":"accentWarmColor","type":"color","label":"Studio Warm accent - color","default":"#75aaff"},{"id":"returnNoiseAmount","type":"enum","label":"Assembly - Regional pattern","default":"2","options":[{"value":"2","label":"Travelling seam + organic spread"},{"value":"1","label":"Smooth noise regions"},{"value":"0","label":"Original cell groups"}]},{"id":"assemblyFrontDuration","type":"number","label":"Assembly - Growth duration (seconds)","default":3.2,"min":0,"max":6,"step":0.05},{"id":"assemblyOriginX","type":"number","label":"Assembly - Growth start X","default":-0.65,"min":-1,"max":1,"step":0.01},{"id":"assemblyOriginY","type":"number","label":"Assembly - Growth start Y","default":0.55,"min":-1,"max":1,"step":0.01},{"id":"assemblyAngle","type":"number","label":"Assembly - Seam direction (degrees)","default":-35,"min":-180,"max":180,"step":1},{"id":"assemblySpread","type":"number","label":"Assembly - Outward spread vs seam travel","default":0.65,"min":0,"max":1,"step":0.01},{"id":"assemblyFrontNoise","type":"number","label":"Assembly - Growth edge irregularity","default":0.35,"min":0,"max":1,"step":0.01},{"id":"assemblySpeedVariation","type":"number","label":"Assembly - Return speed variation","default":0.65,"min":0,"max":1,"step":0.01},{"id":"assemblyBend","type":"number","label":"Assembly - Approach path bend","default":1.2,"min":0,"max":3,"step":0.05},{"id":"assemblySwirl","type":"number","label":"Assembly - Approach twist","default":1.1,"min":0,"max":3,"step":0.05},{"id":"assemblyLandingVariation","type":"number","label":"Assembly - Landing transition variation","default":0.8,"min":0,"max":1,"step":0.01},{"id":"rendererProfile","type":"enum","label":"Renderer experiment (reload required)","default":"studio","options":[{"value":"original","label":"Original glass + GPU startup"},{"value":"lookup","label":"Original glass + material lookup"},{"value":"mesh","label":"Mesh surface + original glass"},{"value":"studio","label":"Studio glass approximation"},{"value":"matcap","label":"Matcap glass approximation"}]},{"id":"textWidth","type":"number","label":"Type - Headline block width (the mark is 2.6 wide)","default":6.5,"min":1.2,"max":9,"step":0.05},{"id":"textLineHeight","type":"number","label":"Type - Line height","default":0.95,"min":0.7,"max":1.4,"step":0.01,"unit":"em"},{"id":"textDepth","type":"number","label":"Type - Extrusion depth (fraction of the font size)","default":0.16,"min":0.05,"max":0.8,"step":0.01},{"id":"textBevel","type":"number","label":"Type - Bevel (fraction of the font size)","default":0.04,"min":0,"max":0.12,"step":0.005},{"id":"textCorner","type":"number","label":"Type - Corner rounding (fraction of the font size)","default":0.008,"min":0,"max":0.06,"step":0.002},{"id":"textMeshDetail","type":"number","label":"Type - Text mesh detail (1-4; higher = smoother deformation)","default":4,"min":1,"max":4,"step":1}]}
   meta={{"duration":22.5,"width":1920,"height":1080,"category":"3D motion","badge":"Stable","codeLines":3321}}
   attribution={{"path":"registry/blocks/frost-sequence-camera-orbit","tags":["3d-motion","ice","frost","camera-orbit","logo","particles","webgpu","two-headlines"]}}
@@ -3359,7 +3363,9 @@ That writes `compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -3390,6 +3396,4 @@ Tagged `3d-motion` `ice` `frost` `camera-orbit` `logo` `particles` `webgpu` `two
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/frost.mdx b/docs/catalog/blocks/frost.mdx
index c5c9abaa5b..1e317b4ea3 100644
--- a/docs/catalog/blocks/frost.mdx
+++ b/docs/catalog/blocks/frost.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Frost</h1>
+  <p>A frozen blue orb with frost creeping in from its edge, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/frost.json"
   compositionId="frost"
   compositionSrc="compositions/frost.html"
   title="Frost"
-  description="A frozen blue orb with frost creeping in from its edge, on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/frost","tags":["webgpu","webgpu-shader","orb","ice","frost","material"]}}
@@ -68,7 +72,9 @@ That writes `compositions/frost.html`, plus 2 supporting files under `compositio
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `orb` `ice` `frost` `material`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/gabor-noise.mdx b/docs/catalog/blocks/gabor-noise.mdx
index c7ec56ef99..e56e8b6219 100644
--- a/docs/catalog/blocks/gabor-noise.mdx
+++ b/docs/catalog/blocks/gabor-noise.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Gabor Noise</h1>
+  <p>Grey streaky noise drifts across the frame like a moving fingerprint. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/gabor-noise.json"
   compositionId="gabor-noise"
   compositionSrc="compositions/gabor-noise.html"
   title="Gabor Noise"
-  description="Grey streaky noise drifts across the frame like a moving fingerprint. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Texture","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/gabor-noise","tags":["webgpu","webgpu-shader","background","texture","noise","monochrome"]}}
@@ -68,7 +72,9 @@ That writes `compositions/gabor-noise.html`, plus 2 supporting files under `comp
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `texture` `noise` `monochrome`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/gallery-tunnel.mdx b/docs/catalog/blocks/gallery-tunnel.mdx
index c1194581d7..9247011cc8 100644
--- a/docs/catalog/blocks/gallery-tunnel.mdx
+++ b/docs/catalog/blocks/gallery-tunnel.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Gallery Tunnel</h1>
+  <p>An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/gallery-tunnel.json"
   compositionId="gallery-tunnel"
   compositionSrc="compositions/gallery-tunnel.html"
   title="Gallery Tunnel"
-  description="An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog."
   variables={[{"id":"images","type":"string","label":"Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png)","default":"","placeholder":"assets/shot-1.png,assets/shot-2.png"},{"id":"imageMix","type":"number","label":"Image share of filled slots (0 = all colour, 1 = all images)","default":0.5,"min":0,"max":1,"step":0.05},{"id":"speed","type":"number","label":"Flight speed","default":3,"min":0,"max":8,"step":0.1,"unit":"segments/s"},{"id":"palette","type":"string","label":"Slab palette: comma-separated hex colours","default":"#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200"},{"id":"grid","type":"number","label":"Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment)","default":2,"min":1,"max":4,"step":1},{"id":"fill","type":"number","label":"Slot fill rate","default":0.5,"min":0,"max":1,"step":0.05},{"id":"fog","type":"number","label":"Fog distance: depth at which the corridor reaches pure backdrop","default":14.25,"min":3,"max":14.5,"step":0.25,"unit":"segments"},{"id":"edgeColor","type":"color","label":"Edge line colour","default":"#B0B0B0"},{"id":"edgeOpacity","type":"number","label":"Edge line opacity","default":0.5,"min":0,"max":1,"step":0.05},{"id":"backdrop","type":"color","label":"Backdrop and fog colour","default":"#000000"}]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Showcases","badge":"Experimental","codeLines":454}}
   attribution={{"path":"registry/blocks/gallery-tunnel","tags":["webgl","3d","background","showcase","depth","loop"]}}
@@ -489,7 +493,9 @@ That writes one file: `compositions/gallery-tunnel.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -564,6 +570,4 @@ Tagged `webgl` `3d` `background` `showcase` `depth` `loop`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/glass-hero.mdx b/docs/catalog/blocks/glass-hero.mdx
index e3830efc57..d9fedb2bfb 100644
--- a/docs/catalog/blocks/glass-hero.mdx
+++ b/docs/catalog/blocks/glass-hero.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Glass Hero</h1>
+  <p>A solid glass object rises in front of a giant headline and keeps turning, so the type bends and splits into colour through it.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/glass-hero.json"
   compositionId="glass-hero"
   compositionSrc="compositions/glass-hero.html"
   title="Glass Hero"
-  description="A solid glass object rises in front of a giant headline and keeps turning, so the type bends and splits into colour through it."
   variables={[{"id":"headline","type":"string","role":"content","label":"Headline behind the glass","default":"CLARITY","maxLength":12},{"id":"subline","type":"string","role":"content","label":"Subline","default":"See every detail, nothing in the way.","maxLength":48},{"id":"shape","type":"enum","role":"style","label":"Glass shape","default":"lens","options":[{"value":"lens","label":"Lens"},{"value":"ring","label":"Ring"}]},{"id":"glass_tint","type":"color","role":"style","label":"Glass tint","default":"#cfe9ff"},{"id":"type_color","type":"color","role":"style","label":"Headline color","default":"#f4efe4"},{"id":"background","type":"color","role":"style","label":"Backdrop","default":"#0b0b0c"}]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"3D objects","badge":"Stable","codeLines":281}}
   attribution={{"path":"registry/blocks/glass-hero","tags":["3d-object","three-js","webgl","glass","refraction","hero","title-card"]}}
@@ -316,7 +320,9 @@ That writes one file: `compositions/glass-hero.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -347,6 +353,4 @@ Tagged `3d-object` `three-js` `webgl` `glass` `refraction` `hero` `title-card`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/glass-shard-title.mdx b/docs/catalog/blocks/glass-shard-title.mdx
index 0a5c66513f..763a356e94 100644
--- a/docs/catalog/blocks/glass-shard-title.mdx
+++ b/docs/catalog/blocks/glass-shard-title.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Glass Shard Title</h1>
+  <p>Glass shards fly in through fog and tile themselves into the headline.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/glass-shard-title.json"
   compositionId="glass-shard-title"
   compositionSrc="compositions/glass-shard-title/glass-shard-title.html"
   title="Glass Shard Title"
-  description="Glass shards fly in through fog and tile themselves into the headline."
   variables={[{"id":"headline","type":"string","label":"Headline","default":"Designed in glass","maxLength":40},{"id":"tileCount","type":"number","label":"Tiles","default":8,"min":1,"max":400,"step":1},{"id":"roundness","type":"number","label":"Roundness (0-1)","default":0.4,"min":0,"max":1,"step":0.01},{"id":"bevel","type":"number","label":"Bevel (0-1)","default":0.35,"min":0,"max":1,"step":0.01},{"id":"meshSmooth","type":"number","label":"Surface smoothness (0-1)","default":0.6,"min":0,"max":1,"step":0.01},{"id":"flyInTime","type":"number","label":"Fly-in time (s)","default":2.3,"min":0.2,"max":6,"step":0.05},{"id":"flyOutTime","type":"number","label":"Fly-out time (s)","default":2.4,"min":0.2,"max":6,"step":0.05},{"id":"stagger","type":"number","label":"Stagger (0-1)","default":0.27,"min":0,"max":1,"step":0.01},{"id":"flyInRotation","type":"number","label":"Fly-in rotation (0-60)","description":"Amount of inbound tumbling over the entire flight. 0 disables flight rotation; final orientation lands with each shard position.","default":5,"min":0,"max":60,"step":0.1},{"id":"flyOutRotation","type":"number","label":"Fly-out rotation (0-6)","default":6,"min":0,"max":6,"step":0.1},{"id":"chaos","type":"number","label":"Outline chaos (0-1)","default":0.25,"min":0,"max":1,"step":0.01},{"id":"padding","type":"number","label":"Edge padding (0-1)","default":1,"min":0,"max":1,"step":0.01},{"id":"sizeVariance","type":"number","label":"Size variance (0-1)","default":0.35,"min":0,"max":1,"step":0.01},{"id":"gap","type":"number","label":"Tile gap","default":0.03,"min":0,"max":0.3,"step":0.002},{"id":"easePow","type":"number","label":"Fly-in position ease (1-10)","description":"Shapes lateral and depth travel. Rotation uses the same staggered flight window with a gentle settle through arrival.","default":10,"min":1,"max":10,"step":0.1},{"id":"sideDist","type":"number","label":"Side fly distance","default":3,"min":0,"max":60,"step":0.5},{"id":"zDist","type":"number","label":"Z fly-from (negative)","default":-42,"min":-400,"max":0,"step":2},{"id":"zOut","type":"number","label":"Z fly-out to (+ = past camera)","default":14,"min":-400,"max":60,"step":2},{"id":"fog","type":"number","label":"Fog distance (0 = off)","default":36,"min":0,"max":400,"step":2}]}
   meta={{"duration":12.16,"width":1920,"height":1080,"category":"3D motion","badge":"Stable","codeLines":356}}
   attribution={{"path":"registry/blocks/glass-shard-title","tags":["3d-motion","title-card","glass","voronoi","shards","fog","hdr"]}}
@@ -391,7 +395,9 @@ That writes `compositions/glass-shard-title/glass-shard-title.html`, plus 11 sup
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -422,6 +428,4 @@ Tagged `3d-motion` `title-card` `glass` `voronoi` `shards` `fog` `hdr`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index dfb19e795f..6e60f96402 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Glitch</h1>
+  <p>Shader transition with digital glitch artifacts</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/glitch.json"
   compositionId="glitch"
   compositionSrc="compositions/glitch.html"
   title="Glitch"
-  description="Shader transition with digital glitch artifacts"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":366}}
   attribution={{"path":"registry/blocks/glitch","tags":["transition","shader"]}}
@@ -401,7 +405,9 @@ That writes one file: `compositions/glitch.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -432,6 +438,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/godrays.mdx b/docs/catalog/blocks/godrays.mdx
index 76077e143f..9a3350970b 100644
--- a/docs/catalog/blocks/godrays.mdx
+++ b/docs/catalog/blocks/godrays.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Godrays</h1>
+  <p>Rays of light fan out from a corner and drift across a deep blue field. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/godrays.json"
   compositionId="godrays"
   compositionSrc="compositions/godrays.html"
   title="Godrays"
-  description="Rays of light fan out from a corner and drift across a deep blue field. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/godrays","tags":["webgpu","webgpu-shader","background","light","rays"]}}
@@ -68,7 +72,9 @@ That writes `compositions/godrays.html`, plus 2 supporting files under `composit
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `light` `rays`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/goo.mdx b/docs/catalog/blocks/goo.mdx
index fc6feafcfa..efd9d484dd 100644
--- a/docs/catalog/blocks/goo.mdx
+++ b/docs/catalog/blocks/goo.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Goo</h1>
+  <p>A glossy green liquid ball whose surface bulges and ripples like wet goo, centred on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/goo.json"
   compositionId="goo"
   compositionSrc="compositions/goo.html"
   title="Goo"
-  description="A glossy green liquid ball whose surface bulges and ripples like wet goo, centred on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/goo","tags":["webgpu","webgpu-shader","liquid","3d","organic","orb"]}}
@@ -68,7 +72,9 @@ That writes `compositions/goo.html`, plus 2 supporting files under `compositions
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `liquid` `3d` `organic` `orb`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/gooey-split.mdx b/docs/catalog/blocks/gooey-split.mdx
index 118a533ef0..9016ac0c92 100644
--- a/docs/catalog/blocks/gooey-split.mdx
+++ b/docs/catalog/blocks/gooey-split.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Gooey Split</h1>
+  <p>A dot splits into a three-dot menu with a gooey metaball neck, spins into a swirl mark under directional shutter motion blur, then breaks back into three dots and merges into one. The goo is an SVG blur-and-threshold filter on the dots; the blur integrates each part along its real trajectory, so the smear follows the direction and speed of the spin.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/gooey-split.json"
   compositionId="gooey-split"
   compositionSrc="compositions/gooey-split.html"
   title="Gooey Split"
-  description="A dot splits into a three-dot menu with a gooey metaball neck, spins into a swirl mark under directional shutter motion blur, then breaks back into three dots and merges into one. The goo is an SVG blur-and-threshold filter on the dots; the blur integrates each part along its real trajectory, so the smear follows the direction and speed of the spin."
   variables={[]}
   meta={{"duration":4.7,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":953}}
   attribution={{"path":"registry/blocks/gooey-split","tags":["effect","gooey","metaball","motion-blur","morph","logo","icon"]}}
@@ -988,7 +992,9 @@ That writes one file: `compositions/gooey-split.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1019,6 +1025,4 @@ Tagged `effect` `gooey` `metaball` `motion-blur` `morph` `logo` `icon`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index 3cc6c8bf82..cce120882a 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Gravitational Lens</h1>
+  <p>Shader transition with gravitational lensing distortion</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/gravitational-lens.json"
   compositionId="gravitational-lens"
   compositionSrc="compositions/gravitational-lens.html"
   title="Gravitational Lens"
-  description="Shader transition with gravitational lensing distortion"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":365}}
   attribution={{"path":"registry/blocks/gravitational-lens","tags":["transition","shader"]}}
@@ -400,7 +404,9 @@ That writes one file: `compositions/gravitational-lens.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -431,6 +437,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/halftone-field.mdx b/docs/catalog/blocks/halftone-field.mdx
index 5892456654..f18880a273 100644
--- a/docs/catalog/blocks/halftone-field.mdx
+++ b/docs/catalog/blocks/halftone-field.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Halftone Field</h1>
+  <p>A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/halftone-field.json"
   compositionId="halftone-field"
   compositionSrc="compositions/halftone-field.html"
   title="Halftone Field"
-  description="A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type."
   variables={[{"id":"frequency","type":"number","label":"Field frequency","default":2,"min":1,"max":10,"step":0.1},{"id":"speed","type":"number","label":"Flow speed","default":5,"min":0,"max":10,"step":0.1},{"id":"cellSize","type":"number","label":"Cell size","default":54,"min":1,"max":100,"step":1},{"id":"gamma","type":"number","label":"Gamma (midtone crush)","default":12,"min":1,"max":20,"step":0.1},{"id":"paletteBias","type":"number","label":"Palette bias","default":2,"min":0,"max":20,"step":0.5},{"id":"palette1","type":"color","label":"Palette stop 1 (lows)","default":"#00AAFF"},{"id":"palette2","type":"color","label":"Palette stop 2","default":"#C2FF67"},{"id":"palette3","type":"color","label":"Palette stop 3","default":"#6600FF"},{"id":"palette4","type":"color","label":"Palette stop 4 (crests)","default":"#000000"},{"id":"background","type":"color","label":"Background","default":"#000000"},{"id":"quantize","type":"boolean","label":"Quantise to 30fps (stepped)","default":false}]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"Texture","badge":"Experimental","codeLines":378}}
   attribution={{"path":"registry/blocks/halftone-field","tags":["webgl","shader","background","texture","halftone"]}}
@@ -413,7 +417,9 @@ That writes one file: `compositions/halftone-field.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -490,6 +496,4 @@ Tagged `webgl` `shader` `background` `texture` `halftone`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/heatmap.mdx b/docs/catalog/blocks/heatmap.mdx
index 7657a3ad1b..b49949e52e 100644
--- a/docs/catalog/blocks/heatmap.mdx
+++ b/docs/catalog/blocks/heatmap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Heatmap</h1>
+  <p>Thermal colours flow through a glowing orb, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/heatmap.json"
   compositionId="heatmap"
   compositionSrc="compositions/heatmap.html"
   title="Heatmap"
-  description="Thermal colours flow through a glowing orb, on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/heatmap","tags":["webgpu","webgpu-shader","object","heat","thermal","glow"]}}
@@ -68,7 +72,9 @@ That writes `compositions/heatmap.html`, plus 2 supporting files under `composit
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `heat` `thermal` `glow`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/heygen-avatar-promo-card.mdx b/docs/catalog/blocks/heygen-avatar-promo-card.mdx
index f3e5b53977..8fa53d0320 100644
--- a/docs/catalog/blocks/heygen-avatar-promo-card.mdx
+++ b/docs/catalog/blocks/heygen-avatar-promo-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>HeyGen Avatar Promo Card</h1>
+  <p>A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/heygen-avatar-promo-card.json"
   compositionId="heygen-avatar-promo-card"
   compositionSrc="compositions/heygen-avatar-promo-card.html"
   title="HeyGen Avatar Promo Card"
-  description="A portrait HeyGen offer card pairs a moving avatar mosaic with bold promotional typography and a branded callout"
   variables={[{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Horizontal transparent wordmark used in the header and belt.","default":"assets/heygen-logo.svg"},{"id":"titleLine1","type":"string","role":"content","label":"Headline line 1","description":"First headline line.","default":"Your avatar,"},{"id":"titleLine2","type":"string","role":"content","label":"Headline line 2","description":"Second headline line.","default":"by HeyGen."},{"id":"subhead","type":"string","role":"content","label":"Subhead","description":"Supporting line under the headline.","default":"AI video, camera-free."},{"id":"pill1","type":"string","role":"content","label":"Pill 1","description":"First feature pill.","default":"4K AVATARS"},{"id":"pill2","type":"string","role":"content","label":"Pill 2","description":"Second feature pill.","default":"NO CAMERA NEEDED"},{"id":"offerValue","type":"string","role":"content","label":"Offer value","description":"Large offer value in the light tile.","default":"25%"},{"id":"offerSuffix","type":"string","role":"content","label":"Offer suffix","description":"Large offer suffix in the adjacent light tile.","default":"OFF"},{"id":"codeLabel","type":"string","role":"content","label":"Promo code label","description":"Small label above the promo code.","default":"CODE"},{"id":"promoPrefix","type":"string","role":"content","label":"Promo code prefix","description":"Accent-colored promo-code prefix.","default":"GEN"},{"id":"promoSuffix","type":"string","role":"content","label":"Promo code suffix","description":"Light promo-code suffix.","default":"25"},{"id":"canvasColor","type":"color","role":"style","label":"Canvas color","description":"Main card background.","default":"#eaf6fa"},{"id":"inkColor","type":"color","role":"style","label":"Ink color","description":"Primary headline, pill, and offer ink.","default":"#0a1418"},{"id":"mutedInkColor","type":"color","role":"style","label":"Muted ink color","description":"Subhead ink.","default":"#47545b"},{"id":"accentColor","type":"color","role":"style","label":"Accent color","description":"Brand accent used by tiles and promo-code prefix.","default":"#00c3ff"},{"id":"lightTileColor","type":"color","role":"style","label":"Light tile color","description":"Light belt-tile surface.","default":"#f7fcfe"},{"id":"darkTileColor","type":"color","role":"style","label":"Dark tile color","description":"Dark belt-tile surface.","default":"#0b1215"}]}
   meta={{"duration":10,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":426}}
   attribution={{"author":"HeyGen","path":"registry/blocks/heygen-avatar-promo-card","tags":["showcase","avatar","promotion","vertical"]}}
@@ -461,7 +465,9 @@ That writes `compositions/heygen-avatar-promo-card.html`, plus 15 supporting fil
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -494,6 +500,4 @@ Created by HeyGen.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/hologram.mdx b/docs/catalog/blocks/hologram.mdx
index b3b264e2de..e86eb770f6 100644
--- a/docs/catalog/blocks/hologram.mdx
+++ b/docs/catalog/blocks/hologram.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Hologram</h1>
+  <p>A pale blue holographic orb with scan rings and flicker, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/hologram.json"
   compositionId="hologram"
   compositionSrc="compositions/hologram.html"
   title="Hologram"
-  description="A pale blue holographic orb with scan rings and flicker, on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/hologram","tags":["webgpu","webgpu-shader","object","hologram","sci-fi","blue"]}}
@@ -68,7 +72,9 @@ That writes `compositions/hologram.html`, plus 2 supporting files under `composi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `hologram` `sci-fi` `blue`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/holographic.mdx b/docs/catalog/blocks/holographic.mdx
index 80c61bcb19..12be105a82 100644
--- a/docs/catalog/blocks/holographic.mdx
+++ b/docs/catalog/blocks/holographic.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Holographic</h1>
+  <p>An iridescent foil orb with a shifting rainbow sheen, centred on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/holographic.json"
   compositionId="holographic"
   compositionSrc="compositions/holographic.html"
   title="Holographic"
-  description="An iridescent foil orb with a shifting rainbow sheen, centred on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/holographic","tags":["webgpu","webgpu-shader","holographic","iridescent","rainbow","orb"]}}
@@ -68,7 +72,9 @@ That writes `compositions/holographic.html`, plus 2 supporting files under `comp
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `holographic` `iridescent` `rainbow` `orb`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
index 65b70940d4..2ab4e72211 100644
--- a/docs/catalog/blocks/hw-frame.mdx
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Sketched Frame</h1>
+  <p>Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/hw-frame.json"
   compositionId="hw-frame"
   compositionSrc="compositions/hw-frame.html"
   title="Sketched Frame"
-  description="Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":302}}
   attribution={{"path":"registry/blocks/hw-frame","tags":["handwritten","frame","media"]}}
@@ -337,7 +341,9 @@ That writes `compositions/hw-frame.html`, plus 1 supporting file under `assets/f
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -368,6 +374,4 @@ Tagged `handwritten` `frame` `media`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
index 50aa8d40dd..9910451a1b 100644
--- a/docs/catalog/blocks/hw-path-text.mdx
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text Along a Path</h1>
+  <p>Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/hw-path-text.json"
   compositionId="hw-path-text"
   compositionSrc="compositions/hw-path-text.html"
   title="Text Along a Path"
-  description="Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Typography & Text","badge":"Stable","codeLines":194}}
   attribution={{"path":"registry/blocks/hw-path-text","tags":["handwritten","typography","path","overlay"]}}
@@ -229,7 +233,9 @@ That writes `compositions/hw-path-text.html`, plus 1 supporting file under `asse
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -260,6 +266,4 @@ Tagged `handwritten` `typography` `path` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
index d5c86da13f..1e5d216f7e 100644
--- a/docs/catalog/blocks/hw-pipeline.mdx
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Hand-Drawn Flowchart</h1>
+  <p>Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/hw-pipeline.json"
   compositionId="hw-pipeline"
   compositionSrc="compositions/hw-pipeline.html"
   title="Hand-Drawn Flowchart"
-  description="Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
   variables={[]}
   meta={{"duration":7,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":317}}
   attribution={{"path":"registry/blocks/hw-pipeline","tags":["handwritten","diagram","data-viz","overlay"]}}
@@ -352,7 +356,9 @@ That writes `compositions/hw-pipeline.html`, plus 1 supporting file under `asset
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -383,6 +389,4 @@ Tagged `handwritten` `diagram` `data-viz` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
index 6c1659d4ed..539bee1f08 100644
--- a/docs/catalog/blocks/hw-scribble-transition.mdx
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Scribble Transition</h1>
+  <p>Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/hw-scribble-transition.json"
   compositionId="hw-scribble-transition"
   compositionSrc="compositions/hw-scribble-transition.html"
   title="Scribble Transition"
-  description="Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears"
   variables={[]}
   meta={{"duration":2.2,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":152}}
   attribution={{"path":"registry/blocks/hw-scribble-transition","tags":["handwritten","transition","wipe"]}}
@@ -187,7 +191,9 @@ That writes one file: `compositions/hw-scribble-transition.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -218,6 +224,4 @@ Tagged `handwritten` `transition` `wipe`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
index 36b51d3e78..3e993b4fb5 100644
--- a/docs/catalog/blocks/hw-text-cloud.mdx
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Speech Bubble</h1>
+  <p>Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/hw-text-cloud.json"
   compositionId="hw-text-cloud"
   compositionSrc="compositions/hw-text-cloud.html"
   title="Speech Bubble"
-  description="Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils"
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":286}}
   attribution={{"path":"registry/blocks/hw-text-cloud","tags":["handwritten","speech-bubble","overlay"]}}
@@ -321,7 +325,9 @@ That writes `compositions/hw-text-cloud.html`, plus 1 supporting file under `ass
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -352,6 +358,4 @@ Tagged `handwritten` `speech-bubble` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
index 0bd29528ab..890619f0ad 100644
--- a/docs/catalog/blocks/hw-title.mdx
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Handwritten Title</h1>
+  <p>Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/hw-title.json"
   compositionId="hw-title"
   compositionSrc="compositions/hw-title.html"
   title="Handwritten Title"
-  description="Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Typography & Text","badge":"Stable","codeLines":257}}
   attribution={{"path":"registry/blocks/hw-title","tags":["handwritten","typography","title-card","overlay"]}}
@@ -292,7 +296,9 @@ That writes `compositions/hw-title.html`, plus 1 supporting file under `assets/f
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -323,6 +329,4 @@ Tagged `handwritten` `typography` `title-card` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/hw-write-title.mdx b/docs/catalog/blocks/hw-write-title.mdx
index 84a62429c5..8414caa9cb 100644
--- a/docs/catalog/blocks/hw-write-title.mdx
+++ b/docs/catalog/blocks/hw-write-title.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Handwritten Write-On Title</h1>
+  <p>True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/hw-write-title.json"
   compositionId="hw-write-title"
   compositionSrc="compositions/hw-write-title.html"
   title="Handwritten Write-On Title"
-  description="True glyph write-on: filled Caveat letterforms revealed by baked per-glyph centerline strokes traced in real stroke order with a curvature-adaptive pen-velocity ease (fast on straights, slow into curves, inter-stroke pen lifts); optional squiggle underline; boils"
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Typography & Text","badge":"Stable","codeLines":500}}
   attribution={{"path":"registry/blocks/hw-write-title","tags":["handwritten","typography","title-card","write-on","overlay"]}}
@@ -535,7 +539,9 @@ That writes `compositions/hw-write-title.html`, plus 2 supporting files under `a
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -566,6 +572,4 @@ Tagged `handwritten` `typography` `title-card` `write-on` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index 555aef1a5d..1f73e20a81 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Instagram Follow</h1>
+  <p>Animated Instagram follow overlay with profile card and follow button</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/instagram-follow.json"
   compositionId="instagram-follow"
   compositionSrc="compositions/instagram-follow.html"
   title="Instagram Follow"
-  description="Animated Instagram follow overlay with profile card and follow button"
   variables={[]}
   meta={{"duration":4.5,"width":1080,"height":1920,"category":"Social Overlays","badge":"Stable","codeLines":288}}
   attribution={{"path":"registry/blocks/instagram-follow","tags":["social","overlay","instagram"]}}
@@ -323,7 +327,9 @@ That writes `compositions/instagram-follow.html`, plus 1 supporting file under `
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -354,6 +360,4 @@ Tagged `social` `overlay` `instagram`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index c6c4bf17c8..c7f34f439c 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>iOS 26 Liquid Glass Home Screen</h1>
+  <p>3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.</p>
+</div>
+
 <CatalogDetail
   compositionId="ios26-liquid-glass"
   compositionSrc="compositions/ios26-liquid-glass.html"
   title="iOS 26 Liquid Glass Home Screen"
-  description="3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
   variables={[]}
   meta={{"duration":15,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":1342}}
   attribution={{"path":"registry/blocks/ios26-liquid-glass","tags":["liquid-glass-html-in-canvas","webgpu","3d","iphone","ios26","notifications","gltf","html-in-canvas"]}}
@@ -1378,7 +1382,9 @@ That writes `compositions/ios26-liquid-glass.html`, plus 28 supporting files und
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -1415,6 +1421,4 @@ Tagged `liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notificatio
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lens-flare.mdx b/docs/catalog/blocks/lens-flare.mdx
index 66536b5c9c..6a94f29461 100644
--- a/docs/catalog/blocks/lens-flare.mdx
+++ b/docs/catalog/blocks/lens-flare.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lens Flare</h1>
+  <p>A camera lens flare: a bright star burst and a faint rainbow halo that slowly shimmer on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lens-flare.json"
   compositionId="lens-flare"
   compositionSrc="compositions/lens-flare.html"
   title="Lens Flare"
-  description="A camera lens flare: a bright star burst and a faint rainbow halo that slowly shimmer on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/lens-flare","tags":["webgpu","webgpu-shader","background","light","flare","glow"]}}
@@ -68,7 +72,9 @@ That writes `compositions/lens-flare.html`, plus 2 supporting files under `compo
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `light` `flare` `glow`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/light-edge.mdx b/docs/catalog/blocks/light-edge.mdx
index 8afb9783be..d55150dff7 100644
--- a/docs/catalog/blocks/light-edge.mdx
+++ b/docs/catalog/blocks/light-edge.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Light Edge</h1>
+  <p>Purple and cyan light races around the edge of an orb on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/light-edge.json"
   compositionId="light-edge"
   compositionSrc="compositions/light-edge.html"
   title="Light Edge"
-  description="Purple and cyan light races around the edge of an orb on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/light-edge","tags":["webgpu","webgpu-shader","object","light","glow","neon","edge"]}}
@@ -68,7 +72,9 @@ That writes `compositions/light-edge.html`, plus 2 supporting files under `compo
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `light` `glow` `neon` `edge`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index 6fc3c0a662..dfa431e78e 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Light Leak</h1>
+  <p>Shader transition with cinematic light leak overlay</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/light-leak.json"
   compositionId="light-leak"
   compositionSrc="compositions/light-leak.html"
   title="Light Leak"
-  description="Shader transition with cinematic light leak overlay"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":365}}
   attribution={{"path":"registry/blocks/light-leak","tags":["transition","shader"]}}
@@ -400,7 +404,9 @@ That writes one file: `compositions/light-leak.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -431,6 +437,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index 7555771caa..8711afa7f4 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Liquid Glass Notification</h1>
+  <p>Frosted glass notification cards floating over an aurora shader background</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/liquid-glass-notification.json"
   compositionId="liquid-glass-notification"
   compositionSrc="compositions/liquid-glass-notification.html"
   title="Liquid Glass Notification"
-  description="Frosted glass notification cards floating over an aurora shader background"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":485}}
   attribution={{"path":"registry/blocks/liquid-glass-notification","tags":["html-in-canvas","liquid-glass-html-in-canvas","webgpu"]}}
@@ -523,7 +527,9 @@ That writes `compositions/liquid-glass-notification.html`, plus 2 supporting fil
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -560,6 +566,4 @@ Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index eafafa8df8..6ccf949fbe 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Liquid Glass Widgets</h1>
+  <p>Frosted glass stat cards, showcase panel and pill chips over an aurora shader background</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/liquid-glass-widgets.json"
   compositionId="liquid-glass-widgets"
   compositionSrc="compositions/liquid-glass-widgets.html"
   title="Liquid Glass Widgets"
-  description="Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":763}}
   attribution={{"path":"registry/blocks/liquid-glass-widgets","tags":["html-in-canvas","liquid-glass-html-in-canvas","webgpu"]}}
@@ -801,7 +805,9 @@ That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files un
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -838,6 +844,4 @@ Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/liquid-metal.mdx b/docs/catalog/blocks/liquid-metal.mdx
index 6dbb2b52b5..f4ca8ab973 100644
--- a/docs/catalog/blocks/liquid-metal.mdx
+++ b/docs/catalog/blocks/liquid-metal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Liquid Metal</h1>
+  <p>A chrome sphere ripples and flows like molten metal on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/liquid-metal.json"
   compositionId="liquid-metal"
   compositionSrc="compositions/liquid-metal.html"
   title="Liquid Metal"
-  description="A chrome sphere ripples and flows like molten metal on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/liquid-metal","tags":["webgpu","webgpu-shader","object","metal","chrome","liquid","sphere"]}}
@@ -68,7 +72,9 @@ That writes `compositions/liquid-metal.html`, plus 2 supporting files under `com
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `metal` `chrome` `liquid` `sphere`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index c618c161ee..40753fc268 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Logo Outro</h1>
+  <p>Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/logo-outro.json"
   compositionId="logo-outro"
   compositionSrc="compositions/logo-outro.html"
   title="Logo Outro"
-  description="Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":226}}
   attribution={{"path":"registry/blocks/logo-outro","tags":["branding","outro","logo"]}}
@@ -261,7 +265,9 @@ That writes one file: `compositions/logo-outro.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -299,6 +305,4 @@ Tagged `branding` `outro` `logo`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lottie-character-walk.mdx b/docs/catalog/blocks/lottie-character-walk.mdx
index 9fcfa0af1d..ce8e20ae7d 100644
--- a/docs/catalog/blocks/lottie-character-walk.mdx
+++ b/docs/catalog/blocks/lottie-character-walk.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lottie Character Walk</h1>
+  <p>A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lottie-character-walk.json"
   compositionId="lottie-character-walk"
   compositionSrc="compositions/lottie-character-walk/lottie-character-walk.html"
   title="Lottie Character Walk"
-  description="A jointed flat character walks in on planted feet, stops and points at a card; the body acting is a Lottie file and the stage is GSAP."
   variables={[{"id":"title","type":"string","label":"Card title","default":"Meet your guide","maxLength":28},{"id":"body","type":"string","label":"Card text","default":"Walks in on planted feet, then points the way.","maxLength":90}]}
   meta={{"duration":7.5,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":142}}
   attribution={{"path":"registry/blocks/lottie-character-walk","tags":["character","character-animation","mascot","walk-cycle","gesture","pointing","puppet","lottie","explainer"]}}
@@ -177,7 +181,9 @@ That writes `compositions/lottie-character-walk/lottie-character-walk.html`, plu
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -229,6 +235,4 @@ Tagged `character` `character-animation` `mascot` `walk-cycle` `gesture` `pointi
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
index 76fb419398..aac599f1c9 100644
--- a/docs/catalog/blocks/lower-third-bild.mdx
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — BILD Style</h1>
+  <p>News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lower-third-bild.json"
   compositionId="lower-third-bild"
   compositionSrc="compositions/lower-third-bild.html"
   title="Lower Third — BILD Style"
-  description="News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
   variables={[{"id":"TXT_MAIN_1_Line","type":"string","default":"BILD EXKLUSIV"},{"id":"TXT_SUB","type":"string","default":"Sonderbericht"}]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":151}}
   attribution={{"path":"registry/blocks/lower-third-bild","tags":["broadcast","lower-third","news","overlay"]}}
@@ -186,7 +190,9 @@ That writes `compositions/lower-third-bild.html`, plus 2 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -238,6 +244,4 @@ Tagged `broadcast` `lower-third` `news` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-accent-underline.mdx b/docs/catalog/blocks/lt-accent-underline.mdx
index 9de431ba53..a8b3c357a0 100644
--- a/docs/catalog/blocks/lt-accent-underline.mdx
+++ b/docs/catalog/blocks/lt-accent-underline.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Accent Underline</h1>
+  <p>Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-accent-underline.json"
   compositionId="lt-accent-underline"
   compositionSrc="compositions/lt-accent-underline.html"
   title="Lower Third — Accent Underline"
-  description="Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":106}}
   attribution={{"path":"registry/blocks/lt-accent-underline","tags":["lower-third","overlay","podcast","interview","minimal"]}}
@@ -141,7 +145,9 @@ That writes one file: `compositions/lt-accent-underline.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -172,6 +178,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-bold-block.mdx b/docs/catalog/blocks/lt-bold-block.mdx
index 4d40b76e09..9759affa4e 100644
--- a/docs/catalog/blocks/lt-bold-block.mdx
+++ b/docs/catalog/blocks/lt-bold-block.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Bold Block</h1>
+  <p>High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-bold-block.json"
   compositionId="lt-bold-block"
   compositionSrc="compositions/lt-bold-block.html"
   title="Lower Third — Bold Block"
-  description="High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":108}}
   attribution={{"path":"registry/blocks/lt-bold-block","tags":["lower-third","overlay","podcast","interview","bold"]}}
@@ -143,7 +147,9 @@ That writes one file: `compositions/lt-bold-block.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -174,6 +180,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-clean-bar.mdx b/docs/catalog/blocks/lt-clean-bar.mdx
index 195607529a..c35e6a8900 100644
--- a/docs/catalog/blocks/lt-clean-bar.mdx
+++ b/docs/catalog/blocks/lt-clean-bar.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Clean Bar</h1>
+  <p>Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-clean-bar.json"
   compositionId="lt-clean-bar"
   compositionSrc="compositions/lt-clean-bar.html"
   title="Lower Third — Clean Bar"
-  description="Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":111}}
   attribution={{"path":"registry/blocks/lt-clean-bar","tags":["lower-third","overlay","podcast","interview"]}}
@@ -146,7 +150,9 @@ That writes one file: `compositions/lt-clean-bar.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -177,6 +183,4 @@ Tagged `lower-third` `overlay` `podcast` `interview`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-color-block.mdx b/docs/catalog/blocks/lt-color-block.mdx
index 5fccfae884..606306e901 100644
--- a/docs/catalog/blocks/lt-color-block.mdx
+++ b/docs/catalog/blocks/lt-color-block.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Color Block</h1>
+  <p>High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-color-block.json"
   compositionId="lt-color-block"
   compositionSrc="compositions/lt-color-block.html"
   title="Lower Third — Color Block"
-  description="High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":100}}
   attribution={{"path":"registry/blocks/lt-color-block","tags":["lower-third","overlay","podcast","interview","bold"]}}
@@ -135,7 +139,9 @@ That writes one file: `compositions/lt-color-block.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -166,6 +172,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-dark-card.mdx b/docs/catalog/blocks/lt-dark-card.mdx
index 13f5c709ec..9ee6202640 100644
--- a/docs/catalog/blocks/lt-dark-card.mdx
+++ b/docs/catalog/blocks/lt-dark-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Dark Card</h1>
+  <p>Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-dark-card.json"
   compositionId="lt-dark-card"
   compositionSrc="compositions/lt-dark-card.html"
   title="Lower Third — Dark Card"
-  description="Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":110}}
   attribution={{"path":"registry/blocks/lt-dark-card","tags":["lower-third","overlay","podcast","interview","dark"]}}
@@ -145,7 +149,9 @@ That writes one file: `compositions/lt-dark-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -176,6 +182,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `dark`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-kicker-name.mdx b/docs/catalog/blocks/lt-kicker-name.mdx
index e80ecdc987..b44affb012 100644
--- a/docs/catalog/blocks/lt-kicker-name.mdx
+++ b/docs/catalog/blocks/lt-kicker-name.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Kicker Name</h1>
+  <p>Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-kicker-name.json"
   compositionId="lt-kicker-name"
   compositionSrc="compositions/lt-kicker-name.html"
   title="Lower Third — Kicker Name"
-  description="Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":113}}
   attribution={{"path":"registry/blocks/lt-kicker-name","tags":["lower-third","overlay","podcast","interview","bold"]}}
@@ -148,7 +152,9 @@ That writes one file: `compositions/lt-kicker-name.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -179,6 +185,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-mask-reveal.mdx b/docs/catalog/blocks/lt-mask-reveal.mdx
index 8b471660b2..d76732bebd 100644
--- a/docs/catalog/blocks/lt-mask-reveal.mdx
+++ b/docs/catalog/blocks/lt-mask-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Mask Reveal</h1>
+  <p>Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-mask-reveal.json"
   compositionId="lt-mask-reveal"
   compositionSrc="compositions/lt-mask-reveal.html"
   title="Lower Third — Mask Reveal"
-  description="Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":119}}
   attribution={{"path":"registry/blocks/lt-mask-reveal","tags":["lower-third","overlay","podcast","interview","bold"]}}
@@ -154,7 +158,9 @@ That writes one file: `compositions/lt-mask-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -185,6 +191,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-neon-border.mdx b/docs/catalog/blocks/lt-neon-border.mdx
index b979762c51..ea949db5ef 100644
--- a/docs/catalog/blocks/lt-neon-border.mdx
+++ b/docs/catalog/blocks/lt-neon-border.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Neon Border</h1>
+  <p>Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-neon-border.json"
   compositionId="lt-neon-border"
   compositionSrc="compositions/lt-neon-border.html"
   title="Neon Border"
-  description="Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role."
   variables={[{"id":"name","type":"string","label":"Name","default":"Dr. Maya Chen"},{"id":"role","type":"string","label":"Role","default":"Host · Neuroscientist"},{"id":"accent","type":"color","label":"Accent","default":"#cc9149"},{"id":"movement","type":"enum","label":"Movement","default":"step","options":[{"value":"step","label":"Step (snap at corners)"},{"value":"glide","label":"Glide (smooth)"}]},{"id":"speed","type":"number","label":"Speed","default":1.6,"min":0.2,"max":6,"step":0.1,"unit":"corners/s"},{"id":"cornerRadius","type":"number","label":"Corner radius","default":26,"min":0,"max":90,"step":1,"unit":"px"},{"id":"thickness","type":"number","label":"Thickness","default":5,"min":1,"max":16,"step":1,"unit":"px"},{"id":"arcLength","type":"number","label":"Arc length","default":22,"min":5,"max":100,"step":1,"unit":"%"},{"id":"glow","type":"number","label":"Glow","default":1,"min":0,"max":2,"step":0.05,"unit":"x"}]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Motion Primitives","badge":"Experimental","codeLines":390}}
   attribution={{"path":"registry/blocks/lt-neon-border","tags":["lower-third","glow","loop","video-primitive"]}}
@@ -425,7 +429,9 @@ That writes one file: `compositions/lt-neon-border.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -498,6 +504,4 @@ Tagged `lower-third` `glow` `loop` `video-primitive`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-side-rule.mdx b/docs/catalog/blocks/lt-side-rule.mdx
index bd6373d7e8..6b7fc47baa 100644
--- a/docs/catalog/blocks/lt-side-rule.mdx
+++ b/docs/catalog/blocks/lt-side-rule.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Side Rule</h1>
+  <p>Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-side-rule.json"
   compositionId="lt-side-rule"
   compositionSrc="compositions/lt-side-rule.html"
   title="Lower Third — Side Rule"
-  description="Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":113}}
   attribution={{"path":"registry/blocks/lt-side-rule","tags":["lower-third","overlay","podcast","interview","minimal"]}}
@@ -148,7 +152,9 @@ That writes one file: `compositions/lt-side-rule.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -179,6 +185,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-soft-pill.mdx b/docs/catalog/blocks/lt-soft-pill.mdx
index dac57b8e6b..fbfd9977e5 100644
--- a/docs/catalog/blocks/lt-soft-pill.mdx
+++ b/docs/catalog/blocks/lt-soft-pill.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Soft Pill</h1>
+  <p>Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-soft-pill.json"
   compositionId="lt-soft-pill"
   compositionSrc="compositions/lt-soft-pill.html"
   title="Lower Third — Soft Pill"
-  description="Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":118}}
   attribution={{"path":"registry/blocks/lt-soft-pill","tags":["lower-third","overlay","podcast","interview","minimal"]}}
@@ -153,7 +157,9 @@ That writes one file: `compositions/lt-soft-pill.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -184,6 +190,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/lt-stack-bars.mdx b/docs/catalog/blocks/lt-stack-bars.mdx
index d8825d7cde..156ac8c476 100644
--- a/docs/catalog/blocks/lt-stack-bars.mdx
+++ b/docs/catalog/blocks/lt-stack-bars.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Lower Third — Stack Bars</h1>
+  <p>Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/lt-stack-bars.json"
   compositionId="lt-stack-bars"
   compositionSrc="compositions/lt-stack-bars.html"
   title="Lower Third — Stack Bars"
-  description="Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
   variables={[]}
   meta={{"duration":4.8,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":108}}
   attribution={{"path":"registry/blocks/lt-stack-bars","tags":["lower-third","overlay","podcast","interview","bold"]}}
@@ -143,7 +147,9 @@ That writes one file: `compositions/lt-stack-bars.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -174,6 +180,4 @@ Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index b177f78994..4ae731ff05 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>macOS Notification</h1>
+  <p>Animated macOS-style notification banner with app icon and message</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/macos-notification.json"
   compositionId="macos-notification"
   compositionSrc="compositions/macos-notification.html"
   title="macOS Notification"
-  description="Animated macOS-style notification banner with app icon and message"
   variables={[]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Social Overlays","badge":"Stable","codeLines":201}}
   attribution={{"path":"registry/blocks/macos-notification","tags":["social","overlay","notification"]}}
@@ -236,7 +240,9 @@ That writes one file: `compositions/macos-notification.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -267,6 +273,4 @@ Tagged `social` `overlay` `notification`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index 08a5d4c926..10b2537ac8 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>macOS Tahoe Liquid Glass Desktop</h1>
+  <p>3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.</p>
+</div>
+
 <CatalogDetail
   compositionId="macos-tahoe-liquid-glass"
   compositionSrc="compositions/macos-tahoe-liquid-glass.html"
   title="macOS Tahoe Liquid Glass Desktop"
-  description="3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
   variables={[]}
   meta={{"duration":15,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":1461}}
   attribution={{"path":"registry/blocks/macos-tahoe-liquid-glass","tags":["html-in-canvas","3d","macos","tahoe","gltf"]}}
@@ -1497,7 +1501,9 @@ That writes `compositions/macos-tahoe-liquid-glass.html`, plus 18 supporting fil
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -1534,6 +1540,4 @@ Tagged `html-in-canvas` `3d` `macos` `tahoe` `gltf`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/marble.mdx b/docs/catalog/blocks/marble.mdx
index 660d40793d..c771d3869e 100644
--- a/docs/catalog/blocks/marble.mdx
+++ b/docs/catalog/blocks/marble.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Marble</h1>
+  <p>Ink-dark veins wind through white in a marbled pattern that slowly shifts. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/marble.json"
   compositionId="marble"
   compositionSrc="compositions/marble.html"
   title="Marble"
-  description="Ink-dark veins wind through white in a marbled pattern that slowly shifts. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Texture","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/marble","tags":["webgpu","webgpu-shader","background","marble","texture"]}}
@@ -68,7 +72,9 @@ That writes `compositions/marble.html`, plus 2 supporting files under `compositi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `marble` `texture`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/mesh-gradient.mdx b/docs/catalog/blocks/mesh-gradient.mdx
index f2f4549407..074bf93c5b 100644
--- a/docs/catalog/blocks/mesh-gradient.mdx
+++ b/docs/catalog/blocks/mesh-gradient.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Mesh Gradient</h1>
+  <p>Soft coral, orange and violet fields blend and drift in a mesh gradient. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/mesh-gradient.json"
   compositionId="mesh-gradient"
   compositionSrc="compositions/mesh-gradient.html"
   title="Mesh Gradient"
-  description="Soft coral, orange and violet fields blend and drift in a mesh gradient. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/mesh-gradient","tags":["webgpu","webgpu-shader","background","gradient","color"]}}
@@ -68,7 +72,9 @@ That writes `compositions/mesh-gradient.html`, plus 2 supporting files under `co
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `gradient` `color`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/message-thread-reveal.mdx b/docs/catalog/blocks/message-thread-reveal.mdx
index 8879350735..442d3d9748 100644
--- a/docs/catalog/blocks/message-thread-reveal.mdx
+++ b/docs/catalog/blocks/message-thread-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Message Thread Reveal</h1>
+  <p>A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/message-thread-reveal.json"
   compositionId="message-thread-reveal"
   compositionSrc="compositions/message-thread-reveal.html"
   title="Message Thread Reveal"
-  description="A full text conversation plays out on a phone - bubbles popping in, typing indicators, a shared link card, emoji, delivered receipts - with the whole thread scrolling up beat by beat until a closing card lands. The complete chat ad-template, measured message by message"
   variables={[{"id":"contactName","type":"string","role":"content","label":"Contact name","description":"Name pill in the chat header; the avatar shows its first letter.","default":"Rachel"},{"id":"questionMessage","type":"string","role":"content","label":"Opening question","description":"First incoming message that establishes what the conversation is about.","default":"what r u using for the launch video??"},{"id":"teaserMessage","type":"string","role":"content","label":"Teaser reply","description":"First typed outgoing reply before the shared link card.","default":"wait look 👀"},{"id":"cardImage","type":"image","role":"content","label":"Link card image","description":"Preview image on the shared link card.","default":"assets/card-image.jpg"},{"id":"cardTitle","type":"string","role":"content","label":"Link card title","description":"Title of the shared link card. It leads with the real name of the brand this video promotes.","portrays":["subject_name"],"default":"HyperFrames | Write HTML, render pixel-perfect video"},{"id":"cardDomain","type":"string","role":"content","label":"Link card domain","description":"Domain of the brand this video promotes, under the card title. Use the real domain.","portrays":["subject_domain"],"default":"hyperframes.heygen.com"},{"id":"reactionMessage","type":"string","role":"content","label":"Link reaction","description":"Incoming reaction immediately after the shared link.","default":"OMG IT'S HTML"},{"id":"reactionEmoji","type":"string","role":"content","label":"Reaction emoji","description":"Emoji-only reaction after the shared link.","default":"🤯🤯🤯"},{"id":"benefitMessage","type":"string","role":"content","label":"Benefit reply","description":"Typed outgoing reply that names the primary benefit.","default":"renders in 4K. no editor"},{"id":"discoveryMessage","type":"string","role":"content","label":"Discovery question","description":"Incoming question asking where the product was found.","default":"where did u find this"},{"id":"sourceMessage","type":"string","role":"content","label":"Source reply","description":"Typed outgoing reply naming where to find the brand this video promotes.","default":"on heygen"},{"id":"workflowMessage","type":"string","role":"content","label":"Workflow reply","description":"Typed outgoing reply describing how the product works.","default":"u just write plain html tags"},{"id":"ownershipMessage","type":"string","role":"content","label":"Ownership reply","description":"Typed outgoing reply that closes the product explanation.","default":"the code is yours forever"},{"id":"installMessage","type":"string","role":"content","label":"Intent reply","description":"Incoming message expressing intent to try the product.","default":"installing rn"},{"id":"thanksMessage","type":"string","role":"content","label":"Closing reply","description":"Final incoming message in the conversation.","default":"ty bestie 💚"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent horizontal wordmark of the brand this video promotes, on the closing card.","portrays":["subject_logo"],"default":"assets/hyperframes-logo-black.svg"},{"id":"ecProof","type":"string","role":"content","label":"End-card proof","description":"Social-proof line under the stars. Claim only a figure the brand itself publishes; use neutral copy when there is none.","portrays":["authority_badge"],"default":"12,000+ creators"},{"id":"ecFeature1","type":"string","role":"content","label":"End-card feature 1","description":"First two-line benefit; use | to break the line.","default":"Write|plain HTML"},{"id":"ecFeature2","type":"string","role":"content","label":"End-card feature 2","description":"Second two-line benefit; use | to break the line.","default":"Render|pixel-perfect"},{"id":"ecFeature3","type":"string","role":"content","label":"End-card feature 3","description":"Third two-line benefit; use | to break the line.","default":"Own|every line"},{"id":"ecCta","type":"string","role":"content","label":"End-card CTA","description":"Label on the closing card button.","default":"Start rendering free"}]}
   meta={{"duration":25.7667,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":1623}}
   attribution={{"author":"Miao Yang","path":"registry/blocks/message-thread-reveal","tags":["showcase","mock-ui","chat","vertical","ad-template"]}}
@@ -1658,7 +1662,9 @@ That writes `compositions/message-thread-reveal.html`, plus 3 supporting files u
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1731,6 +1737,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
index 7da511a215..4a2f08833c 100644
--- a/docs/catalog/blocks/mk-background.mdx
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Minimal Gradient Background</h1>
+  <p>Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/mk-background.json"
   compositionId="mk-background"
   compositionSrc="compositions/mk-background.html"
   title="Minimal Gradient Background"
-  description="Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode"
   variables={[]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":235}}
   attribution={{"path":"registry/blocks/mk-background","tags":["background","gradient","minimal","professional","presentation"]}}
@@ -270,7 +274,9 @@ That writes one file: `compositions/mk-background.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -301,6 +307,4 @@ Tagged `background` `gradient` `minimal` `professional` `presentation`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
index 4684f0ed88..da43f200f1 100644
--- a/docs/catalog/blocks/mk-callout-highlight.mdx
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Word-Sweep Highlight</h1>
+  <p>A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/mk-callout-highlight.json"
   compositionId="mk-callout-highlight"
   compositionSrc="compositions/mk-callout-highlight.html"
   title="Word-Sweep Highlight"
-  description="A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Captions","badge":"Stable","codeLines":156}}
   attribution={{"path":"registry/blocks/mk-callout-highlight","tags":["typography","karaoke","captions","minimal"]}}
@@ -191,7 +195,9 @@ That writes one file: `compositions/mk-callout-highlight.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -222,6 +228,4 @@ Tagged `typography` `karaoke` `captions` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
index 393904eb86..a8067f5209 100644
--- a/docs/catalog/blocks/mk-clone-wall-transition.mdx
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text Clone Wall Transition</h1>
+  <p>Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/mk-clone-wall-transition.json"
   compositionId="mk-clone-wall-transition"
   compositionSrc="compositions/mk-clone-wall-transition.html"
   title="Text Clone Wall Transition"
-  description="Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
   variables={[]}
   meta={{"duration":2.4,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":225}}
   attribution={{"path":"registry/blocks/mk-clone-wall-transition","tags":["transition","typography","wipe"]}}
@@ -260,7 +264,9 @@ That writes one file: `compositions/mk-clone-wall-transition.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -291,6 +297,4 @@ Tagged `transition` `typography` `wipe`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
index 992ebf5f52..7b0edafa00 100644
--- a/docs/catalog/blocks/mk-line-graph.mdx
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Minimal Line Graph</h1>
+  <p>One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/mk-line-graph.json"
   compositionId="mk-line-graph"
   compositionSrc="compositions/mk-line-graph.html"
   title="Minimal Line Graph"
-  description="One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend"
   variables={[]}
   meta={{"duration":7,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":292}}
   attribution={{"path":"registry/blocks/mk-line-graph","tags":["data-viz","chart","graph","minimal"]}}
@@ -327,7 +331,9 @@ That writes one file: `compositions/mk-line-graph.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -358,6 +364,4 @@ Tagged `data-viz` `chart` `graph` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
index 493a881d9c..122823d2c0 100644
--- a/docs/catalog/blocks/mk-placeholder-grid.mdx
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Rounded Media Grid</h1>
+  <p>N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/mk-placeholder-grid.json"
   compositionId="mk-placeholder-grid"
   compositionSrc="compositions/mk-placeholder-grid.html"
   title="Rounded Media Grid"
-  description="N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":233}}
   attribution={{"path":"registry/blocks/mk-placeholder-grid","tags":["placeholder","media","grid","minimal"]}}
@@ -268,7 +272,9 @@ That writes one file: `compositions/mk-placeholder-grid.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -299,6 +305,4 @@ Tagged `placeholder` `media` `grid` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
index c6ebb9ec98..b0ff8e6b2f 100644
--- a/docs/catalog/blocks/mk-progress-stat.mdx
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Count-Up Stat Card</h1>
+  <p>Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/mk-progress-stat.json"
   compositionId="mk-progress-stat"
   compositionSrc="compositions/mk-progress-stat.html"
   title="Count-Up Stat Card"
-  description="Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
   variables={[]}
   meta={{"duration":7,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":185}}
   attribution={{"path":"registry/blocks/mk-progress-stat","tags":["data-viz","stat","minimal"]}}
@@ -220,7 +224,9 @@ That writes one file: `compositions/mk-progress-stat.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -251,6 +257,4 @@ Tagged `data-viz` `stat` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
index 324d9b7579..3725f3a815 100644
--- a/docs/catalog/blocks/mk-specs-list.mdx
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Specs Checklist</h1>
+  <p>Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/mk-specs-list.json"
   compositionId="mk-specs-list"
   compositionSrc="compositions/mk-specs-list.html"
   title="Specs Checklist"
-  description="Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":222}}
   attribution={{"path":"registry/blocks/mk-specs-list","tags":["data-viz","list","minimal","professional"]}}
@@ -257,7 +261,9 @@ That writes one file: `compositions/mk-specs-list.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -288,6 +294,4 @@ Tagged `data-viz` `list` `minimal` `professional`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/nebula.mdx b/docs/catalog/blocks/nebula.mdx
index 241af46271..29b7a42aff 100644
--- a/docs/catalog/blocks/nebula.mdx
+++ b/docs/catalog/blocks/nebula.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Nebula</h1>
+  <p>A small world of pink and blue gas swirls inside a sphere on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/nebula.json"
   compositionId="nebula"
   compositionSrc="compositions/nebula.html"
   title="Nebula"
-  description="A small world of pink and blue gas swirls inside a sphere on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/nebula","tags":["webgpu","webgpu-shader","object","space","nebula","sphere"]}}
@@ -68,7 +72,9 @@ That writes `compositions/nebula.html`, plus 2 supporting files under `compositi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `space` `nebula` `sphere`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/news-ticker.mdx b/docs/catalog/blocks/news-ticker.mdx
index 648bf5df21..329c14d5cd 100644
--- a/docs/catalog/blocks/news-ticker.mdx
+++ b/docs/catalog/blocks/news-ticker.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>News Ticker</h1>
+  <p>Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/news-ticker.json"
   compositionId="news-ticker"
   compositionSrc="compositions/news-ticker.html"
   title="News Ticker"
-  description="Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
   variables={[]}
   meta={{"duration":7,"width":1920,"height":1080,"category":"Lower Thirds","badge":"Stable","codeLines":408}}
   attribution={{"path":"registry/blocks/news-ticker","tags":["lower-third","overlay","news","ticker"]}}
@@ -443,7 +447,9 @@ That writes one file: `compositions/news-ticker.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -474,6 +480,4 @@ Tagged `lower-third` `overlay` `news` `ticker`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/north-korea-locked-down.mdx b/docs/catalog/blocks/north-korea-locked-down.mdx
index 91d2f84d9b..80aec0f3a4 100644
--- a/docs/catalog/blocks/north-korea-locked-down.mdx
+++ b/docs/catalog/blocks/north-korea-locked-down.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>North Korea Locked Down</h1>
+  <p>Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/north-korea-locked-down.json"
   compositionId="north-korea-locked-down"
   compositionSrc="compositions/north-korea-locked-down.html"
   title="North Korea Locked Down"
-  description="Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
   variables={[]}
   meta={{"duration":7,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":305}}
   attribution={{"author":"Stronkter","authorUrl":"https://x.com/Stronkter","path":"registry/blocks/north-korea-locked-down","tags":["showcase","map","annotation","youtube","kinetic"]}}
@@ -340,7 +344,9 @@ That writes `compositions/north-korea-locked-down.html`, plus 1 supporting file
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -381,6 +387,4 @@ use 📷HyperFrames by HeyGen and Image Gen  if you need it for assets or like p
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/notes-reveal.mdx b/docs/catalog/blocks/notes-reveal.mdx
index 74d2ba3658..07fd55f3f1 100644
--- a/docs/catalog/blocks/notes-reveal.mdx
+++ b/docs/catalog/blocks/notes-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Notes Reveal</h1>
+  <p>A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/notes-reveal.json"
   compositionId="notes-reveal"
   compositionSrc="compositions/notes-reveal.html"
   title="Notes Reveal"
-  description="A personal note is typed character by character in a notes app - caret riding every letter, the page scrolling up on measured settle curves as each line lands - then cuts to a hand-lettered paper card with a marker headline and a ticked checklist"
   variables={[{"id":"titleL1","type":"string","role":"content","label":"Note title line 1","description":"First line of the note title.","default":"Things nobody told me"},{"id":"titleL2","type":"string","role":"content","label":"Note title line 2","description":"Second line of the note title.","default":"about video."},{"id":"noteLine1","type":"string","role":"content","label":"Note body line 1","description":"First typed line of the note. The seven body lines are the bulk of the video: they must be about the brand this video promotes, not about video-making.","default":"my videos sucked"},{"id":"noteLine2","type":"string","role":"content","label":"Note body line 2","description":"Second typed line of the note.","default":"my tools cost $$$"},{"id":"noteLine3","type":"string","role":"content","label":"Note body line 3","description":"Third typed line of the note.","default":"and re-edits never end."},{"id":"noteLine4","type":"string","role":"content","label":"Note body line 4","description":"Fourth typed line of the note — the turn, where the brand enters.","default":"then i tried writing html only"},{"id":"noteLine5","type":"string","role":"content","label":"Note body line 5","description":"Fifth typed line of the note — name the brand here.","default":"started HyperFrames three weeks ago"},{"id":"noteLine6","type":"string","role":"content","label":"Note body line 6","description":"Sixth typed line of the note.","default":"the grind is gone, but more than that —"},{"id":"noteLine7","type":"string","role":"content","label":"Note body line 7","description":"Last typed line of the note — the payoff.","default":"I ship videos weekly."},{"id":"cardTop","type":"string","role":"content","label":"Card headline top","description":"First marker line on the closing card. The underline follows its last word.","default":"THE POWER"},{"id":"cardMid","type":"string","role":"content","label":"Card headline middle","description":"Short connector line between the two headline lines, centred on the card.","default":"OF"},{"id":"cardBottom","type":"string","role":"content","label":"Card headline bottom","description":"Last marker line on the closing card. Its first word is ringed.","default":"ONE FILE"},{"id":"check1Label","type":"string","role":"content","label":"Checklist 1 label","description":"Typewriter label of the first checklist row.","default":"WRITE"},{"id":"check1Value","type":"string","role":"content","label":"Checklist 1 value","description":"Marker value of the first checklist row.","default":"HTML"},{"id":"check2Label","type":"string","role":"content","label":"Checklist 2 label","description":"Typewriter label of the second checklist row.","default":"RENDER"},{"id":"check2Value","type":"string","role":"content","label":"Checklist 2 value","description":"Marker value of the second checklist row.","default":"IN 4K"},{"id":"check3Label","type":"string","role":"content","label":"Checklist 3 label","description":"Typewriter label of the third checklist row.","default":"SHIP"},{"id":"check3Value","type":"string","role":"content","label":"Checklist 3 value","description":"Marker value of the third checklist row.","default":"TODAY"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent mark of the brand this video promotes, in the sign-off strip under the card.","portrays":["subject_logo"],"default":"assets/hyperframes-logo-black.svg"},{"id":"brandDomain","type":"string","role":"content","label":"Sign-off domain","description":"Domain of the brand this video promotes, closing the sign-off strip. Use the real domain, or a call to action when no domain fits.","portrays":["subject_domain"],"default":"hyperframes.heygen.com"}]}
   meta={{"duration":24.85,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":1661}}
   attribution={{"author":"Miao Yang","path":"registry/blocks/notes-reveal","tags":["showcase","mock-ui","notes","typing","vertical","ad-template"]}}
@@ -1696,7 +1700,9 @@ That writes `compositions/notes-reveal.html`, plus 5 supporting files under `ass
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1768,6 +1774,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/notification-cascade.mdx b/docs/catalog/blocks/notification-cascade.mdx
index 6af4763f17..6ae87119c5 100644
--- a/docs/catalog/blocks/notification-cascade.mdx
+++ b/docs/catalog/blocks/notification-cascade.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Notification Cascade</h1>
+  <p>Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/notification-cascade.json"
   compositionId="notification-cascade"
   compositionSrc="compositions/notification-cascade.html"
   title="Notification Cascade"
-  description="Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card"
   variables={[{"id":"notifTitle","type":"string","role":"content","label":"Notification title","description":"Bold first line on every banner.","default":"New render"},{"id":"message1","type":"string","role":"content","label":"Message 1","description":"Subtitle of the first banner to land.","default":"Launch video is ready."},{"id":"message2","type":"string","role":"content","label":"Message 2","description":"Subtitle of the second banner.","default":"All checks passed."},{"id":"message3","type":"string","role":"content","label":"Message 3","description":"Subtitle of the third banner.","default":"4K render done in 92s."},{"id":"message4","type":"string","role":"content","label":"Message 4","description":"Subtitle of the fourth banner.","default":"Published to the catalog."},{"id":"appName","type":"string","role":"content","label":"App name","description":"Name of the brand this video promotes, credited in the corner of every banner. Use the real name of that brand.","portrays":["subject_name"],"default":"HyperFrames"},{"id":"headlineTop","type":"string","role":"content","label":"End-card line 1","description":"First line of the closing card.","default":"SHIP VIDEO"},{"id":"headlineAccent","type":"string","role":"content","label":"End-card line 2","description":"Accented second line of the closing card.","default":"FROM HTML"},{"id":"footerText","type":"string","role":"content","label":"End-card footer","description":"Domain of the brand this video promotes, under the end-card headline. Use the real domain, or a call to action when no domain fits.","portrays":["subject_domain"],"default":"hyperframes.heygen.com"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent mark of the brand this video promotes, centered on the closing card.","portrays":["subject_logo"],"default":"assets/hyperframes-logo-white.svg"}]}
   meta={{"duration":14,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":520}}
   attribution={{"author":"Miao Yang","path":"registry/blocks/notification-cascade","tags":["showcase","mock-ui","notification","vertical","ad-template"]}}
@@ -555,7 +559,9 @@ That writes `compositions/notification-cascade.html`, plus 3 supporting files un
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -617,6 +623,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/nyc-paris-flight.mdx b/docs/catalog/blocks/nyc-paris-flight.mdx
index 90be719613..c6e6e372bd 100644
--- a/docs/catalog/blocks/nyc-paris-flight.mdx
+++ b/docs/catalog/blocks/nyc-paris-flight.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>NYC Paris Flight</h1>
+  <p>Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/nyc-paris-flight.json"
   compositionId="nyc-paris-flight"
   compositionSrc="compositions/nyc-paris-flight.html"
   title="NYC Paris Flight"
-  description="Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":525}}
   attribution={{"author":"Stronkter","authorUrl":"https://x.com/Stronkter","path":"registry/blocks/nyc-paris-flight","tags":["showcase","travel","map","youtube","sfx"]}}
@@ -560,7 +564,9 @@ That writes `compositions/nyc-paris-flight.html`, plus 2 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -601,6 +607,4 @@ Created by [Stronkter](https://x.com/Stronkter).
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/obsidian.mdx b/docs/catalog/blocks/obsidian.mdx
index 930b02221e..a8a328bb1c 100644
--- a/docs/catalog/blocks/obsidian.mdx
+++ b/docs/catalog/blocks/obsidian.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Obsidian</h1>
+  <p>A dark glass orb catches pink and cyan iridescent light on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/obsidian.json"
   compositionId="obsidian"
   compositionSrc="compositions/obsidian.html"
   title="Obsidian"
-  description="A dark glass orb catches pink and cyan iridescent light on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/obsidian","tags":["webgpu","webgpu-shader","object","glass","iridescent","dark"]}}
@@ -68,7 +72,9 @@ That writes `compositions/obsidian.html`, plus 2 supporting files under `composi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `glass` `iridescent` `dark`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/orbit-card.mdx b/docs/catalog/blocks/orbit-card.mdx
index 607a5116cd..c069111fc6 100644
--- a/docs/catalog/blocks/orbit-card.mdx
+++ b/docs/catalog/blocks/orbit-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Orbit Card</h1>
+  <p>A single feature card orbits a dot sphere on approved Blender camera motion.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/orbit-card.json"
   compositionId="orbit-card"
   compositionSrc="compositions/orbit-card/orbit-card.html"
   title="Orbit Card"
-  description="A single feature card orbits a dot sphere on approved Blender camera motion."
   variables={[{"id":"feature1Title","type":"string","label":"Card title","default":"Always in sync","maxLength":28},{"id":"feature1Desc","type":"string","label":"Card description","default":"Changes reach every screen the moment they happen.","maxLength":110},{"id":"feature1Accent","type":"color","label":"Card accent","default":"#4cc9ff"},{"id":"cardOrbitDegrees","type":"number","label":"Card orbit degrees","description":"Total card-only vertical orbit during Blender frames 150–180 (4.9667–5.9667 seconds). Enter 180, 360, 720, or any angle. The sphere keeps its independent spin. The final angle holds after frame 180.","default":360,"min":-36000,"max":36000,"step":1}]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"3D motion","badge":"Stable","codeLines":109}}
   attribution={{"path":"registry/blocks/orbit-card","tags":["3d-motion","cards","feature-reveal","dots","orbit","blender-motion","sphere"]}}
@@ -144,7 +148,9 @@ That writes `compositions/orbit-card/orbit-card.html`, plus 11 supporting files
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -175,6 +181,4 @@ Tagged `3d-motion` `cards` `feature-reveal` `dots` `orbit` `blender-motion` `sph
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
index 1ca512bded..43501a1ab7 100644
--- a/docs/catalog/blocks/organic-light-leak-overlay.mdx
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Organic Light Leak Overlay</h1>
+  <p>Finite CSS light-leak overlay for memory beats and motivated transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/organic-light-leak-overlay.json"
   compositionId="organic-light-leak-overlay"
   compositionSrc="compositions/organic-light-leak-overlay.html"
   title="Organic Light Leak Overlay"
-  description="Finite CSS light-leak overlay for memory beats and motivated transitions"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":125}}
   attribution={{"path":"registry/blocks/organic-light-leak-overlay","tags":["light-leak","film","memory","transition","overlay","media-treatment-overlay"]}}
@@ -160,7 +164,9 @@ That writes one file: `compositions/organic-light-leak-overlay.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -191,6 +197,4 @@ Tagged `light-leak` `film` `memory` `transition` `overlay` `media-treatment-over
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/oscilloscope-trace.mdx b/docs/catalog/blocks/oscilloscope-trace.mdx
index 870dd83899..999a6d6226 100644
--- a/docs/catalog/blocks/oscilloscope-trace.mdx
+++ b/docs/catalog/blocks/oscilloscope-trace.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Oscilloscope Trace</h1>
+  <p>CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/oscilloscope-trace.json"
   compositionId="oscilloscope-trace"
   compositionSrc="compositions/oscilloscope-trace.html"
   title="Oscilloscope Trace"
-  description="CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows"
   variables={[{"id":"waveform","type":"enum","label":"Waveform","default":"sine","options":[{"value":"sine","label":"Sine"},{"value":"square","label":"Square"},{"value":"triangle","label":"Triangle"},{"value":"data","label":"Data series"}]},{"id":"frequency","type":"number","label":"Signal frequency","unit":"Hz","default":12,"min":0.1,"max":200,"step":0.1},{"id":"amplitude","type":"number","label":"Amplitude","unit":"div","default":3,"min":0.1,"max":4,"step":0.1},{"id":"persistenceMs","type":"number","label":"Phosphor persistence (tau)","unit":"ms","default":100,"min":1,"max":1000,"step":1},{"id":"phosphorColor","type":"color","label":"Phosphor colour","default":"#5dff8f"},{"id":"sweepRate","type":"number","label":"Sweep rate","unit":"sweeps/s","default":5,"min":0.25,"max":60,"step":0.25},{"id":"dataSeries","type":"string","label":"Data series (waveform=data)","default":"","placeholder":"0,0.4,0.9,0.3,-0.6,-1,-0.2,0.5"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":518}}
   attribution={{"path":"registry/blocks/oscilloscope-trace","tags":["instrument","data","showcase","retro"]}}
@@ -553,7 +557,9 @@ That writes one file: `compositions/oscilloscope-trace.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -610,6 +616,4 @@ Tagged `instrument` `data` `showcase` `retro`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/plasma.mdx b/docs/catalog/blocks/plasma.mdx
index c5345d0095..1afd785262 100644
--- a/docs/catalog/blocks/plasma.mdx
+++ b/docs/catalog/blocks/plasma.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Plasma</h1>
+  <p>Deep violet plasma folds and churns across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/plasma.json"
   compositionId="plasma"
   compositionSrc="compositions/plasma.html"
   title="Plasma"
-  description="Deep violet plasma folds and churns across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Texture","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/plasma","tags":["webgpu","webgpu-shader","background","texture","plasma","purple"]}}
@@ -68,7 +72,9 @@ That writes `compositions/plasma.html`, plus 2 supporting files under `compositi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `texture` `plasma` `purple`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/plastic.mdx b/docs/catalog/blocks/plastic.mdx
index dcbc3e2199..f80e560c04 100644
--- a/docs/catalog/blocks/plastic.mdx
+++ b/docs/catalog/blocks/plastic.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Plastic</h1>
+  <p>A glossy white plastic orb with soft studio reflections, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/plastic.json"
   compositionId="plastic"
   compositionSrc="compositions/plastic.html"
   title="Plastic"
-  description="A glossy white plastic orb with soft studio reflections, on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/plastic","tags":["webgpu","webgpu-shader","object","plastic","material","white"]}}
@@ -68,7 +72,9 @@ That writes `compositions/plastic.html`, plus 2 supporting files under `composit
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `plastic` `material` `white`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/prism.mdx b/docs/catalog/blocks/prism.mdx
index fe1dd30f18..fa20800ffd 100644
--- a/docs/catalog/blocks/prism.mdx
+++ b/docs/catalog/blocks/prism.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Prism</h1>
+  <p>A white beam of light splits into a slowly turning rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/prism.json"
   compositionId="prism"
   compositionSrc="compositions/prism.html"
   title="Prism"
-  description="A white beam of light splits into a slowly turning rainbow. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/prism","tags":["webgpu","webgpu-shader","background","light","prism","rainbow"]}}
@@ -68,7 +72,9 @@ That writes `compositions/prism.html`, plus 2 supporting files under `compositio
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `light` `prism` `rainbow`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/product-turntable.mdx b/docs/catalog/blocks/product-turntable.mdx
index 4e4583f52c..49bcc83a0b 100644
--- a/docs/catalog/blocks/product-turntable.mdx
+++ b/docs/catalog/blocks/product-turntable.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Product Turntable</h1>
+  <p>A product turns a full revolution on a studio plinth in a seamless loop. Drop in a GLB or glTF model, or keep the built-in drink can with your own label.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/product-turntable.json"
   compositionId="product-turntable"
   compositionSrc="compositions/product-turntable.html"
   title="Product Turntable"
-  description="A product turns a full revolution on a studio plinth in a seamless loop. Drop in a GLB or glTF model, or keep the built-in drink can with your own label."
   variables={[{"id":"model_url","type":"string","role":"content","label":"Model URL (.glb or .gltf)","description":"Leave empty for the built-in drink can.","default":""},{"id":"product_name","type":"string","role":"content","label":"Label wordmark","default":"YUZU","maxLength":10},{"id":"flavor","type":"string","role":"content","label":"Label line","default":"Sparkling Citrus","maxLength":28},{"id":"caption","type":"string","role":"content","label":"Caption","default":"Sparkling Citrus · 355 ml","maxLength":40},{"id":"label_color","type":"color","role":"style","label":"Label color","default":"#f2c230"},{"id":"ink_color","type":"color","role":"style","label":"Label ink","default":"#1d2a24"},{"id":"background","type":"color","role":"style","label":"Backdrop","default":"#e8e4dc"},{"id":"turns","type":"number","role":"motion","label":"Turns per clip","default":1,"min":1,"max":4,"step":1}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"3D objects","badge":"Stable","codeLines":363}}
   attribution={{"path":"registry/blocks/product-turntable","tags":["3d-object","three-js","webgl","product","turntable","glb","loop"]}}
@@ -398,7 +402,9 @@ That writes one file: `compositions/product-turntable.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -429,6 +435,4 @@ Tagged `3d-object` `three-js` `webgl` `product` `turntable` `glb` `loop`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/rack-focus.mdx b/docs/catalog/blocks/rack-focus.mdx
index d977f2506c..6c3a17fcbe 100644
--- a/docs/catalog/blocks/rack-focus.mdx
+++ b/docs/catalog/blocks/rack-focus.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Rack Focus</h1>
+  <p>A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/rack-focus.json"
   compositionId="rack-focus"
   compositionSrc="compositions/rack-focus.html"
   title="Rack Focus"
-  description="A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables."
   variables={[{"id":"nearfocus","type":"number","label":"Near focal distance","default":1.2,"min":0.2,"max":100,"step":0.05,"unit":"m"},{"id":"farfocus","type":"number","label":"Far focal distance","default":80,"min":0.3,"max":400,"step":0.5,"unit":"m"},{"id":"focallength","type":"number","label":"Focal length","default":85,"min":12,"max":300,"step":1,"unit":"mm"},{"id":"aperture","type":"number","label":"Aperture (f-number)","default":1.8,"min":0.95,"max":22,"step":0.05},{"id":"blades","type":"number","label":"Aperture blades (bokeh shape)","default":6,"min":3,"max":14,"step":1},{"id":"catseye","type":"number","label":"Cat eye clipping at the corners","default":0.62,"min":0,"max":1,"step":0.02},{"id":"pullstart","type":"number","label":"Pull start","default":1.2,"min":0,"max":30,"step":0.05,"unit":"s"},{"id":"pullduration","type":"number","label":"Pull duration","default":3.2,"min":0.1,"max":30,"step":0.05,"unit":"s"},{"id":"pullease","type":"string","label":"Pull easing (GSAP ease)","default":"power2.inOut","placeholder":"power2.inOut"},{"id":"bokeh","type":"number","label":"Bokeh exposure","default":1,"min":0,"max":3,"step":0.05},{"id":"backdrop","type":"color","label":"Backdrop","default":"#05060a"}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Showcases","badge":"Experimental","codeLines":605}}
   attribution={{"path":"registry/blocks/rack-focus","tags":["webgl","shader","camera","depth","cinematic","showcase"]}}
@@ -640,7 +644,9 @@ That writes one file: `compositions/rack-focus.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -717,6 +723,4 @@ Tagged `webgl` `shader` `camera` `depth` `cinematic` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index c143b1f6b0..16bc68d2c8 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Reddit Post Card</h1>
+  <p>Animated Reddit post card overlay with upvotes and comments</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/reddit-post.json"
   compositionId="reddit-post"
   compositionSrc="compositions/reddit-post.html"
   title="Reddit Post Card"
-  description="Animated Reddit post card overlay with upvotes and comments"
   variables={[]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Social Overlays","badge":"Stable","codeLines":346}}
   attribution={{"path":"registry/blocks/reddit-post","tags":["social","overlay","reddit"]}}
@@ -381,7 +385,9 @@ That writes one file: `compositions/reddit-post.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -412,6 +418,4 @@ Tagged `social` `overlay` `reddit`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index 5346bcf30f..c78104a82b 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Ridged Burn</h1>
+  <p>Shader transition with ridged turbulence burn effect</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/ridged-burn.json"
   compositionId="ridged-burn"
   compositionSrc="compositions/ridged-burn.html"
   title="Ridged Burn"
-  description="Shader transition with ridged turbulence burn effect"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":377}}
   attribution={{"path":"registry/blocks/ridged-burn","tags":["transition","shader"]}}
@@ -412,7 +416,9 @@ That writes one file: `compositions/ridged-burn.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -443,6 +449,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index c2cf4a1c04..dda975bbad 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Ripple Waves</h1>
+  <p>Shader transition with concentric ripple wave distortion</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/ripple-waves.json"
   compositionId="ripple-waves"
   compositionSrc="compositions/ripple-waves.html"
   title="Ripple Waves"
-  description="Shader transition with concentric ripple wave distortion"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":366}}
   attribution={{"path":"registry/blocks/ripple-waves","tags":["transition","shader"]}}
@@ -401,7 +405,9 @@ That writes one file: `compositions/ripple-waves.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -432,6 +438,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/ripples.mdx b/docs/catalog/blocks/ripples.mdx
index 99b66e45f1..5d2ba815bc 100644
--- a/docs/catalog/blocks/ripples.mdx
+++ b/docs/catalog/blocks/ripples.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Ripples</h1>
+  <p>Concentric rings ripple outward from the centre, white on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/ripples.json"
   compositionId="ripples"
   compositionSrc="compositions/ripples.html"
   title="Ripples"
-  description="Concentric rings ripple outward from the centre, white on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Texture","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/ripples","tags":["webgpu","webgpu-shader","background","texture","rings","waves","monochrome"]}}
@@ -68,7 +72,9 @@ That writes `compositions/ripples.html`, plus 2 supporting files under `composit
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `texture` `rings` `waves` `monochro
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index 9b0770151e..543e7436fa 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>SDF Iris</h1>
+  <p>Shader transition with signed distance field iris reveal</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/sdf-iris.json"
   compositionId="sdf-iris"
   compositionSrc="compositions/sdf-iris.html"
   title="SDF Iris"
-  description="Shader transition with signed distance field iris reveal"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":366}}
   attribution={{"path":"registry/blocks/sdf-iris","tags":["transition","shader"]}}
@@ -401,7 +405,9 @@ That writes one file: `compositions/sdf-iris.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -432,6 +438,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/share-sheet-carousel.mdx b/docs/catalog/blocks/share-sheet-carousel.mdx
index a57fdfaa97..c709f88553 100644
--- a/docs/catalog/blocks/share-sheet-carousel.mdx
+++ b/docs/catalog/blocks/share-sheet-carousel.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Share-Sheet Carousel</h1>
+  <p>A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/share-sheet-carousel.json"
   compositionId="share-sheet-carousel"
   compositionSrc="compositions/share-sheet-carousel.html"
   title="Share-Sheet Carousel"
-  description="A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap"
   variables={[{"id":"shareTitle","type":"string","role":"content","label":"Sheet title","description":"Heading at the top of the share sheet.","default":"Share"},{"id":"senderName","type":"string","role":"content","label":"Sender","description":"Name of the brand this video promotes, shown as the sender offering the item. Use the real name of that brand.","portrays":["subject_name"],"default":"HyperFrames"},{"id":"itemLabel","type":"string","role":"content","label":"Item","description":"What the sender is offering, completing the sentence \"… would like to share …\".","default":"a video"},{"id":"stripText","type":"string","role":"content","label":"Brand strip","description":"Positioning line of the brand this video promotes, in small caps beside its logo.","portrays":["subject_tagline"],"default":"OPEN-SOURCE VIDEO ENGINE · SHIP FROM HTML"},{"id":"acceptLabel","type":"string","role":"content","label":"Accept label","description":"Right-hand action button.","default":"Accept"},{"id":"declineLabel","type":"string","role":"content","label":"Decline label","description":"Left-hand action button.","default":"Decline"},{"id":"slideImage1","type":"image","role":"content","label":"Slide image 1","description":"First carousel image; also fills the blurred background.","default":"assets/slide-01.jpg"},{"id":"slideImage2","type":"image","role":"content","label":"Slide image 2","description":"Second carousel image; also fills the blurred background.","default":"assets/slide-02.jpg"},{"id":"slideImage3","type":"image","role":"content","label":"Slide image 3","description":"Third carousel image; also fills the blurred background.","default":"assets/slide-03.jpg"},{"id":"slideImage4","type":"image","role":"content","label":"Slide image 4","description":"Fourth carousel image; also fills the blurred background.","default":"assets/slide-04.jpg"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent horizontal wordmark of the brand this video promotes, in the preview strip.","portrays":["subject_logo"],"default":"assets/hyperframes-logo-black.svg"}]}
   meta={{"duration":7.2333,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":392}}
   attribution={{"author":"Miao Yang","path":"registry/blocks/share-sheet-carousel","tags":["showcase","mock-ui","share-sheet","vertical","ad-template"]}}
@@ -427,7 +431,9 @@ That writes `compositions/share-sheet-carousel.html`, plus 6 supporting files un
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -490,6 +496,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/sine-wave.mdx b/docs/catalog/blocks/sine-wave.mdx
index 8735b072be..d02a6b2726 100644
--- a/docs/catalog/blocks/sine-wave.mdx
+++ b/docs/catalog/blocks/sine-wave.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Sine Wave</h1>
+  <p>A glowing white sine wave travels across a black frame. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/sine-wave.json"
   compositionId="sine-wave"
   compositionSrc="compositions/sine-wave.html"
   title="Sine Wave"
-  description="A glowing white sine wave travels across a black frame. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/sine-wave","tags":["webgpu","webgpu-shader","background","wave","line","glow"]}}
@@ -68,7 +72,9 @@ That writes `compositions/sine-wave.html`, plus 2 supporting files under `compos
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `wave` `line` `glow`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/slack-notification-ad.mdx b/docs/catalog/blocks/slack-notification-ad.mdx
index 3d8dc9355e..660786fd84 100644
--- a/docs/catalog/blocks/slack-notification-ad.mdx
+++ b/docs/catalog/blocks/slack-notification-ad.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Slack Notification Ad</h1>
+  <p>A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/slack-notification-ad.json"
   compositionId="slack-notification-ad"
   compositionSrc="compositions/slack-notification-ad.html"
   title="Slack Notification Ad"
-  description="A portrait lock screen fills with escalating Slack video requests before HeyGen delivers the payoff"
   variables={[{"id":"request1Title","type":"string","role":"content","label":"Request 1 sender","description":"First Slack notification sender or channel.","default":"Sarah Chen"},{"id":"request1Text","type":"string","role":"content","label":"Request 1 message","description":"First Slack notification message.","default":"Hey! Any chance you could get the launch video done by Friday?"},{"id":"request2Title","type":"string","role":"content","label":"Request 2 sender","description":"Second Slack notification sender or channel.","default":"Marcus Webb"},{"id":"request2Text","type":"string","role":"content","label":"Request 2 message","description":"Second Slack notification message.","default":"also need a 30s demo cut for the keynote"},{"id":"request3Title","type":"string","role":"content","label":"Request 3 sender","description":"Third Slack notification sender or channel.","default":"#social"},{"id":"request3Text","type":"string","role":"content","label":"Request 3 message","description":"Third Slack notification message.","default":"Priya: can we get the launch video resized for TikTok + Reels?"},{"id":"request4Title","type":"string","role":"content","label":"Request 4 sender","description":"Fourth Slack notification sender or channel.","default":"Dana Okafor"},{"id":"request4Text","type":"string","role":"content","label":"Request 4 message","description":"Fourth Slack notification message.","default":"onboarding video needs a v2 with the new UI"},{"id":"request5Title","type":"string","role":"content","label":"Request 5 sender","description":"Fifth Slack notification sender or channel.","default":"#sales"},{"id":"request5Text","type":"string","role":"content","label":"Request 5 message","description":"Fifth Slack notification message.","default":"Tom: customer wants a 1-min walkthrough by EOD"},{"id":"request6Title","type":"string","role":"content","label":"Request 6 sender","description":"Sixth Slack notification sender or channel.","default":"Leila Haddad"},{"id":"request6Text","type":"string","role":"content","label":"Request 6 message","description":"Sixth Slack notification message.","default":"CEO is asking for a sizzle reel for the board deck"},{"id":"request7Title","type":"string","role":"content","label":"Request 7 sender","description":"Seventh Slack notification sender or channel.","default":"#events"},{"id":"request7Text","type":"string","role":"content","label":"Request 7 message","description":"Seventh Slack notification message.","default":"Jordan: offsite recap video??"},{"id":"request8Title","type":"string","role":"content","label":"Request 8 sender","description":"Eighth Slack notification sender or channel.","default":"Miguel Reyes"},{"id":"request8Text","type":"string","role":"content","label":"Request 8 message","description":"Eighth Slack notification message.","default":"can you do a Spanish version of the demo too?"},{"id":"request9Title","type":"string","role":"content","label":"Request 9 sender","description":"Ninth Slack notification sender or channel.","default":"#marketing"},{"id":"request9Text","type":"string","role":"content","label":"Request 9 message","description":"Ninth Slack notification message.","default":"Ava: we need 3 ad variants — portrait, square, landscape"},{"id":"request10Title","type":"string","role":"content","label":"Request 10 sender","description":"Tenth Slack notification sender or channel.","default":"Raj Patel"},{"id":"request10Text","type":"string","role":"content","label":"Request 10 message","description":"Tenth Slack notification message.","default":"investor update needs a quick video walkthrough"},{"id":"request11Title","type":"string","role":"content","label":"Request 11 sender","description":"Eleventh Slack notification sender or channel.","default":"Ben Liu"},{"id":"request11Text","type":"string","role":"content","label":"Request 11 message","description":"Eleventh Slack notification message.","default":"one more: Product Hunt launch video"},{"id":"payoffTitle","type":"string","role":"content","label":"Payoff sender","description":"Sender of the final payoff notification: the brand this video promotes, by its real name.","portrays":["subject_name","recommended_position"],"default":"HeyGen"},{"id":"payoffText","type":"string","role":"content","label":"Payoff message","description":"Payoff message from the brand this video promotes.","default":"Heard you needed some videos?"},{"id":"payoffIcon","type":"image","role":"content","label":"Payoff logo","description":"Mark of the brand this video promotes, shown only in the final payoff notification.","portrays":["subject_logo"],"default":"assets/img/heygen-mark.svg"}]}
   meta={{"duration":12,"width":1080,"height":1920,"category":"Showcases","badge":"Stable","codeLines":710}}
   attribution={{"author":"HeyGen","path":"registry/blocks/slack-notification-ad","tags":["showcase","mock-ui","notification","vertical","ad-template"]}}
@@ -745,7 +749,9 @@ That writes `compositions/slack-notification-ad.html`, plus 7 supporting files u
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -778,6 +784,4 @@ Created by HeyGen.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/snow.mdx b/docs/catalog/blocks/snow.mdx
index b7439b3847..a084ccbaf6 100644
--- a/docs/catalog/blocks/snow.mdx
+++ b/docs/catalog/blocks/snow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Snow</h1>
+  <p>Seek-safe falling-snow overlay: sparse or dense flakes drift down with size, speed and opacity correlated per flake for depth, radial-masked so the frame center stays clear</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/snow.json"
   compositionId="snow"
   compositionSrc="compositions/snow.html"
   title="Snow"
-  description="Seek-safe falling-snow overlay: sparse or dense flakes drift down with size, speed and opacity correlated per flake for depth, radial-masked so the frame center stays clear"
   variables={[{"id":"density","type":"enum","role":"style","label":"Density","description":"Flake count across the frame.","default":"sparse","options":[{"value":"sparse","label":"Sparse"},{"value":"dense","label":"Dense"}]},{"id":"speed","type":"enum","role":"style","label":"Fall speed","description":"How fast flakes fall and sway.","default":"calm","options":[{"value":"calm","label":"Calm"},{"value":"gust","label":"Gust"}]}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":204}}
   attribution={{"path":"registry/blocks/snow","tags":["snow","snowfall","winter","weather","overlay","ambient","particles","media-treatment-overlay","loopable"]}}
@@ -239,7 +243,9 @@ That writes one file: `compositions/snow.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -291,6 +297,4 @@ Tagged `snow` `snowfall` `winter` `weather` `overlay` `ambient` `particles` `med
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/spain-map.mdx b/docs/catalog/blocks/spain-map.mdx
index a82ac40496..75dde392a9 100644
--- a/docs/catalog/blocks/spain-map.mdx
+++ b/docs/catalog/blocks/spain-map.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Spain Map</h1>
+  <p>Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/spain-map.json"
   compositionId="spain-map"
   compositionSrc="compositions/spain-map.html"
   title="Spain Map"
-  description="Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":393}}
   attribution={{"path":"registry/blocks/spain-map","tags":["data","map","geography","spain","europe","choropleth"]}}
@@ -428,7 +432,9 @@ That writes one file: `compositions/spain-map.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -459,6 +465,4 @@ Tagged `data` `map` `geography` `spain` `europe` `choropleth`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/spiral-galaxy.mdx b/docs/catalog/blocks/spiral-galaxy.mdx
index bdff90fd4a..c76e93db40 100644
--- a/docs/catalog/blocks/spiral-galaxy.mdx
+++ b/docs/catalog/blocks/spiral-galaxy.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Spiral Galaxy</h1>
+  <p>A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/spiral-galaxy.json"
   compositionId="spiral-galaxy"
   compositionSrc="compositions/spiral-galaxy.html"
   title="Spiral Galaxy"
-  description="A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own."
   variables={[{"id":"stars","type":"number","label":"Star count","default":20000,"min":2000,"max":40000,"step":1000},{"id":"arms","type":"number","label":"Arm count","default":3,"min":2,"max":8,"step":1},{"id":"rate","type":"number","label":"Rotation rate","default":0.25,"min":0,"max":1.5,"step":0.05,"unit":"rad/s"},{"id":"glow","type":"number","label":"Core brightness","default":1.9,"min":0.2,"max":4,"step":0.1},{"id":"size","type":"number","label":"Star size","default":10,"min":2,"max":40,"step":1,"unit":"px"},{"id":"core","type":"color","label":"Core colour","default":"#ffa575"},{"id":"rim","type":"color","label":"Rim colour","default":"#311599"}]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"Blocks","badge":"Experimental","codeLines":312}}
   attribution={{"path":"registry/blocks/spiral-galaxy","tags":["hero","space","particles","webgl","background"]}}
@@ -347,7 +351,9 @@ That writes one file: `compositions/spiral-galaxy.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -416,6 +422,4 @@ Tagged `hero` `space` `particles` `webgl` `background`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/spiral.mdx b/docs/catalog/blocks/spiral.mdx
index b7edc8e67c..3fc0ac06c3 100644
--- a/docs/catalog/blocks/spiral.mdx
+++ b/docs/catalog/blocks/spiral.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Spiral</h1>
+  <p>A bold black and white spiral turns in the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/spiral.json"
   compositionId="spiral"
   compositionSrc="compositions/spiral.html"
   title="Spiral"
-  description="A bold black and white spiral turns in the frame. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/spiral","tags":["webgpu","webgpu-shader","background","pattern","spiral","monochrome"]}}
@@ -68,7 +72,9 @@ That writes `compositions/spiral.html`, plus 2 supporting files under `compositi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `pattern` `spiral` `monochrome`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/split-flap-board.mdx b/docs/catalog/blocks/split-flap-board.mdx
index baea7a7624..d1d9df439c 100644
--- a/docs/catalog/blocks/split-flap-board.mdx
+++ b/docs/catalog/blocks/split-flap-board.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Split-Flap Board</h1>
+  <p>Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/split-flap-board.json"
   compositionId="split-flap-board"
   compositionSrc="compositions/split-flap-board.html"
   title="Split-Flap Board"
-  description="Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade."
   variables={[{"id":"boardText","type":"string","label":"Board text","default":"NOW BOARDING","maxLength":24},{"id":"flapAlphabet","type":"string","label":"Flap alphabet (drum order)","default":" ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,'","maxLength":64},{"id":"flipDuration","type":"number","label":"Seconds per flap","default":0.09,"min":0.03,"max":1.2,"step":0.01,"unit":"s"},{"id":"cellStagger","type":"number","label":"Per-cell start stagger","default":0.05,"min":0,"max":0.5,"step":0.01,"unit":"s"},{"id":"cellCount","type":"number","label":"Cells on the board","default":12,"min":1,"max":24,"step":1}]}
   meta={{"duration":3.5,"width":1920,"height":1080,"category":"Typography & Text","badge":"Stable","codeLines":346}}
   attribution={{"path":"registry/blocks/split-flap-board","tags":["text","kinetic","mechanical","split-flap","solari","departure-board","reveal"]}}
@@ -381,7 +385,9 @@ That writes one file: `compositions/split-flap-board.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -436,6 +442,4 @@ Tagged `text` `kinetic` `mechanical` `split-flap` `solari` `departure-board` `re
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index ed773bcd5d..8d287be253 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Spotify Now Playing</h1>
+  <p>Animated Spotify now-playing card with album art and progress bar</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/spotify-card.json"
   compositionId="spotify-card"
   compositionSrc="compositions/spotify-card.html"
   title="Spotify Now Playing"
-  description="Animated Spotify now-playing card with album art and progress bar"
   variables={[]}
   meta={{"duration":5,"width":1080,"height":1920,"category":"Social Overlays","badge":"Stable","codeLines":299}}
   attribution={{"path":"registry/blocks/spotify-card","tags":["social","overlay","spotify"]}}
@@ -334,7 +338,9 @@ That writes one file: `compositions/spotify-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -365,6 +371,4 @@ Tagged `social` `overlay` `spotify`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/starfield.mdx b/docs/catalog/blocks/starfield.mdx
index e6daa8a4b9..778438b8e8 100644
--- a/docs/catalog/blocks/starfield.mdx
+++ b/docs/catalog/blocks/starfield.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Starfield</h1>
+  <p>Seek-safe night-sky overlay: sparse or dense stars in three size tiers that twinkle and drift in two parallax layers, radial-masked to keep the frame center clear</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/starfield.json"
   compositionId="starfield"
   compositionSrc="compositions/starfield.html"
   title="Starfield"
-  description="Seek-safe night-sky overlay: sparse or dense stars in three size tiers that twinkle and drift in two parallax layers, radial-masked to keep the frame center clear"
   variables={[{"id":"density","type":"enum","role":"style","label":"Density","description":"Star count across the frame.","default":"sparse","options":[{"value":"sparse","label":"Sparse"},{"value":"dense","label":"Dense"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Star color mix.","default":"warm","options":[{"value":"warm","label":"Warm (white + yellow)"},{"value":"cool","label":"Cool (white + blue)"},{"value":"white","label":"White only"}]},{"id":"speed","type":"enum","role":"style","label":"Twinkle speed","description":"How fast stars pulse.","default":"slow","options":[{"value":"slow","label":"Slow"},{"value":"fast","label":"Fast"}]}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":187}}
   attribution={{"path":"registry/blocks/starfield","tags":["starfield","night-sky","stars","twinkle","sky","weather","overlay","ambient","particles","media-treatment-overlay","loopable"]}}
@@ -222,7 +226,9 @@ That writes one file: `compositions/starfield.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -275,6 +281,4 @@ Tagged `starfield` `night-sky` `stars` `twinkle` `sky` `weather` `overlay` `ambi
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/strands.mdx b/docs/catalog/blocks/strands.mdx
index b8619e95e8..8851bf9c62 100644
--- a/docs/catalog/blocks/strands.mdx
+++ b/docs/catalog/blocks/strands.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Strands</h1>
+  <p>Thin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/strands.json"
   compositionId="strands"
   compositionSrc="compositions/strands.html"
   title="Strands"
-  description="Thin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/strands","tags":["webgpu","webgpu-shader","background","light","lines","ribbons"]}}
@@ -68,7 +72,9 @@ That writes `compositions/strands.html`, plus 2 supporting files under `composit
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `light` `lines` `ribbons`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/stripes.mdx b/docs/catalog/blocks/stripes.mdx
index ec9f0111bb..bc8e73bb44 100644
--- a/docs/catalog/blocks/stripes.mdx
+++ b/docs/catalog/blocks/stripes.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Stripes</h1>
+  <p>Bold black and white diagonal stripes slide across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/stripes.json"
   compositionId="stripes"
   compositionSrc="compositions/stripes.html"
   title="Stripes"
-  description="Bold black and white diagonal stripes slide across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/stripes","tags":["webgpu","webgpu-shader","background","pattern","stripes","monochrome"]}}
@@ -68,7 +72,9 @@ That writes `compositions/stripes.html`, plus 2 supporting files under `composit
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `pattern` `stripes` `monochrome`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/sun-burst.mdx b/docs/catalog/blocks/sun-burst.mdx
index 5e1d6da332..41620b9c10 100644
--- a/docs/catalog/blocks/sun-burst.mdx
+++ b/docs/catalog/blocks/sun-burst.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Sun Burst</h1>
+  <p>Cream and black rays fan out from the centre and slowly turn. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/sun-burst.json"
   compositionId="sun-burst"
   compositionSrc="compositions/sun-burst.html"
   title="Sun Burst"
-  description="Cream and black rays fan out from the centre and slowly turn. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/sun-burst","tags":["webgpu","webgpu-shader","background","light","rays","radial"]}}
@@ -68,7 +72,9 @@ That writes `compositions/sun-burst.html`, plus 2 supporting files under `compos
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `light` `rays` `radial`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index 78707d0e26..4e37c40c23 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Swirl Vortex</h1>
+  <p>Shader transition with swirling vortex distortion</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/swirl-vortex.json"
   compositionId="swirl-vortex"
   compositionSrc="compositions/swirl-vortex.html"
   title="Swirl Vortex"
-  description="Shader transition with swirling vortex distortion"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":376}}
   attribution={{"path":"registry/blocks/swirl-vortex","tags":["transition","shader"]}}
@@ -411,7 +415,9 @@ That writes one file: `compositions/swirl-vortex.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -442,6 +448,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/swirl.mdx b/docs/catalog/blocks/swirl.mdx
index 235c35b456..20f3d91654 100644
--- a/docs/catalog/blocks/swirl.mdx
+++ b/docs/catalog/blocks/swirl.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Swirl</h1>
+  <p>Orange and blue color fields swirl and flow into each other across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/swirl.json"
   compositionId="swirl"
   compositionSrc="compositions/swirl.html"
   title="Swirl"
-  description="Orange and blue color fields swirl and flow into each other across the whole frame. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/swirl","tags":["webgpu","webgpu-shader","background","gradient","flow","abstract"]}}
@@ -68,7 +72,9 @@ That writes `compositions/swirl.html`, plus 2 supporting files under `compositio
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `gradient` `flow` `abstract`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index 74d74f8297..be6af9d166 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Thermal Distortion</h1>
+  <p>Shader transition with heat haze thermal distortion</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/thermal-distortion.json"
   compositionId="thermal-distortion"
   compositionSrc="compositions/thermal-distortion.html"
   title="Thermal Distortion"
-  description="Shader transition with heat haze thermal distortion"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":377}}
   attribution={{"path":"registry/blocks/thermal-distortion","tags":["transition","shader"]}}
@@ -412,7 +416,9 @@ That writes one file: `compositions/thermal-distortion.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -443,6 +449,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/thin-film.mdx b/docs/catalog/blocks/thin-film.mdx
index bb428befae..763b474549 100644
--- a/docs/catalog/blocks/thin-film.mdx
+++ b/docs/catalog/blocks/thin-film.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Thin Film</h1>
+  <p>An orb's rim shimmers with soap-bubble iridescence on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/thin-film.json"
   compositionId="thin-film"
   compositionSrc="compositions/thin-film.html"
   title="Thin Film"
-  description="An orb's rim shimmers with soap-bubble iridescence on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/thin-film","tags":["webgpu","webgpu-shader","object","iridescent","bubble","rainbow"]}}
@@ -68,7 +72,9 @@ That writes `compositions/thin-film.html`, plus 2 supporting files under `compos
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `object` `iridescent` `bubble` `rainbow`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/thread-message-stack.mdx b/docs/catalog/blocks/thread-message-stack.mdx
index 42bd47de70..7cb2d98072 100644
--- a/docs/catalog/blocks/thread-message-stack.mdx
+++ b/docs/catalog/blocks/thread-message-stack.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Thread Message Stack</h1>
+  <p>A source-owned editable conversation stack with arbitrary incoming and outgoing messages</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/thread-message-stack.json"
   compositionId="thread-message-stack"
   compositionSrc="compositions/thread-message-stack.html"
   title="Thread Message Stack"
-  description="A source-owned editable conversation stack with arbitrary incoming and outgoing messages"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Social Overlays","badge":"Stable","codeLines":239}}
   attribution={{"path":"registry/blocks/thread-message-stack","tags":["social","conversation","messages"]}}
@@ -274,7 +278,9 @@ That writes one file: `compositions/thread-message-stack.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -305,6 +311,4 @@ Tagged `social` `conversation` `messages`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index 287d5fa6d7..e589ba131f 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>TikTok Follow</h1>
+  <p>Animated TikTok follow overlay with profile card and follow button</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/tiktok-follow.json"
   compositionId="tiktok-follow"
   compositionSrc="compositions/tiktok-follow.html"
   title="TikTok Follow"
-  description="Animated TikTok follow overlay with profile card and follow button"
   variables={[]}
   meta={{"duration":4.5,"width":1080,"height":1920,"category":"Social Overlays","badge":"Stable","codeLines":263}}
   attribution={{"path":"registry/blocks/tiktok-follow","tags":["social","overlay","tiktok"]}}
@@ -298,7 +302,9 @@ That writes `compositions/tiktok-follow.html`, plus 1 supporting file under `ass
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -329,6 +335,4 @@ Tagged `social` `overlay` `tiktok`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index ea4e71f2bc..8f31ba419e 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>3D Transitions</h1>
+  <p>Showcase of 3D perspective flip and rotate transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-3d.json"
   compositionId="transitions-3d"
   compositionSrc="compositions/transitions-3d.html"
   title="3D Transitions"
-  description="Showcase of 3D perspective flip and rotate transitions"
   variables={[]}
   meta={{"duration":11,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":297}}
   attribution={{"path":"registry/blocks/transitions-3d","tags":["transition","showcase"]}}
@@ -332,7 +336,9 @@ That writes one file: `compositions/transitions-3d.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -363,6 +369,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index 5fdd80c779..f04286e790 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Blur Transitions</h1>
+  <p>Showcase of blur-based transitions between scenes</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-blur.json"
   compositionId="transitions-blur"
   compositionSrc="compositions/transitions-blur.html"
   title="Blur Transitions"
-  description="Showcase of blur-based transitions between scenes"
   variables={[]}
   meta={{"duration":20,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":387}}
   attribution={{"path":"registry/blocks/transitions-blur","tags":["transition","showcase"]}}
@@ -422,7 +426,9 @@ That writes one file: `compositions/transitions-blur.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -453,6 +459,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index 34bcb618a0..5dc1bcaaeb 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Cover Transitions</h1>
+  <p>Showcase of cover/uncover slide transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-cover.json"
   compositionId="transitions-cover"
   compositionSrc="compositions/transitions-cover.html"
   title="Cover Transitions"
-  description="Showcase of cover/uncover slide transitions"
   variables={[]}
   meta={{"duration":21,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":371}}
   attribution={{"path":"registry/blocks/transitions-cover","tags":["transition","showcase"]}}
@@ -406,7 +410,9 @@ That writes one file: `compositions/transitions-cover.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -437,6 +443,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index a6837eb885..e130b0bca1 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Destruction Transitions</h1>
+  <p>Showcase of destructive break-apart transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-destruction.json"
   compositionId="transitions-destruction"
   compositionSrc="compositions/transitions-destruction.html"
   title="Destruction Transitions"
-  description="Showcase of destructive break-apart transitions"
   variables={[]}
   meta={{"duration":14,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":414}}
   attribution={{"path":"registry/blocks/transitions-destruction","tags":["transition","showcase"]}}
@@ -449,7 +453,9 @@ That writes one file: `compositions/transitions-destruction.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -480,6 +486,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index 5f042f1216..1458bda938 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Dissolve Transitions</h1>
+  <p>Showcase of dissolve and fade transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-dissolve.json"
   compositionId="transitions-dissolve"
   compositionSrc="compositions/transitions-dissolve.html"
   title="Dissolve Transitions"
-  description="Showcase of dissolve and fade transitions"
   variables={[]}
   meta={{"duration":24,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":391}}
   attribution={{"path":"registry/blocks/transitions-dissolve","tags":["transition","showcase","crossfade"]}}
@@ -426,7 +430,9 @@ That writes one file: `compositions/transitions-dissolve.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -457,6 +463,4 @@ Tagged `transition` `showcase` `crossfade`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index cdf9d94b79..307b5f28ad 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Distortion Transitions</h1>
+  <p>Showcase of warp and distortion transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-distortion.json"
   compositionId="transitions-distortion"
   compositionSrc="compositions/transitions-distortion.html"
   title="Distortion Transitions"
-  description="Showcase of warp and distortion transitions"
   variables={[]}
   meta={{"duration":21,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":385}}
   attribution={{"path":"registry/blocks/transitions-distortion","tags":["transition","showcase"]}}
@@ -420,7 +424,9 @@ That writes one file: `compositions/transitions-distortion.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -451,6 +457,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index 9ddf314047..3683940b34 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Grid Transitions</h1>
+  <p>Showcase of grid-based tile transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-grid.json"
   compositionId="transitions-grid"
   compositionSrc="compositions/transitions-grid.html"
   title="Grid Transitions"
-  description="Showcase of grid-based tile transitions"
   variables={[]}
   meta={{"duration":11,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":305}}
   attribution={{"path":"registry/blocks/transitions-grid","tags":["transition","showcase"]}}
@@ -340,7 +344,9 @@ That writes one file: `compositions/transitions-grid.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -371,6 +377,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index e633498203..32082bef28 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Light Transitions</h1>
+  <p>Showcase of light-based glow and flash transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-light.json"
   compositionId="transitions-light"
   compositionSrc="compositions/transitions-light.html"
   title="Light Transitions"
-  description="Showcase of light-based glow and flash transitions"
   variables={[]}
   meta={{"duration":21,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":391}}
   attribution={{"path":"registry/blocks/transitions-light","tags":["transition","showcase"]}}
@@ -426,7 +430,9 @@ That writes one file: `compositions/transitions-light.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -457,6 +463,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index 79ef4bee38..3ac6957cef 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Mechanical Transitions</h1>
+  <p>Showcase of mechanical shutter and iris transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-mechanical.json"
   compositionId="transitions-mechanical"
   compositionSrc="compositions/transitions-mechanical.html"
   title="Mechanical Transitions"
-  description="Showcase of mechanical shutter and iris transitions"
   variables={[]}
   meta={{"duration":15,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":423}}
   attribution={{"path":"registry/blocks/transitions-mechanical","tags":["transition","showcase"]}}
@@ -458,7 +462,9 @@ That writes one file: `compositions/transitions-mechanical.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -489,6 +495,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index be7c8b4513..64943d4763 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Other Transitions</h1>
+  <p>Showcase of miscellaneous creative transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-other.json"
   compositionId="transitions-other"
   compositionSrc="compositions/transitions-other.html"
   title="Other Transitions"
-  description="Showcase of miscellaneous creative transitions"
   variables={[]}
   meta={{"duration":20,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":395}}
   attribution={{"path":"registry/blocks/transitions-other","tags":["transition","showcase"]}}
@@ -430,7 +434,9 @@ That writes one file: `compositions/transitions-other.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -461,6 +467,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index 52fe978274..cf5537e93e 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Push Transitions</h1>
+  <p>Showcase of push and slide transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-push.json"
   compositionId="transitions-push"
   compositionSrc="compositions/transitions-push.html"
   title="Push Transitions"
-  description="Showcase of push and slide transitions"
   variables={[]}
   meta={{"duration":24,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":383}}
   attribution={{"path":"registry/blocks/transitions-push","tags":["transition","showcase"]}}
@@ -418,7 +422,9 @@ That writes one file: `compositions/transitions-push.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -449,6 +455,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index 9e5f919d20..37ddb0e4ff 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Radial Transitions</h1>
+  <p>Showcase of radial wipe and reveal transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-radial.json"
   compositionId="transitions-radial"
   compositionSrc="compositions/transitions-radial.html"
   title="Radial Transitions"
-  description="Showcase of radial wipe and reveal transitions"
   variables={[]}
   meta={{"duration":20,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":355}}
   attribution={{"path":"registry/blocks/transitions-radial","tags":["transition","showcase"]}}
@@ -390,7 +394,9 @@ That writes one file: `compositions/transitions-radial.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -421,6 +427,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index 505cc75183..8394f90bc5 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Scale Transitions</h1>
+  <p>Showcase of scale and zoom transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/transitions-scale.json"
   compositionId="transitions-scale"
   compositionSrc="compositions/transitions-scale.html"
   title="Scale Transitions"
-  description="Showcase of scale and zoom transitions"
   variables={[]}
   meta={{"duration":15,"width":1920,"height":1080,"category":"CSS Transitions","badge":"Stable","codeLines":350}}
   attribution={{"path":"registry/blocks/transitions-scale","tags":["transition","showcase"]}}
@@ -385,7 +389,9 @@ That writes one file: `compositions/transitions-scale.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -416,6 +422,4 @@ Tagged `transition` `showcase`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index bd3d31a170..088b66c5a0 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>3D UI Reveal</h1>
+  <p>Perspective 3D reveal animation for UI elements</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/ui-3d-reveal.json"
   compositionId="ui-3d-reveal"
   compositionSrc="compositions/ui-3d-reveal.html"
   title="3D UI Reveal"
-  description="Perspective 3D reveal animation for UI elements"
   variables={[]}
   meta={{"duration":13,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":2764}}
   attribution={{"path":"registry/blocks/ui-3d-reveal","tags":["showcase","3d","reveal"]}}
@@ -2799,7 +2803,9 @@ That writes one file: `compositions/ui-3d-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -2830,6 +2836,4 @@ Tagged `showcase` `3d` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/us-map-bubble.mdx b/docs/catalog/blocks/us-map-bubble.mdx
index aa8337fbdf..dd8eec5d51 100644
--- a/docs/catalog/blocks/us-map-bubble.mdx
+++ b/docs/catalog/blocks/us-map-bubble.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>US Bubble Map</h1>
+  <p>Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/us-map-bubble.json"
   compositionId="us-map-bubble"
   compositionSrc="compositions/us-map-bubble.html"
   title="US Bubble Map"
-  description="Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map"
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":479}}
   attribution={{"path":"registry/blocks/us-map-bubble","tags":["data","map","geography","usa","bubble","cities"]}}
@@ -514,7 +518,9 @@ That writes one file: `compositions/us-map-bubble.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -545,6 +551,4 @@ Tagged `data` `map` `geography` `usa` `bubble` `cities`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/us-map-flow.mdx b/docs/catalog/blocks/us-map-flow.mdx
index 7dbe74cd60..cc66a9c7fc 100644
--- a/docs/catalog/blocks/us-map-flow.mdx
+++ b/docs/catalog/blocks/us-map-flow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>US Flow Map</h1>
+  <p>Animated connection arcs between US cities over a base map — composable origin-destination flow visualization</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/us-map-flow.json"
   compositionId="us-map-flow"
   compositionSrc="compositions/us-map-flow.html"
   title="US Flow Map"
-  description="Animated connection arcs between US cities over a base map — composable origin-destination flow visualization"
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":429}}
   attribution={{"path":"registry/blocks/us-map-flow","tags":["data","map","geography","usa","flow","connections","arcs"]}}
@@ -464,7 +468,9 @@ That writes one file: `compositions/us-map-flow.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -495,6 +501,4 @@ Tagged `data` `map` `geography` `usa` `flow` `connections` `arcs`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/us-map-hex.mdx b/docs/catalog/blocks/us-map-hex.mdx
index b974ee8c06..a5231ec304 100644
--- a/docs/catalog/blocks/us-map-hex.mdx
+++ b/docs/catalog/blocks/us-map-hex.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>US Hex Grid Map</h1>
+  <p>Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/us-map-hex.json"
   compositionId="us-map-hex"
   compositionSrc="compositions/us-map-hex.html"
   title="US Hex Grid Map"
-  description="Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label"
   variables={[]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":559}}
   attribution={{"path":"registry/blocks/us-map-hex","tags":["data","map","geography","usa","hexgrid","tilegrid"]}}
@@ -594,7 +598,9 @@ That writes one file: `compositions/us-map-hex.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -625,6 +631,4 @@ Tagged `data` `map` `geography` `usa` `hexgrid` `tilegrid`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/us-map.mdx b/docs/catalog/blocks/us-map.mdx
index b78436b67e..55813f35fd 100644
--- a/docs/catalog/blocks/us-map.mdx
+++ b/docs/catalog/blocks/us-map.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>US Map</h1>
+  <p>Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/us-map.json"
   compositionId="us-map"
   compositionSrc="compositions/us-map.html"
   title="US Map"
-  description="Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP"
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":402}}
   attribution={{"path":"registry/blocks/us-map","tags":["data","map","geography","usa","choropleth"]}}
@@ -437,7 +441,9 @@ That writes one file: `compositions/us-map.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -468,6 +474,4 @@ Tagged `data` `map` `geography` `usa` `choropleth`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vfx-anamorphic-flare.mdx b/docs/catalog/blocks/vfx-anamorphic-flare.mdx
index 47f15ca81f..2753df964c 100644
--- a/docs/catalog/blocks/vfx-anamorphic-flare.mdx
+++ b/docs/catalog/blocks/vfx-anamorphic-flare.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Anamorphic Streak Flare</h1>
+  <p>A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/vfx-anamorphic-flare.json"
   compositionId="vfx-anamorphic-flare"
   compositionSrc="compositions/vfx-anamorphic-flare.html"
   title="Anamorphic Streak Flare"
-  description="A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint."
   variables={[{"id":"intensity","type":"number","label":"Streak intensity","default":5,"min":0,"max":20,"step":0.1},{"id":"threshold","type":"number","label":"High-pass threshold","default":0.3,"min":0,"max":1,"step":0.01},{"id":"streakLength","type":"number","label":"Streak length gain","default":1,"min":0.1,"max":6,"step":0.05},{"id":"tint","type":"color","label":"Streak tint","default":"#7a8aff"},{"id":"bloomRadius","type":"number","label":"Bloom radius","default":0,"min":0,"max":80,"step":1,"unit":"px"},{"id":"timeScale","type":"number","label":"Drift rate","default":0.5,"min":0,"max":3,"step":0.05},{"id":"emitters","type":"number","label":"Emitter count","default":140,"min":1,"max":400,"step":1},{"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"Showcases","badge":"Experimental","codeLines":372}}
   attribution={{"path":"registry/blocks/vfx-anamorphic-flare","tags":["vfx","background","showcase","optical","canvas"]}}
@@ -407,7 +411,9 @@ That writes one file: `compositions/vfx-anamorphic-flare.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -478,6 +484,4 @@ Tagged `vfx` `background` `showcase` `optical` `canvas`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index 465a4a4a71..f2b6e6e01b 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>iPhone &amp; MacBook 3D Showcase</h1>
+  <p>Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.</p>
+</div>
+
 <CatalogDetail
   compositionId="vfx-iphone-device"
   compositionSrc="compositions/vfx-iphone-device.html"
   title="iPhone & MacBook 3D Showcase"
-  description="Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable."
   variables={[]}
   meta={{"duration":15,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":849}}
   attribution={{"path":"registry/blocks/vfx-iphone-device","tags":["html-in-canvas","3d","device","iphone","macbook","gltf"]}}
@@ -885,7 +889,9 @@ That writes `compositions/vfx-iphone-device.html`, plus 4 supporting files under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -922,6 +928,4 @@ Tagged `html-in-canvas` `3d` `device` `iphone` `macbook` `gltf`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index 8d25a00fd7..9878e2c527 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Liquid Background</h1>
+  <p>Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.</p>
+</div>
+
 <CatalogDetail
   compositionId="vfx-liquid-background"
   compositionSrc="compositions/vfx-liquid-background.html"
   title="Liquid Background"
-  description="Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics."
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":1244}}
   attribution={{"path":"registry/blocks/vfx-liquid-background","tags":["html-in-canvas","liquid","webgl","displacement","background"]}}
@@ -1280,7 +1284,9 @@ That writes one file: `compositions/vfx-liquid-background.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -1324,6 +1330,4 @@ Tagged `html-in-canvas` `liquid` `webgl` `displacement` `background`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index 7052924f4a..df01e582c7 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Liquid Glass</h1>
+  <p>VFX composition block</p>
+</div>
+
 <CatalogDetail
   compositionId="vfx-liquid-glass"
   compositionSrc="compositions/vfx-liquid-glass.html"
   title="Liquid Glass"
-  description="VFX composition block"
   variables={[]}
   meta={{"duration":20,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":752}}
   attribution={{"path":"registry/blocks/vfx-liquid-glass","tags":["html-in-canvas","webgl"]}}
@@ -788,7 +792,9 @@ That writes one file: `compositions/vfx-liquid-glass.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -832,6 +838,4 @@ Tagged `html-in-canvas` `webgl`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index fc757986b5..0d4d03f9d5 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Magnetic</h1>
+  <p>VFX composition block</p>
+</div>
+
 <CatalogDetail
   compositionId="vfx-magnetic"
   compositionSrc="compositions/vfx-magnetic.html"
   title="Magnetic"
-  description="VFX composition block"
   variables={[]}
   meta={{"duration":15,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":464}}
   attribution={{"path":"registry/blocks/vfx-magnetic","tags":["html-in-canvas","webgl"]}}
@@ -500,7 +504,9 @@ That writes one file: `compositions/vfx-magnetic.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -544,6 +550,4 @@ Tagged `html-in-canvas` `webgl`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index 07e5505bbf..32ad499d80 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Portal</h1>
+  <p>VFX composition block</p>
+</div>
+
 <CatalogDetail
   compositionId="vfx-portal"
   compositionSrc="compositions/vfx-portal.html"
   title="Portal"
-  description="VFX composition block"
   variables={[]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":863}}
   attribution={{"path":"registry/blocks/vfx-portal","tags":["html-in-canvas","webgl"]}}
@@ -899,7 +903,9 @@ That writes one file: `compositions/vfx-portal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -943,6 +949,4 @@ Tagged `html-in-canvas` `webgl`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index 6f0008d0cd..99b114ea46 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Shatter</h1>
+  <p>VFX composition block</p>
+</div>
+
 <CatalogDetail
   compositionId="vfx-shatter"
   compositionSrc="compositions/vfx-shatter.html"
   title="Shatter"
-  description="VFX composition block"
   variables={[]}
   meta={{"duration":12,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":1156}}
   attribution={{"path":"registry/blocks/vfx-shatter","tags":["html-in-canvas","webgl"]}}
@@ -1192,7 +1196,9 @@ That writes one file: `compositions/vfx-shatter.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -1229,6 +1235,4 @@ Tagged `html-in-canvas` `webgl`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index e676e2c758..ae2f970ee9 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>VFX Text Cursor</h1>
+  <p>Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/vfx-text-cursor.json"
   compositionId="vfx-text-cursor"
   compositionSrc="compositions/vfx-text-cursor.html"
   title="VFX Text Cursor"
-  description="Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges."
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"HTML-in-Canvas","badge":"Experimental","codeLines":855}}
   attribution={{"path":"registry/blocks/vfx-text-cursor","tags":["html-in-canvas","text","shader","cursor","chromatic"]}}
@@ -890,7 +894,9 @@ That writes one file: `compositions/vfx-text-cursor.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -927,6 +933,4 @@ Tagged `html-in-canvas` `text` `shader` `cursor` `chromatic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/voronoi.mdx b/docs/catalog/blocks/voronoi.mdx
index 69c912797d..35e1257730 100644
--- a/docs/catalog/blocks/voronoi.mdx
+++ b/docs/catalog/blocks/voronoi.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Voronoi</h1>
+  <p>Magenta cells with glowing blue centres shift and reshape across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/voronoi.json"
   compositionId="voronoi"
   compositionSrc="compositions/voronoi.html"
   title="Voronoi"
-  description="Magenta cells with glowing blue centres shift and reshape across the frame. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/voronoi","tags":["webgpu","webgpu-shader","background","pattern","cells","voronoi"]}}
@@ -68,7 +72,9 @@ That writes `compositions/voronoi.html`, plus 2 supporting files under `composit
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `pattern` `cells` `voronoi`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/vpn-youtube-spot.mdx b/docs/catalog/blocks/vpn-youtube-spot.mdx
index 3113540e96..ad2c569e77 100644
--- a/docs/catalog/blocks/vpn-youtube-spot.mdx
+++ b/docs/catalog/blocks/vpn-youtube-spot.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>VPN YouTube Spot</h1>
+  <p>Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/vpn-youtube-spot.json"
   compositionId="vpn-youtube-spot"
   compositionSrc="compositions/vpn-youtube-spot.html"
   title="VPN YouTube Spot"
-  description="Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects."
   variables={[]}
   meta={{"duration":7,"width":1920,"height":1080,"category":"Showcases","badge":"Stable","codeLines":987}}
   attribution={{"author":"Stronkter","authorUrl":"https://x.com/Stronkter","path":"registry/blocks/vpn-youtube-spot","tags":["app","showcase","youtube","sfx"]}}
@@ -1022,7 +1026,9 @@ That writes `compositions/vpn-youtube-spot.html`, plus 1 supporting file under `
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1063,6 +1069,4 @@ HyperFrames by HeyGen make me a 7s video with Apple-style bold font and styling:
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/water.mdx b/docs/catalog/blocks/water.mdx
index ec6da2f23f..c555f73f36 100644
--- a/docs/catalog/blocks/water.mdx
+++ b/docs/catalog/blocks/water.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Water</h1>
+  <p>A sphere of wind-rippled water reflecting a blue sky, on black. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/water.json"
   compositionId="water"
   compositionSrc="compositions/water.html"
   title="Water"
-  description="A sphere of wind-rippled water reflecting a blue sky, on black. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/water","tags":["webgpu","webgpu-shader","orb","water","material","blue"]}}
@@ -68,7 +72,9 @@ That writes `compositions/water.html`, plus 2 supporting files under `compositio
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `orb` `water` `material` `blue`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/waveform.mdx b/docs/catalog/blocks/waveform.mdx
index 4df9ee5d7e..17fc1f68a9 100644
--- a/docs/catalog/blocks/waveform.mdx
+++ b/docs/catalog/blocks/waveform.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Waveform</h1>
+  <p>Equalizer bars in a blue to pink gradient pulse across the middle of the frame, like an audio visualizer. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/waveform.json"
   compositionId="waveform"
   compositionSrc="compositions/waveform.html"
   title="Waveform"
-  description="Equalizer bars in a blue to pink gradient pulse across the middle of the frame, like an audio visualizer. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/waveform","tags":["webgpu","webgpu-shader","audio","music","visualizer","bars"]}}
@@ -68,7 +72,9 @@ That writes `compositions/waveform.html`, plus 2 supporting files under `composi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `audio` `music` `visualizer` `bars`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/week-in-merges.mdx b/docs/catalog/blocks/week-in-merges.mdx
index 57bbdad818..85e4f01899 100644
--- a/docs/catalog/blocks/week-in-merges.mdx
+++ b/docs/catalog/blocks/week-in-merges.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Week in Merges</h1>
+  <p>Each author's avatar bounces across their row at a speed set by how many pull requests they merged</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/week-in-merges.json"
   compositionId="week-in-merges"
   compositionSrc="compositions/week-in-merges.html"
   title="Week in Merges"
-  description="Each author's avatar bounces across their row at a speed set by how many pull requests they merged"
   variables={[{"id":"eyebrow","type":"string","label":"Eyebrow","default":"ACME / WEEK IN MERGES"},{"id":"title","type":"string","label":"Title","default":"Pull requests merged this week"},{"id":"period","type":"string","label":"Period","default":"1 September - 7 September 2026 · America/Los_Angeles"},{"id":"total","type":"string","label":"Total","default":"12 PRs"},{"id":"footer","type":"string","label":"Footer","default":"Speed proportional to merges · By PR author"},{"id":"source","type":"string","label":"Source line","default":"Example org · 1 repo · Bots · 0"},{"id":"rows","type":"string","label":"Rows (JSON array of name, merges, avatar)","default":"[{\"name\":\"Ada\",\"merges\":12,\"avatar\":\"\"},{\"name\":\"Bao\",\"merges\":7,\"avatar\":\"\"},{\"name\":\"Cam\",\"merges\":4,\"avatar\":\"\"},{\"name\":\"Dee\",\"merges\":2,\"avatar\":\"\"},{\"name\":\"Eli\",\"merges\":1,\"avatar\":\"\"}]"},{"id":"rows_max","type":"number","label":"Maximum rows","default":12,"min":1,"max":12,"step":1,"description":"Authors drawn, highest merge count first."},{"id":"overflow","type":"string","label":"Overflow line","default":"","description":"Line for everyone past the cap. Empty writes it from the rows left out."}]}
   meta={{"duration":16,"width":1080,"height":1350,"category":"Data","badge":"Stable","codeLines":469}}
   attribution={{"path":"registry/blocks/week-in-merges","tags":["data","chart","ranking","leaderboard"]}}
@@ -504,7 +508,9 @@ That writes one file: `compositions/week-in-merges.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -577,6 +583,4 @@ Tagged `data` `chart` `ranking` `leaderboard`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/weight-wave.mdx b/docs/catalog/blocks/weight-wave.mdx
index d26c200203..b9f6d29ae0 100644
--- a/docs/catalog/blocks/weight-wave.mdx
+++ b/docs/catalog/blocks/weight-wave.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Weight Wave</h1>
+  <p>A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/weight-wave.json"
   compositionId="weight-wave"
   compositionSrc="compositions/weight-wave.html"
   title="Weight Wave"
-  description="A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms."
   variables={[{"id":"text","type":"string","label":"Headline","default":"PRESSURE MOVES THROUGH TYPE","maxLength":64},{"id":"color","type":"color","label":"Text color","default":"#f5f5f7"},{"id":"background","type":"color","label":"Background","default":"#0b0b0d"},{"id":"weightFrom","type":"number","label":"Weight (rest)","default":400,"min":300,"max":1000,"step":10},{"id":"weightTo","type":"number","label":"Weight (crest)","default":1000,"min":300,"max":1000,"step":10},{"id":"crestWidth","type":"number","label":"Crest width","default":4,"min":1,"max":24,"step":0.5,"unit":"chars"},{"id":"sweepSpeed","type":"number","label":"Sweep speed","default":0.5,"min":0.05,"max":3,"step":0.05,"unit":"passes/s"},{"id":"slant","type":"number","label":"Slant at crest","default":-12,"min":-15,"max":0,"step":0.5,"unit":"deg"},{"id":"direction","type":"enum","label":"Direction","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"rtl","label":"Right to left"}]}]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Typography & Text","badge":"Stable","codeLines":299}}
   attribution={{"path":"registry/blocks/weight-wave","tags":["typography","kinetic-type","title","variable-font","text"]}}
@@ -334,7 +338,9 @@ That writes `compositions/weight-wave.html`, plus 2 supporting files under `comp
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -393,6 +399,4 @@ Tagged `typography` `kinetic-type` `title` `variable-font` `text`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index abab65987c..f0a0138520 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Whip Pan</h1>
+  <p>Shader transition simulating a fast camera whip pan</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/whip-pan.json"
   compositionId="whip-pan"
   compositionSrc="compositions/whip-pan.html"
   title="Whip Pan"
-  description="Shader transition simulating a fast camera whip pan"
   variables={[]}
   meta={{"duration":4,"width":1920,"height":1080,"category":"Shader Transitions","badge":"Stable","codeLines":366}}
   attribution={{"path":"registry/blocks/whip-pan","tags":["transition","shader"]}}
@@ -401,7 +405,9 @@ That writes one file: `compositions/whip-pan.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -432,6 +438,4 @@ Tagged `transition` `shader`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/wireframe-portal-title.mdx b/docs/catalog/blocks/wireframe-portal-title.mdx
index 7bdea1635d..3c5314302b 100644
--- a/docs/catalog/blocks/wireframe-portal-title.mdx
+++ b/docs/catalog/blocks/wireframe-portal-title.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Wireframe Portal Title</h1>
+  <p>A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/wireframe-portal-title.json"
   compositionId="wireframe-portal-title"
   compositionSrc="compositions/wireframe-portal-title/wireframe-portal-title.html"
   title="Wireframe Portal Title"
-  description="A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase."
   variables={[{"id":"title","type":"string","label":"Title","default":"BREAKTHROUGH","maxLength":18},{"id":"replacementPhrase","type":"string","label":"3D replacement phrase (auto layout)","default":"Lets do this sir!","description":"Every word is preserved. Whole-word line wrapping and type size adapt to the 3D frame."},{"id":"phraseDuration","type":"number","label":"Phrase transition duration (s)","default":1.85,"min":0.65,"max":2.9,"step":0.05,"unit":"s","description":"Total time for the letter transition, including the stagger. Lower is faster. The opening and white return keep their original timing."},{"id":"phraseEasing","type":"number","label":"Transition easing (1 gentle – 8 snap)","default":8,"min":1,"max":8,"step":0.25,"description":"Higher values keep the beginning slow and concentrate acceleration at the letter swap, then settle gently. 4 is the default."},{"id":"settleGlitch","type":"number","label":"Letter settle glitch strength","default":0.2,"min":0,"max":4,"step":0.05,"description":"Scales the deterministic block glitch and letter jitter around swap and settling. 0 disables it; 4 makes it strongest."},{"id":"depthFog","type":"boolean","label":"Depth fog (early fade always on)","default":true,"description":"Dims receding outlines into the dark scene. Early opacity fades remain active when fog is off."},{"id":"subtitle","type":"string","label":"Subtitle","default":"HYPERFRAMES PORTAL TITLE","maxLength":48},{"id":"accent","type":"color","label":"Accent","default":"#F5C518"},{"id":"burstChaos","type":"number","label":"Burst chaos (0-2)","default":1,"min":0,"max":2,"step":0.01}]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"3D motion","badge":"Stable","codeLines":1604}}
   attribution={{"path":"registry/blocks/wireframe-portal-title","tags":["3d-motion","title-card","wireframe","portal","burst","typography","post-processing","phrase-swap"]}}
@@ -1639,7 +1643,9 @@ That writes `compositions/wireframe-portal-title/wireframe-portal-title.html`, p
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -1670,6 +1676,4 @@ Tagged `3d-motion` `title-card` `wireframe` `portal` `burst` `typography` `post-
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/world-map.mdx b/docs/catalog/blocks/world-map.mdx
index 1547fc7685..59be7ddb97 100644
--- a/docs/catalog/blocks/world-map.mdx
+++ b/docs/catalog/blocks/world-map.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>World Map</h1>
+  <p>Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/world-map.json"
   compositionId="world-map"
   compositionSrc="compositions/world-map.html"
   title="World Map"
-  description="Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection"
   variables={[]}
   meta={{"duration":14,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":435}}
   attribution={{"path":"registry/blocks/world-map","tags":["data","map","geography","world","choropleth"]}}
@@ -470,7 +474,9 @@ That writes one file: `compositions/world-map.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -501,6 +507,4 @@ Tagged `data` `map` `geography` `world` `choropleth`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/worley-noise.mdx b/docs/catalog/blocks/worley-noise.mdx
index b79195749d..a4763363b4 100644
--- a/docs/catalog/blocks/worley-noise.mdx
+++ b/docs/catalog/blocks/worley-noise.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Worley Noise</h1>
+  <p>A field of drifting cells, light at their centres and dark at their edges. A WebGPU shader from the Shaders library (shaders.com, MIT).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/worley-noise.json"
   compositionId="worley-noise"
   compositionSrc="compositions/worley-noise.html"
   title="Worley Noise"
-  description="A field of drifting cells, light at their centres and dark at their edges. A WebGPU shader from the Shaders library (shaders.com, MIT)."
   variables={[]}
   meta={{"duration":2,"width":1920,"height":1080,"category":"Texture","badge":"Stable","codeLines":31}}
   attribution={{"path":"registry/blocks/worley-noise","tags":["webgpu","webgpu-shader","background","texture","noise","cells","monochrome"]}}
@@ -68,7 +72,9 @@ That writes `compositions/worley-noise.html`, plus 2 supporting files under `com
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -99,6 +105,4 @@ Tagged `webgpu` `webgpu-shader` `background` `texture` `noise` `cells` `monochro
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index 160d84651c..4ec0fa29da 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>X Post Card</h1>
+  <p>Animated X/Twitter post card overlay with engagement metrics</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/x-post.json"
   compositionId="x-post"
   compositionSrc="compositions/x-post.html"
   title="X Post Card"
-  description="Animated X/Twitter post card overlay with engagement metrics"
   variables={[]}
   meta={{"duration":5,"width":1920,"height":1080,"category":"Social Overlays","badge":"Stable","codeLines":442}}
   attribution={{"path":"registry/blocks/x-post","tags":["social","overlay","twitter"]}}
@@ -477,7 +481,9 @@ That writes one file: `compositions/x-post.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -508,6 +514,4 @@ Tagged `social` `overlay` `twitter`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
index 0d284b94d3..5202bafa35 100644
--- a/docs/catalog/blocks/yt-comment-card.mdx
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Comment Cards</h1>
+  <p>Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/yt-comment-card.json"
   compositionId="yt-comment-card"
   compositionSrc="compositions/yt-comment-card.html"
   title="Comment Cards"
-  description="Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Social Overlays","badge":"Stable","codeLines":318}}
   attribution={{"path":"registry/blocks/yt-comment-card","tags":["social","comments","creator","overlay"]}}
@@ -353,7 +357,9 @@ That writes one file: `compositions/yt-comment-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -384,6 +390,4 @@ Tagged `social` `comments` `creator` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
index 0833b367ca..90c956756a 100644
--- a/docs/catalog/blocks/yt-lcd-background.mdx
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Scanline Board Background</h1>
+  <p>Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/yt-lcd-background.json"
   compositionId="yt-lcd-background"
   compositionSrc="compositions/yt-lcd-background.html"
   title="Scanline Board Background"
-  description="Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title"
   variables={[]}
   meta={{"duration":10,"width":1920,"height":1080,"category":"Texture","badge":"Stable","codeLines":306}}
   attribution={{"path":"registry/blocks/yt-lcd-background","tags":["background","texture","creator"]}}
@@ -341,7 +345,9 @@ That writes one file: `compositions/yt-lcd-background.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -372,6 +378,4 @@ Tagged `background` `texture` `creator`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
index 470ed87519..bb84272716 100644
--- a/docs/catalog/blocks/yt-logo-intro.mdx
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Logo Intro Sequence</h1>
+  <p>Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/yt-logo-intro.json"
   compositionId="yt-logo-intro"
   compositionSrc="compositions/yt-logo-intro.html"
   title="Logo Intro Sequence"
-  description="Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion"
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":251}}
   attribution={{"path":"registry/blocks/yt-logo-intro","tags":["logo","intro","creator"]}}
@@ -286,7 +290,9 @@ That writes one file: `compositions/yt-logo-intro.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -317,6 +323,4 @@ Tagged `logo` `intro` `creator`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index 85c5a57f38..b9f2ae7b22 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>YouTube Lower Third</h1>
+  <p>Animated YouTube subscribe lower third with avatar and channel info</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/yt-lower-third.json"
   compositionId="yt-lower-third"
   compositionSrc="compositions/yt-lower-third.html"
   title="YouTube Lower Third"
-  description="Animated YouTube subscribe lower third with avatar and channel info"
   variables={[]}
   meta={{"duration":4.5,"width":1920,"height":1080,"category":"Social Overlays","badge":"Stable","codeLines":242}}
   attribution={{"path":"registry/blocks/yt-lower-third","tags":["social","overlay","youtube"]}}
@@ -277,7 +281,9 @@ That writes `compositions/yt-lower-third.html`, plus 1 supporting file under `as
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -308,6 +314,4 @@ Tagged `social` `overlay` `youtube`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
index 59822f62da..a85af2fb91 100644
--- a/docs/catalog/blocks/yt-prism-title.mdx
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Chromatic Fringe Title</h1>
+  <p>Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/yt-prism-title.json"
   compositionId="yt-prism-title"
   compositionSrc="compositions/yt-prism-title.html"
   title="Chromatic Fringe Title"
-  description="Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift"
   variables={[]}
   meta={{"duration":6,"width":1920,"height":1080,"category":"Typography & Text","badge":"Stable","codeLines":204}}
   attribution={{"path":"registry/blocks/yt-prism-title","tags":["typography","title-card","creator"]}}
@@ -239,7 +243,9 @@ That writes one file: `compositions/yt-prism-title.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -270,6 +276,4 @@ Tagged `typography` `title-card` `creator`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
index 6a7108593c..1d9e3579b9 100644
--- a/docs/catalog/blocks/yt-vertical-fill.mdx
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vertical Media Filler</h1>
+  <p>Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/blocks/yt-vertical-fill.json"
   compositionId="yt-vertical-fill"
   compositionSrc="compositions/yt-vertical-fill.html"
   title="Vertical Media Filler"
-  description="Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)"
   variables={[]}
   meta={{"duration":8,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":228}}
   attribution={{"path":"registry/blocks/yt-vertical-fill","tags":["placeholder","vertical","media"]}}
@@ -263,7 +267,9 @@ That writes one file: `compositions/yt-vertical-fill.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Add it to your video
 
@@ -294,6 +300,4 @@ Tagged `placeholder` `vertical` `media`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/agent-cursor.mdx b/docs/catalog/components/agent-cursor.mdx
index b5505c1729..62f603745d 100644
--- a/docs/catalog/components/agent-cursor.mdx
+++ b/docs/catalog/components/agent-cursor.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Agent Cursor</h1>
+  <p>An AI agent operating a UI: a cursor with an accent name label that types out each step, clicks each target with a small ring, and ends on a check.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/agent-cursor.json"
   compositionId="agent-cursor"
   compositionSrc="compositions/components/agent-cursor.html"
   title="Agent Cursor"
-  description="An AI agent operating a UI: a cursor with an accent name label that types out each step, clicks each target with a small ring, and ends on a check."
   variables={[{"id":"agent_name","type":"string","role":"content","label":"Agent name","default":"Agent"},{"id":"steps","type":"string","role":"content","label":"Status steps","description":"Comma-separated: a reading line, one line per target, then a done line.","default":"Reading the page,Opening Settings,Turning on backups,Done"},{"id":"targets","type":"string","role":"layout","label":"Click targets","description":"Semicolon-separated x,y points in percent of the frame.","default":"25,47;76,30"},{"id":"accent","type":"color","role":"style","label":"Accent","default":"#0a84ff"}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":398}}
   attribution={{"path":"registry/components/agent-cursor","tags":["cursor","motion-primitive","agent","ai","status","click"]}}
@@ -433,7 +437,9 @@ That writes one file: `compositions/components/agent-cursor.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -475,6 +481,4 @@ Tagged `cursor` `motion-primitive` `agent` `ai` `status` `click`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/animated-bar-chart.mdx b/docs/catalog/components/animated-bar-chart.mdx
index 3fec6629c0..86f4d5cb34 100644
--- a/docs/catalog/components/animated-bar-chart.mdx
+++ b/docs/catalog/components/animated-bar-chart.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Animated Bar Chart</h1>
+  <p>A compact data card with deterministic bar growth and value callouts.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/animated-bar-chart.json"
   compositionId="animated-bar-chart"
   compositionSrc="compositions/components/animated-bar-chart.html"
   title="Animated Bar Chart"
-  description="A compact data card with deterministic bar growth and value callouts."
   variables={[]}
   meta={{"category":"Data","badge":"Stable","codeLines":98}}
   attribution={{"path":"registry/components/animated-bar-chart","tags":["data"]}}
@@ -133,7 +137,9 @@ That writes one file: `compositions/components/animated-bar-chart.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -153,6 +159,4 @@ Tagged `data`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/arc-motion-path.mdx b/docs/catalog/components/arc-motion-path.mdx
index e336aed913..6c8021e9dc 100644
--- a/docs/catalog/components/arc-motion-path.mdx
+++ b/docs/catalog/components/arc-motion-path.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Arc Motion Path</h1>
+  <p>A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/arc-motion-path.json"
   compositionId="arc-motion-path"
   compositionSrc="compositions/components/arc-motion-path.html"
   title="Arc Motion Path"
-  description="A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation."
   variables={[]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":99}}
   attribution={{"path":"registry/components/arc-motion-path","tags":["video-primitive","motionpath","gsap-plugin","hyperframes-native"]}}
@@ -134,7 +138,9 @@ That writes one file: `compositions/components/arc-motion-path.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -154,6 +160,4 @@ Tagged `video-primitive` `motionpath` `gsap-plugin` `hyperframes-native`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/ascii-render-pass.mdx b/docs/catalog/components/ascii-render-pass.mdx
index 26d8cf7047..e6858d4e27 100644
--- a/docs/catalog/components/ascii-render-pass.mdx
+++ b/docs/catalog/components/ascii-render-pass.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>ASCII Render Pass</h1>
+  <p>A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/ascii-render-pass.json"
   compositionId="ascii-render-pass"
   compositionSrc="compositions/components/ascii-render-pass.html"
   title="ASCII Render Pass"
-  description="A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine."
   variables={[{"id":"charset","type":"string","role":"style","label":"Charset","description":"Density ramp, dark to light. A leading space keeps dark cells empty.","default":" .:-=+*#%@"},{"id":"grid","type":"enum","role":"style","label":"Grid","description":"Final cell pitch the resolve lands on.","default":"med","options":[{"value":"coarse","label":"Coarse"},{"value":"med","label":"Medium"},{"value":"fine","label":"Fine"}]},{"id":"resolve_at","type":"number","role":"timing","label":"Resolve at","description":"Seconds from mount start when the coarse-to-fine resolve begins.","default":1.4,"min":0.6,"max":10,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Glyph ink: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the fine render holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Data","badge":"Stable","codeLines":485}}
   attribution={{"path":"registry/components/ascii-render-pass","tags":["motion-primitive","experiment","texture","ascii","quantize"]}}
@@ -520,7 +524,9 @@ That writes one file: `compositions/components/ascii-render-pass.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -563,6 +569,4 @@ Tagged `motion-primitive` `experiment` `texture` `ascii` `quantize`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/ascii-trail-reveal.mdx b/docs/catalog/components/ascii-trail-reveal.mdx
index 518910a09d..f4bef04215 100644
--- a/docs/catalog/components/ascii-trail-reveal.mdx
+++ b/docs/catalog/components/ascii-trail-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>ASCII Trail Reveal</h1>
+  <p>An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/ascii-trail-reveal.json"
   compositionId="ascii-trail-reveal"
   compositionSrc="compositions/components/ascii-trail-reveal.html"
   title="ASCII Trail Reveal"
-  description="An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel."
   variables={[{"id":"label","type":"string","role":"content","label":"Panel label","description":"Text shown on the revealed panel.","default":"The reveal"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the trail and revealed panel.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"trail_width","type":"enum","role":"layout","label":"Trail width","description":"Width of the cell reveal tail around the authored path.","default":"narrow","options":[{"value":"narrow","label":"Narrow"},{"value":"wide","label":"Wide"}]}]}
   meta={{"category":"Data","badge":"Stable","codeLines":380}}
   attribution={{"path":"registry/components/ascii-trail-reveal","tags":["motion-primitive","intro","reveal","ascii","trail","grid"]}}
@@ -415,7 +419,9 @@ That writes one file: `compositions/components/ascii-trail-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -456,6 +462,4 @@ Tagged `motion-primitive` `intro` `reveal` `ascii` `trail` `grid`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/aurora-drift.mdx b/docs/catalog/components/aurora-drift.mdx
index a30346d622..105621e8c2 100644
--- a/docs/catalog/components/aurora-drift.mdx
+++ b/docs/catalog/components/aurora-drift.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Aurora Drift</h1>
+  <p>Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/aurora-drift.json"
   compositionId="aurora-drift"
   compositionSrc="compositions/components/aurora-drift.html"
   title="Aurora Drift"
-  description="Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette."
   variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used to derive the aurora hues.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"mood","type":"enum","role":"style","label":"Mood","description":"Base luminance and aurora field strength.","default":"deep","options":[{"value":"deep","label":"Deep"},{"value":"bright","label":"Bright"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":235}}
   attribution={{"path":"registry/components/aurora-drift","tags":["motion-primitive","background","aurora","gradient","ambient","loopable"]}}
@@ -270,7 +274,9 @@ That writes one file: `compositions/components/aurora-drift.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -310,6 +316,4 @@ Tagged `motion-primitive` `background` `aurora` `gradient` `ambient` `loopable`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/avatar-cloud.mdx b/docs/catalog/components/avatar-cloud.mdx
index 7aa09befae..47fd367a2d 100644
--- a/docs/catalog/components/avatar-cloud.mdx
+++ b/docs/catalog/components/avatar-cloud.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Avatar Cloud</h1>
+  <p>Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/avatar-cloud.json"
   compositionId="avatar-cloud"
   compositionSrc="compositions/components/avatar-cloud.html"
   title="Avatar Cloud"
-  description="Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label."
   variables={[{"id":"avatarCount","type":"number","role":"layout","label":"Avatar count","description":"Number of lettermark avatars in the network cloud.","default":10,"min":6,"max":16,"step":1},{"id":"showLinks","type":"enum","role":"content","label":"Show links","description":"Show or hide the connecting network lines.","default":"yes","options":[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]},{"id":"label","type":"string","role":"content","label":"Proof label","description":"Community proof copy shown in the center hub.","default":"50k builders"}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":470}}
   attribution={{"path":"registry/components/avatar-cloud","tags":["effects","avatars","community","network","social-proof","prove"]}}
@@ -505,7 +509,9 @@ That writes one file: `compositions/components/avatar-cloud.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -546,6 +552,4 @@ Tagged `effects` `avatars` `community` `network` `social-proof` `prove`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/avatar-group-hover.mdx b/docs/catalog/components/avatar-group-hover.mdx
index 22fedeccf3..1b3f855d63 100644
--- a/docs/catalog/components/avatar-group-hover.mdx
+++ b/docs/catalog/components/avatar-group-hover.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Avatar Group Hover</h1>
+  <p>A distance-falloff avatar group lift with bouncy hover return</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/avatar-group-hover.json"
   compositionId="avatar-group-hover"
   compositionSrc="compositions/components/avatar-group-hover.html"
   title="Avatar Group Hover"
-  description="A distance-falloff avatar group lift with bouncy hover return"
   variables={[{"id":"size","type":"enum","role":"style","label":"Size","description":"Avatar diameter, with the initials scaling alongside it.","default":"standard","options":[{"value":"small","label":"Small"},{"value":"standard","label":"Standard"},{"value":"large","label":"Large"}]},{"id":"overlap","type":"enum","role":"style","label":"Overlap","description":"How far each avatar tucks under the one before it, as a share of its own diameter.","default":"standard","options":[{"value":"tight","label":"Tight"},{"value":"standard","label":"Standard"},{"value":"loose","label":"Loose"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour the avatar gradient resolves into.","default":"blue","options":[{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"},{"value":"green","label":"Green"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":99}}
   attribution={{"path":"registry/components/avatar-group-hover","tags":["video-primitive","transition-primitive","transitions-dev-port","avatar","hover"]}}
@@ -134,7 +138,9 @@ That writes one file: `compositions/components/avatar-group-hover.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -176,6 +182,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `avatar`
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/badge-pop.mdx b/docs/catalog/components/badge-pop.mdx
index 1ffa016734..7fc0276269 100644
--- a/docs/catalog/components/badge-pop.mdx
+++ b/docs/catalog/components/badge-pop.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Badge Pop</h1>
+  <p>A transitions.dev-inspired notification badge pop with elastic scale and count reveal</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/badge-pop.json"
   compositionId="badge-pop"
   compositionSrc="compositions/components/badge-pop.html"
   title="Badge Pop"
-  description="A transitions.dev-inspired notification badge pop with elastic scale and count reveal"
   variables={[{"id":"count","type":"string","role":"style","label":"Count","description":"Text shown inside the notification badge, up to four characters.","default":"3","maxLength":4},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour family of the badge.","default":"red","options":[{"value":"red","label":"Red"},{"value":"blue","label":"Blue"},{"value":"green","label":"Green"},{"value":"violet","label":"Violet"}]},{"id":"surface","type":"enum","role":"style","label":"Surface","description":"Chrome of the button and the badge ring: light for bright frames, dark for dark ones.","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":148}}
   attribution={{"path":"registry/components/badge-pop","tags":["video-primitive","transition-primitive","transitions-dev-port","badge","microinteraction"]}}
@@ -183,7 +187,9 @@ That writes one file: `compositions/components/badge-pop.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -225,6 +231,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `badge` `
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/beat-accent.mdx b/docs/catalog/components/beat-accent.mdx
index e8e964e6bd..787deb1ff9 100644
--- a/docs/catalog/components/beat-accent.mdx
+++ b/docs/catalog/components/beat-accent.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Beat Accent</h1>
+  <p>A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/beat-accent.json"
   compositionId="beat-accent"
   compositionSrc="compositions/components/beat-accent.html"
   title="Beat Accent"
-  description="A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay."
   variables={[{"id":"text","type":"string","role":"content","label":"Accent text","description":"Word or short label emphasized by the beat hit.","default":"BOOM"},{"id":"flashColor","type":"enum","role":"style","label":"Flash color","description":"Token-backed accent tone used by the radial flash.","default":"accent","options":[{"value":"accent","label":"Accent"},{"value":"soft","label":"Soft accent"},{"value":"bright","label":"Bright accent"}]},{"id":"intensity","type":"number","role":"timing","label":"Intensity","description":"Strength of the scale pulse, flash, and shake.","default":1,"min":0.5,"max":2,"step":0.1}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":324}}
   attribution={{"path":"registry/components/beat-accent","tags":["motion-primitive","effects","burst","sting","emphasize","impact"]}}
@@ -359,7 +363,9 @@ That writes one file: `compositions/components/beat-accent.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -400,6 +406,4 @@ Tagged `motion-primitive` `effects` `burst` `sting` `emphasize` `impact`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/beat-pulse-background.mdx b/docs/catalog/components/beat-pulse-background.mdx
index 579424595c..d0ad6dd9ab 100644
--- a/docs/catalog/components/beat-pulse-background.mdx
+++ b/docs/catalog/components/beat-pulse-background.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Beat Pulse Background</h1>
+  <p>An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/beat-pulse-background.json"
   compositionId="beat-pulse-background"
   compositionSrc="compositions/components/beat-pulse-background.html"
   title="Beat Pulse Background"
-  description="An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid."
   variables={[{"id":"beats","type":"string","role":"timing","label":"Beats","description":"Comma-separated beat times in seconds. Invalid entries are ignored and numeric values are clamped to the composition duration.","default":"0.5,1.0,1.5,2.0,2.5,3.0,3.5"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the pulsing glow.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"intensity","type":"enum","role":"style","label":"Intensity","description":"Strength of the glow and saturation pulse.","default":"subtle","options":[{"value":"subtle","label":"Subtle"},{"value":"club","label":"Club"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":208}}
   attribution={{"path":"registry/components/beat-pulse-background","tags":["motion-primitive","background","beat","pulse","rhythmic","reactive"]}}
@@ -243,7 +247,9 @@ That writes one file: `compositions/components/beat-pulse-background.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -284,6 +290,4 @@ Tagged `motion-primitive` `background` `beat` `pulse` `rhythmic` `reactive`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/beat-timeline.mdx b/docs/catalog/components/beat-timeline.mdx
index a875b86802..0379c5cd26 100644
--- a/docs/catalog/components/beat-timeline.mdx
+++ b/docs/catalog/components/beat-timeline.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Beat Timeline</h1>
+  <p>A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/beat-timeline.json"
   compositionId="beat-timeline"
   compositionSrc="compositions/components/beat-timeline.html"
   title="Beat Timeline"
-  description="A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group."
   variables={[{"id":"beatCount","type":"number","role":"content","label":"Beat count","description":"Number of beat rows in the sequence.","default":4,"min":2,"max":6,"step":1},{"id":"interval","type":"number","role":"layout","label":"Interval","description":"Base time between consecutive beat markers.","default":0.6,"min":0.2,"max":2,"step":0.05,"unit":"s"},{"id":"labels","type":"string","role":"content","label":"Labels","description":"Comma-separated beat titles, one per beat. Extra entries are ignored and missing entries fall back to Beat N.","default":"One,Two,Three,Four"}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":288}}
   attribution={{"path":"registry/components/beat-timeline","tags":["orchestration","transitions","sequencing","bridge","timeline"]}}
@@ -323,7 +327,9 @@ That writes one file: `compositions/components/beat-timeline.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -364,6 +370,4 @@ Tagged `orchestration` `transitions` `sequencing` `bridge` `timeline`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/before-after-wipe.mdx b/docs/catalog/components/before-after-wipe.mdx
index b4c709b924..19ff7ed085 100644
--- a/docs/catalog/components/before-after-wipe.mdx
+++ b/docs/catalog/components/before-after-wipe.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Before After Wipe</h1>
+  <p>Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/before-after-wipe.json"
   compositionId="before-after-wipe"
   compositionSrc="compositions/components/before-after-wipe.html"
   title="Before After Wipe"
-  description="Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty."
   variables={[{"id":"label_a","type":"string","role":"content","label":"Before label","description":"Chip shown on the base before panel. Blank hides the chip.","default":"Before"},{"id":"label_b","type":"string","role":"content","label":"After label","description":"Chip shown on the revealed after panel. Blank hides the chip.","default":"After"},{"id":"rest_split","type":"number","role":"layout","label":"Resting split","description":"Divider resting position after the wipe lands.","default":50,"min":0,"max":100,"step":1,"unit":"%"},{"id":"wipe_at","type":"number","role":"timing","label":"Wipe start","description":"Seconds after mount start when the wipe begins.","default":0.25,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Divider handle and after chip color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the final comparison frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":478}}
   attribution={{"path":"registry/components/before-after-wipe","tags":["prop","ui-props","compare","comparison","split-screen","holdable","before-after","wipe","slots"]}}
@@ -513,7 +517,9 @@ That writes one file: `compositions/components/before-after-wipe.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -557,6 +563,4 @@ Tagged `prop` `ui-props` `compare` `comparison` `split-screen` `holdable` `befor
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/blur-in.mdx b/docs/catalog/components/blur-in.mdx
index 4920f3410c..a342c225b3 100644
--- a/docs/catalog/components/blur-in.mdx
+++ b/docs/catalog/components/blur-in.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Blur In</h1>
+  <p>An Operator Black word-level content reveal that resolves its own text from controlled blur</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/blur-in.json"
   compositionId="blur-in"
   compositionSrc="compositions/components/blur-in.html"
   title="Blur In"
-  description="An Operator Black word-level content reveal that resolves its own text from controlled blur"
   variables={[{"id":"size","type":"number","role":"style","label":"Size","description":"Type size of the revealed words in pixels; the gap between words scales with it.","default":52,"min":24,"max":120,"step":2,"unit":"px"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: strong for headlines, muted for supporting lines, accent for the brand green.","default":"strong","options":[{"value":"strong","label":"Strong"},{"value":"muted","label":"Muted"},{"value":"accent","label":"Accent"}]},{"id":"align","type":"enum","role":"style","label":"Align","description":"Horizontal alignment of the words in the frame.","default":"left","options":[{"value":"left","label":"Left"},{"value":"center","label":"Center"},{"value":"right","label":"Right"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":239}}
   attribution={{"path":"registry/components/blur-in","tags":["video-primitive","blur-in","text-effect"]}}
@@ -274,7 +278,9 @@ That writes one file: `compositions/components/blur-in.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -316,6 +322,4 @@ Tagged `video-primitive` `blur-in` `text-effect`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/blur-out-up.mdx b/docs/catalog/components/blur-out-up.mdx
index 05e1821a31..beaaa57f8e 100644
--- a/docs/catalog/components/blur-out-up.mdx
+++ b/docs/catalog/components/blur-out-up.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Blur Out Up</h1>
+  <p>Words arrive clean and depart upward with increasing blur for airy exits.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/blur-out-up.json"
   compositionId="blur-out-up"
   compositionSrc="compositions/components/blur-out-up.html"
   title="Blur Out Up"
-  description="Words arrive clean and depart upward with increasing blur for airy exits."
   variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Where the offset the timeline drives points.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"},{"value":"left","label":"Left"},{"value":"right","label":"Right"}]},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Scales the travel offset, so the words cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"blur","type":"enum","role":"style","label":"Blur","description":"Scales the blur radius the timeline drives, from a light haze to a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":110}}
   attribution={{"path":"registry/components/blur-out-up","tags":["motion-primitive","typography"]}}
@@ -145,7 +149,9 @@ That writes one file: `compositions/components/blur-out-up.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -188,6 +194,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/bottom-up-letters.mdx b/docs/catalog/components/bottom-up-letters.mdx
index 9c552ab3b2..87e66058fa 100644
--- a/docs/catalog/components/bottom-up-letters.mdx
+++ b/docs/catalog/components/bottom-up-letters.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Bottom Up Letters</h1>
+  <p>Splits text into letters and reveals each glyph from below with deterministic staggered timing</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/bottom-up-letters.json"
   compositionId="bottom-up-letters"
   compositionSrc="compositions/components/bottom-up-letters.html"
   title="Bottom Up Letters"
-  description="Splits text into letters and reveals each glyph from below with deterministic staggered timing"
   variables={[{"id":"unit","type":"enum","role":"content","label":"Split unit","description":"What each animated span holds. Letter staggers glyph by glyph, word keeps whole words intact.","default":"letter","options":[{"value":"letter","label":"Letter"},{"value":"word","label":"Word"}]},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Where each span starts. Up starts below the baseline and rises, down starts above and drops.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"travel","type":"enum","role":"motion","label":"Travel","description":"How far each span starts from its resting position, from 0.45em to 1.5em.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":105}}
   attribution={{"path":"registry/components/bottom-up-letters","tags":["motion-primitive","text","letters","reveal"]}}
@@ -140,7 +144,9 @@ That writes one file: `compositions/components/bottom-up-letters.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -182,6 +188,4 @@ Tagged `motion-primitive` `text` `letters` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/browser-device-stage.mdx b/docs/catalog/components/browser-device-stage.mdx
index f50c97e187..7d68ac2507 100644
--- a/docs/catalog/components/browser-device-stage.mdx
+++ b/docs/catalog/components/browser-device-stage.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Browser Device Stage</h1>
+  <p>A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/browser-device-stage.json"
   compositionId="browser-device-stage"
   compositionSrc="compositions/components/browser-device-stage.html"
   title="Browser Device Stage"
-  description="A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap."
   variables={[{"id":"chrome","type":"enum","role":"content","label":"Chrome","description":"Device frame drawn around the screen slot.","default":"browser","options":[{"value":"browser","label":"Browser"},{"value":"window","label":"Window"},{"value":"phone","label":"Phone"}]},{"id":"title","type":"string","role":"content","label":"Title","description":"Address pill text (browser) or title bar text (window).","default":"app.example.com"},{"id":"swap_at","type":"number","role":"content","label":"Swap at","description":"Seconds from mount start to swap to the second screen. 0 disables the swap.","default":0,"min":0,"max":30,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Token the skeleton accent elements ride.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. None holds the final frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":648}}
   attribution={{"path":"registry/components/browser-device-stage","tags":["stage","product-demo","device","browser","phone","slot","chrome"]}}
@@ -683,7 +687,9 @@ That writes one file: `compositions/components/browser-device-stage.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -726,6 +732,4 @@ Tagged `stage` `product-demo` `device` `browser` `phone` `slot` `chrome`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/camera-rig-depth-stack.mdx b/docs/catalog/components/camera-rig-depth-stack.mdx
index 4855e0b4be..55f9a49d23 100644
--- a/docs/catalog/components/camera-rig-depth-stack.mdx
+++ b/docs/catalog/components/camera-rig-depth-stack.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Camera Rig Depth Stack</h1>
+  <p>A 3D camera-rig-style card stack with depth, parallax, and focus shift.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/camera-rig-depth-stack.json"
   compositionId="camera-rig-depth-stack"
   compositionSrc="compositions/components/camera-rig-depth-stack.html"
   title="Camera Rig Depth Stack"
-  description="A 3D camera-rig-style card stack with depth, parallax, and focus shift."
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":63}}
   attribution={{"path":"registry/components/camera-rig-depth-stack","tags":["advanced-motion","hyperframes-native"]}}
@@ -98,7 +102,9 @@ That writes one file: `compositions/components/camera-rig-depth-stack.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -118,6 +124,4 @@ Tagged `advanced-motion` `hyperframes-native`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/camera-scan-gate.mdx b/docs/catalog/components/camera-scan-gate.mdx
index 670d1d5895..35dc228a31 100644
--- a/docs/catalog/components/camera-scan-gate.mdx
+++ b/docs/catalog/components/camera-scan-gate.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Camera Scan Gate</h1>
+  <p>A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/camera-scan-gate.json"
   compositionId="camera-scan-gate"
   compositionSrc="compositions/components/camera-scan-gate.html"
   title="Camera Scan Gate"
-  description="A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat."
   variables={[{"id":"scanColor","type":"string","role":"style","label":"Scan color","description":"Any CSS color value used by the scan line and recognition glow.","default":"var(--brand)"},{"id":"targetLabel","type":"string","role":"content","label":"Target label","description":"Confirmation label revealed at recognition lock. Blank hides the line.","default":"Verified"},{"id":"sweepSpeed","type":"number","role":"timing","label":"Sweep speed","description":"Speed multiplier for the scan sweep phase only.","default":1,"min":0.8,"max":1.6,"step":0.1,"unit":"x"}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":522}}
   attribution={{"path":"registry/components/camera-scan-gate","tags":["prop","ui-props","camera","qr","scan","recognition","interaction","demonstrate"]}}
@@ -557,7 +561,9 @@ That writes one file: `compositions/components/camera-scan-gate.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -598,6 +604,4 @@ Tagged `prop` `ui-props` `camera` `qr` `scan` `recognition` `interaction` `demon
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/camera-shake.mdx b/docs/catalog/components/camera-shake.mdx
index 30ebea095d..f28c67b652 100644
--- a/docs/catalog/components/camera-shake.mdx
+++ b/docs/catalog/components/camera-shake.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Camera Shake</h1>
+  <p>Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/camera-shake.json"
   compositionId="camera-shake"
   compositionSrc="compositions/components/camera-shake.html"
   title="Camera Shake"
-  description="Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe"
   variables={[{"id":"shakeProfile","type":"enum","label":"Shake profile","default":"handheld-normal-mild","options":[{"value":"handheld-normal-mild","label":"Handheld - normal lens, mild"},{"value":"handheld-normal-strong","label":"Handheld - normal lens, strong"},{"value":"handheld-normal-extreme","label":"Handheld - normal lens, extreme"},{"value":"handheld-wideangle-mild","label":"Handheld - wide angle, mild"},{"value":"handheld-wideangle-strong","label":"Handheld - wide angle, strong"},{"value":"handheld-tele-mild","label":"Handheld - telephoto, mild"},{"value":"handheld-tele-strong","label":"Handheld - telephoto, strong"},{"value":"rig-6d-shake","label":"Rig - 6D shake (engine buzz)"},{"value":"rig-6d-wobble","label":"Rig - 6D wobble"}]},{"id":"shakeIntensity","type":"number","label":"Intensity multiplier","default":1,"min":0,"max":3,"step":0.05},{"id":"shakeFrequency","type":"number","label":"Frequency multiplier","default":1,"min":0.1,"max":4,"step":0.05},{"id":"shakeRotation","type":"boolean","label":"Include rotation (roll + tilt/pan)","default":true}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":809}}
   attribution={{"path":"registry/components/camera-shake","tags":["camera","shake","handheld","effect","cinematic"]}}
@@ -844,7 +848,9 @@ That writes one file: `compositions/components/camera-shake.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -886,6 +892,4 @@ Tagged `camera` `shake` `handheld` `effect` `cinematic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-blend-difference.mdx b/docs/catalog/components/caption-blend-difference.mdx
index c47f389941..9db2d84d53 100644
--- a/docs/catalog/components/caption-blend-difference.mdx
+++ b/docs/catalog/components/caption-blend-difference.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Blend Difference</h1>
+  <p>Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-blend-difference.json"
   compositionId="caption-blend-difference"
   compositionSrc="compositions/components/caption-blend-difference.html"
   title="Blend Difference"
-  description="Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
   variables={[]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":83}}
   attribution={{"path":"registry/components/caption-blend-difference","tags":["text","text-effect","effect","blend-mode","contrast","inversion"]}}
@@ -118,7 +122,9 @@ That writes one file: `compositions/components/caption-blend-difference.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -138,6 +144,4 @@ Tagged `text` `text-effect` `effect` `blend-mode` `contrast` `inversion`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-camera-follow.mdx b/docs/catalog/components/caption-camera-follow.mdx
index 7c2e1114cf..04889dce6d 100644
--- a/docs/catalog/components/caption-camera-follow.mdx
+++ b/docs/catalog/components/caption-camera-follow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Camera Follow Captions</h1>
+  <p>One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-camera-follow.json"
   compositionId="caption-camera-follow"
   compositionSrc="compositions/components/caption-camera-follow.html"
   title="Camera Follow Captions"
-  description="One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small."
   variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour of the highlighted words. gold is the original.","default":"gold","options":[{"value":"gold","label":"Gold"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"framing","type":"enum","role":"style","label":"Framing","description":"Air the camera leaves around the written block, so the words land larger or smaller in frame.","default":"standard","options":[{"value":"tight","label":"Tight"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"smear","type":"enum","role":"style","label":"Smear","description":"Scales the radial motion blur each camera move carries, from none to a heavy streak.","default":"standard","options":[{"value":"off","label":"Off"},{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]}]}
   meta={{"category":"Captions","badge":"Stable","codeLines":431}}
   attribution={{"path":"registry/components/caption-camera-follow","tags":["captions","caption-style","camera","typography","motion-primitive","portrait"]}}
@@ -466,7 +470,9 @@ That writes one file: `compositions/components/caption-camera-follow.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -507,6 +513,4 @@ Tagged `captions` `caption-style` `camera` `typography` `motion-primitive` `port
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index 39baf9cd46..38ecee1203 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Clip Wipe</h1>
+  <p>Left-to-right clip-path wipe reveal per word</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-clip-wipe.json"
   compositionId="caption-clip-wipe"
   compositionSrc="compositions/components/caption-clip-wipe.html"
   title="Clip Wipe"
-  description="Left-to-right clip-path wipe reveal per word"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":226}}
   attribution={{"path":"registry/components/caption-clip-wipe","tags":["captions","caption-style","wipe","clip-path","reveal"]}}
@@ -261,7 +265,9 @@ That writes one file: `compositions/components/caption-clip-wipe.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -280,6 +286,4 @@ Tagged `captions` `caption-style` `wipe` `clip-path` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index ce7ae0e495..8af2049e57 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Editorial Emphasis</h1>
+  <p>Dual-font system with dramatic size contrast for emphasis words</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-editorial-emphasis.json"
   compositionId="caption-editorial-emphasis"
   compositionSrc="compositions/components/caption-editorial-emphasis.html"
   title="Editorial Emphasis"
-  description="Dual-font system with dramatic size contrast for emphasis words"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":412}}
   attribution={{"path":"registry/components/caption-editorial-emphasis","tags":["captions","caption-style","editorial","typography","emphasis"]}}
@@ -447,7 +451,9 @@ That writes one file: `compositions/components/caption-editorial-emphasis.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -466,6 +472,4 @@ Tagged `captions` `caption-style` `editorial` `typography` `emphasis`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index 8fa6d093b0..082fe3250d 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Emoji Pop</h1>
+  <p>Emoji integration with stroked text and horizontal squeeze entrance</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-emoji-pop.json"
   compositionId="caption-emoji-pop"
   compositionSrc="compositions/components/caption-emoji-pop.html"
   title="Emoji Pop"
-  description="Emoji integration with stroked text and horizontal squeeze entrance"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":467}}
   attribution={{"path":"registry/components/caption-emoji-pop","tags":["captions","caption-style","emoji","social"]}}
@@ -502,7 +506,9 @@ That writes one file: `compositions/components/caption-emoji-pop.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -521,6 +527,4 @@ Tagged `captions` `caption-style` `emoji` `social`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index 37d1db7ec2..7fbb07d703 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Glitch RGB</h1>
+  <p>RGB chromatic aberration with CRT scanline overlay</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-glitch-rgb.json"
   compositionId="caption-glitch-rgb"
   compositionSrc="compositions/components/caption-glitch-rgb.html"
   title="Glitch RGB"
-  description="RGB chromatic aberration with CRT scanline overlay"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":329}}
   attribution={{"path":"registry/components/caption-glitch-rgb","tags":["captions","caption-style","glitch","cyber","tech"]}}
@@ -364,7 +368,9 @@ That writes one file: `compositions/components/caption-glitch-rgb.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -383,6 +389,4 @@ Tagged `captions` `caption-style` `glitch` `cyber` `tech`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index 62b34c6036..9c9ca43e75 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Gradient Fill</h1>
+  <p>Gradient-clipped text with elastic bounce entrance</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-gradient-fill.json"
   compositionId="caption-gradient-fill"
   compositionSrc="compositions/components/caption-gradient-fill.html"
   title="Gradient Fill"
-  description="Gradient-clipped text with elastic bounce entrance"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":219}}
   attribution={{"path":"registry/components/caption-gradient-fill","tags":["captions","caption-style","gradient","colorful"]}}
@@ -254,7 +258,9 @@ That writes one file: `compositions/components/caption-gradient-fill.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -273,6 +279,4 @@ Tagged `captions` `caption-style` `gradient` `colorful`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
index 45448e89de..59f2bfbbe7 100644
--- a/docs/catalog/components/caption-highlight.mdx
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Highlight</h1>
+  <p>Red background sweep behind each active word, TikTok-style</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-highlight.json"
   compositionId="caption-highlight"
   compositionSrc="compositions/components/caption-highlight.html"
   title="Highlight"
-  description="Red background sweep behind each active word, TikTok-style"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":261}}
   attribution={{"path":"registry/components/caption-highlight","tags":["captions","caption-style","highlight","social","tiktok"]}}
@@ -296,7 +300,9 @@ That writes one file: `compositions/components/caption-highlight.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -315,6 +321,4 @@ Tagged `captions` `caption-style` `highlight` `social` `tiktok`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index a1405142c1..91ba89b5aa 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Kinetic Slam</h1>
+  <p>Full-screen single-word display with alternating entrance directions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-kinetic-slam.json"
   compositionId="caption-kinetic-slam"
   compositionSrc="compositions/components/caption-kinetic-slam.html"
   title="Kinetic Slam"
-  description="Full-screen single-word display with alternating entrance directions"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":194}}
   attribution={{"path":"registry/components/caption-kinetic-slam","tags":["captions","caption-style","kinetic","typography","slam"]}}
@@ -229,7 +233,9 @@ That writes one file: `compositions/components/caption-kinetic-slam.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -248,6 +254,4 @@ Tagged `captions` `caption-style` `kinetic` `typography` `slam`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index 5361f55010..43e46ff481 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Matrix Decode</h1>
+  <p>Character scramble animation before text reveal</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-matrix-decode.json"
   compositionId="caption-matrix-decode"
   compositionSrc="compositions/components/caption-matrix-decode.html"
   title="Matrix Decode"
-  description="Character scramble animation before text reveal"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":254}}
   attribution={{"path":"registry/components/caption-matrix-decode","tags":["captions","caption-style","matrix","scramble","decode"]}}
@@ -289,7 +293,9 @@ That writes one file: `compositions/components/caption-matrix-decode.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -308,6 +314,4 @@ Tagged `captions` `caption-style` `matrix` `scramble` `decode`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index 2e5fca0de9..b807e0cdb8 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Neon Accent</h1>
+  <p>Multi-color neon glow accents with wiggle drift animation</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-neon-accent.json"
   compositionId="caption-neon-accent"
   compositionSrc="compositions/components/caption-neon-accent.html"
   title="Neon Accent"
-  description="Multi-color neon glow accents with wiggle drift animation"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":514}}
   attribution={{"path":"registry/components/caption-neon-accent","tags":["captions","caption-style","neon","glow","accent"]}}
@@ -549,7 +553,9 @@ That writes one file: `compositions/components/caption-neon-accent.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -568,6 +574,4 @@ Tagged `captions` `caption-style` `neon` `glow` `accent`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index 3a4fe4d6a2..ef0d6a92f0 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Neon Glow</h1>
+  <p>Cyan and magenta neon glow with keyword accent colors</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-neon-glow.json"
   compositionId="caption-neon-glow"
   compositionSrc="compositions/components/caption-neon-glow.html"
   title="Neon Glow"
-  description="Cyan and magenta neon glow with keyword accent colors"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":216}}
   attribution={{"path":"registry/components/caption-neon-glow","tags":["captions","caption-style","neon","glow","gaming"]}}
@@ -251,7 +255,9 @@ That writes one file: `compositions/components/caption-neon-glow.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -270,6 +276,4 @@ Tagged `captions` `caption-style` `neon` `glow` `gaming`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index 2d993c9283..6249bba456 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Parallax Layers</h1>
+  <p>Behind-subject 3D text layering with vertical stretch effect</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-parallax-layers.json"
   compositionId="caption-parallax-layers"
   compositionSrc="compositions/components/caption-parallax-layers.html"
   title="Parallax Layers"
-  description="Behind-subject 3D text layering with vertical stretch effect"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":355}}
   attribution={{"path":"registry/components/caption-parallax-layers","tags":["captions","caption-style","parallax","3d","depth"]}}
@@ -390,7 +394,9 @@ That writes one file: `compositions/components/caption-parallax-layers.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -409,6 +415,4 @@ Tagged `captions` `caption-style` `parallax` `3d` `depth`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index ad5566c145..0830976a7b 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Particle Burst</h1>
+  <p>Keyword words trigger colored particle explosions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-particle-burst.json"
   compositionId="caption-particle-burst"
   compositionSrc="compositions/components/caption-particle-burst.html"
   title="Particle Burst"
-  description="Keyword words trigger colored particle explosions"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":296}}
   attribution={{"path":"registry/components/caption-particle-burst","tags":["captions","caption-style","particles","burst","effects"]}}
@@ -331,7 +335,9 @@ That writes one file: `compositions/components/caption-particle-burst.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -350,6 +356,4 @@ Tagged `captions` `caption-style` `particles` `burst` `effects`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index eba1b2040e..612076c2f7 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Pill Karaoke</h1>
+  <p>Pill-shaped container with per-word karaoke color highlight</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-pill-karaoke.json"
   compositionId="caption-pill-karaoke"
   compositionSrc="compositions/components/caption-pill-karaoke.html"
   title="Pill Karaoke"
-  description="Pill-shaped container with per-word karaoke color highlight"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":382}}
   attribution={{"path":"registry/components/caption-pill-karaoke","tags":["captions","caption-style","karaoke","pill"]}}
@@ -417,7 +421,9 @@ That writes one file: `compositions/components/caption-pill-karaoke.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -436,6 +442,4 @@ Tagged `captions` `caption-style` `karaoke` `pill`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-texture.mdx b/docs/catalog/components/caption-texture.mdx
index 8cbfd487d9..5240f09ca8 100644
--- a/docs/catalog/components/caption-texture.mdx
+++ b/docs/catalog/components/caption-texture.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Texture</h1>
+  <p>Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-texture.json"
   compositionId="caption-texture"
   compositionSrc="compositions/components/caption-texture.html"
   title="Texture"
-  description="Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable"
   variables={[{"id":"texture","type":"string","default":"lava"}]}
   meta={{"category":"Captions","badge":"Stable","codeLines":210}}
   attribution={{"path":"registry/components/caption-texture","tags":["captions","caption-style","texture","mask"]}}
@@ -245,7 +249,9 @@ That writes `compositions/components/caption-texture.html`, plus 6 supporting fi
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -284,6 +290,4 @@ Tagged `captions` `caption-style` `texture` `mask`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index e84261c891..facec68b20 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Weight Shift</h1>
+  <p>Elegant font-weight transition between caption lines</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caption-weight-shift.json"
   compositionId="caption-weight-shift"
   compositionSrc="compositions/components/caption-weight-shift.html"
   title="Weight Shift"
-  description="Elegant font-weight transition between caption lines"
   variables={[]}
   meta={{"category":"Captions","badge":"Stable","codeLines":397}}
   attribution={{"path":"registry/components/caption-weight-shift","tags":["captions","caption-style","minimal","typography"]}}
@@ -432,7 +436,9 @@ That writes one file: `compositions/components/caption-weight-shift.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -451,6 +457,4 @@ Tagged `captions` `caption-style` `minimal` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/card-resize.mdx b/docs/catalog/components/card-resize.mdx
index e8d26532be..51a6d39a82 100644
--- a/docs/catalog/components/card-resize.mdx
+++ b/docs/catalog/components/card-resize.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Card Resize</h1>
+  <p>A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/card-resize.json"
   compositionId="card-resize"
   compositionSrc="compositions/components/card-resize.html"
   title="Card Resize"
-  description="A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel"
   variables={[{"id":"surface","type":"enum","role":"style","label":"Surface","description":"Card colour scheme: paper is the original white card, ink is a dark card for dark frames.","default":"paper","options":[{"value":"paper","label":"Paper"},{"value":"ink","label":"Ink"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Treatment of the media thumbnail: a plain plate, a hatched surface, or an image plate with a horizon-and-disc glyph.","default":"ocean","options":[{"value":"ocean","label":"Ocean"},{"value":"forest","label":"Forest"},{"value":"ember","label":"Ember"}]},{"id":"elevation","type":"enum","role":"style","label":"Elevation","description":"How far the card lifts off the frame, from a contact shadow to a deep drop.","default":"raised","options":[{"value":"flat","label":"Flat"},{"value":"raised","label":"Raised"},{"value":"floating","label":"Floating"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":176}}
   attribution={{"path":"registry/components/card-resize","tags":["video-primitive","transition-primitive","transitions-dev-port","card","layout"]}}
@@ -211,7 +215,9 @@ That writes one file: `compositions/components/card-resize.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -253,6 +259,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `card` `l
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/caret-swap.mdx b/docs/catalog/components/caret-swap.mdx
index e0fa5dba7c..838a4ce497 100644
--- a/docs/catalog/components/caret-swap.mdx
+++ b/docs/catalog/components/caret-swap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Caret Swap</h1>
+  <p>A gradient caret expands over one phrase, collapses to the left, then types its replacement with a blinking caret.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/caret-swap.json"
   compositionId="caret-swap"
   compositionSrc="compositions/components/caret-swap/caret-swap.html"
   title="Caret Swap"
-  description="A gradient caret expands over one phrase, collapses to the left, then types its replacement with a blinking caret."
   variables={[{"id":"from_text","type":"string","role":"content","label":"From text","description":"The phrase covered by the expanding caret.","default":"Executing it?"},{"id":"to_text","type":"string","role":"content","label":"To text","description":"The replacement phrase, typed one character at a time.","default":"That's where everyone quits"},{"id":"font_size","type":"number","role":"style","label":"Font size","description":"Maximum size in pixels. Both phrases shrink together to fit the host.","default":72,"min":36,"max":160,"step":2,"unit":"px"},{"id":"font_weight","type":"enum","role":"style","label":"Font weight","description":"Weight used by both phrases. Every option is included in the bundled Geist font.","default":"400","options":[{"value":"400","label":"Regular"},{"value":"500","label":"Medium"},{"value":"600","label":"Semibold"},{"value":"700","label":"Bold"}]},{"id":"color","type":"color","role":"style","label":"Text color","description":"Color of both phrases.","default":"#171717"},{"id":"caret_color","type":"color","role":"style","label":"Caret top","description":"Top color of the caret gradient.","default":"#FF4DAA"},{"id":"caret_color_end","type":"color","role":"style","label":"Caret bottom","description":"Bottom color of the caret gradient.","default":"#8A5CF6"}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":355}}
   attribution={{"author":"Remocn","authorUrl":"https://github.com/Remocn/remocn","path":"registry/components/caret-swap","tags":["motion-primitive","text-effects","typography","swap","typewriter","remocn-port"]}}
@@ -390,7 +394,9 @@ That writes `compositions/components/caret-swap/caret-swap.html`, plus 2 support
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -437,6 +443,4 @@ Created by [Remocn](https://github.com/Remocn/remocn).
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/char-slam-explode.mdx b/docs/catalog/components/char-slam-explode.mdx
index 6e41888684..72f3f554bb 100644
--- a/docs/catalog/components/char-slam-explode.mdx
+++ b/docs/catalog/components/char-slam-explode.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Char Slam Explode</h1>
+  <p>Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/char-slam-explode.json"
   compositionId="char-slam-explode"
   compositionSrc="compositions/components/char-slam-explode.html"
   title="Char Slam Explode"
-  description="Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake."
   variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text split into glyphs for the scatter and slam.","default":"Impact"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Headline and glow color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"spread","type":"enum","role":"motion","label":"Spread","description":"Distance and rotation of the scattered glyphs.","default":"tight","options":[{"value":"tight","label":"Tight"},{"value":"wild","label":"Wild"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":338}}
   attribution={{"path":"registry/components/char-slam-explode","tags":["motion-primitive","typography","text-treatment","scatter","slam","impact"]}}
@@ -373,7 +377,9 @@ That writes one file: `compositions/components/char-slam-explode.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -414,6 +420,4 @@ Tagged `motion-primitive` `typography` `text-treatment` `scatter` `slam` `impact
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/chart-story.mdx b/docs/catalog/components/chart-story.mdx
index 0902148bfd..6269517fc9 100644
--- a/docs/catalog/components/chart-story.mdx
+++ b/docs/catalog/components/chart-story.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Chart Story</h1>
+  <p>One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/chart-story.json"
   compositionId="chart-story"
   compositionSrc="compositions/components/chart-story.html"
   title="Chart Story"
-  description="One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum."
   variables={[{"id":"type","type":"enum","role":"content","label":"Chart type","description":"Chart form the data builds into.","default":"bars","options":[{"value":"bars","label":"Bars"},{"value":"line","label":"Line"},{"value":"donut","label":"Donut"},{"value":"progress","label":"Progress"}]},{"id":"data","type":"string","role":"content","label":"Data","description":"Comma-separated numbers; the chart lands exactly on these values.","default":"12, 28, 45, 64"},{"id":"labels","type":"string","role":"content","label":"Labels","description":"Comma-separated labels, one per datum.","default":"Q1, Q2, Q3, Q4"},{"id":"emphasize","type":"number","role":"content","label":"Emphasize","description":"Index of the datum that takes the accent and the value callout. Clamped to the data range.","default":3,"step":1},{"id":"unit","type":"string","role":"content","label":"Unit","description":"Suffix appended to every displayed value.","default":"%"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color used by the emphasized datum and its callout.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. Proof stats end on the still hold, so the default is none.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Data","badge":"Stable","codeLines":739}}
   attribution={{"path":"registry/components/chart-story","tags":["motion-primitive","proof","stats","chart","bars","line","donut","progress","deterministic"]}}
@@ -774,7 +778,9 @@ That writes one file: `compositions/components/chart-story.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -819,6 +825,4 @@ Tagged `motion-primitive` `proof` `stats` `chart` `bars` `line` `donut` `progres
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/chat-message.mdx b/docs/catalog/components/chat-message.mdx
index 37adf97444..77cb032aea 100644
--- a/docs/catalog/components/chat-message.mdx
+++ b/docs/catalog/components/chat-message.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Chat Message</h1>
+  <p>One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/chat-message.json"
   compositionId="chat-message"
   compositionSrc="compositions/components/chat-message.html"
   title="Chat Message"
-  description="One message arrives on the measured entry - scale 0.75, 0.12s, growing from its sender's corner. The type is an enum switched like marker-highlight's style: a received or sent bubble with a real tail, a large emoji row, an image, or a link card with title and domain. The atom that chat-thread builds conversations from"
   variables={[{"id":"type","type":"enum","role":"content","label":"Type","description":"Which message form arrives.","default":"sent","options":[{"value":"recv","label":"Received"},{"value":"sent","label":"Sent"},{"value":"emoji","label":"Emoji"},{"value":"img","label":"Image"},{"value":"card","label":"Link card"}]},{"id":"text","type":"string","role":"content","label":"Text","description":"Bubble text, or the emoji row for the Emoji type.","default":"wait look 👀"},{"id":"cardTitle","type":"string","role":"content","label":"Card title","description":"Link-card title (Link card type only).","default":"HyperFrames — Write HTML, render pixel-perfect video"},{"id":"cardDomain","type":"string","role":"content","label":"Card domain","description":"Link-card domain line (Link card type only).","default":"hyperframes.heygen.com"},{"id":"tail","type":"enum","role":"style","label":"Tail","description":"The bubble tail anchoring the message to its side.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"delivered","type":"enum","role":"content","label":"Delivered","description":"The receipt under a sent message.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":304}}
   attribution={{"author":"Miao Yang","path":"registry/components/chat-message","tags":["video-primitive","chat","mock-ui","message"]}}
@@ -339,7 +343,9 @@ That writes one file: `compositions/components/chat-message.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -385,6 +391,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/chat-thread.mdx b/docs/catalog/components/chat-thread.mdx
index d5d526a970..b17252ce4d 100644
--- a/docs/catalog/components/chat-thread.mdx
+++ b/docs/catalog/components/chat-thread.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Chat Thread</h1>
+  <p>The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/chat-thread.json"
   compositionId="chat-thread"
   compositionSrc="compositions/components/chat-thread.html"
   title="Chat Thread"
-  description="The measured conversation as one mountable scene at full fidelity: status bar, back badge, avatar and name pill, bubbles with real iMessage tails, a Delivered receipt, large emoji rows, a media placeholder, a link card, and typing dots holding the beat. Every message picks its type by prefix - recv:/sent: text, emoji: a large row, img media, card:Title~domain a link card - and heights are measured at mount so any thread fits"
   variables={[{"id":"contact","type":"string","role":"content","label":"Contact","description":"Name in the thread header; the avatar shows its first letter.","default":"Rachel"},{"id":"unread","type":"number","role":"content","label":"Unread badge","description":"Count in the back-button badge. 0 hides it.","default":12,"min":0,"max":99,"step":1},{"id":"messages","type":"string","role":"content","label":"Messages","description":"Pipe-separated thread. Each entry picks its type by prefix: recv: or sent: for a text bubble, emoji: for a large emoji row, img for a media placeholder, card:Title~domain for a link card. Example: recv:hey|sent:look 👀|card:HyperFrames~hyperframes.heygen.com|emoji:🤯🤯🤯","default":"recv:what r u using for the launch video??|sent:wait look 👀|card:HyperFrames — Write HTML, render pixel-perfect video~hyperframes.heygen.com|recv:OMG IT&#39;S HTML|emoji:🤯🤯🤯|sent:renders in 4K. no editor"},{"id":"beat","type":"number","role":"timing","label":"Beat","description":"Seconds between message arrivals.","default":1.7,"min":0.8,"max":3,"step":0.1},{"id":"dots","type":"enum","role":"timing","label":"Typing dots","description":"Show the three-dot indicator before received messages.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"receipt","type":"enum","role":"content","label":"Delivered receipt","description":"Show Delivered under the last sent bubble, as iMessage does.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":662}}
   attribution={{"author":"Miao Yang","path":"registry/components/chat-thread","tags":["motion-primitive","chat","mock-ui","conversation","vertical"]}}
@@ -697,7 +701,9 @@ That writes one file: `compositions/components/chat-thread.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -743,6 +749,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/chromatic-aberration-wipe.mdx b/docs/catalog/components/chromatic-aberration-wipe.mdx
index a5b48439a0..d4c973aa3c 100644
--- a/docs/catalog/components/chromatic-aberration-wipe.mdx
+++ b/docs/catalog/components/chromatic-aberration-wipe.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Chromatic Aberration Wipe</h1>
+  <p>A fast slide wipe with RGB channel split on peak frames.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/chromatic-aberration-wipe.json"
   compositionId="chromatic-aberration-wipe"
   compositionSrc="compositions/components/chromatic-aberration-wipe.html"
   title="Chromatic Aberration Wipe"
-  description="A fast slide wipe with RGB channel split on peak frames."
   variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"The direction the reveal travels; both scenes slide the same way and the wipe edge follows.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"},{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour family of the incoming scene's gradient.","default":"blue","options":[{"value":"blue","label":"Blue"},{"value":"green","label":"Green"},{"value":"violet","label":"Violet"}]},{"id":"aberration","type":"number","role":"style","label":"Aberration","description":"Multiplies the red/cyan channel split: 0 removes it, 1 is the stock strength, 2 doubles the offset and saturates the flash.","default":1,"min":0,"max":2,"step":0.1,"unit":"x"}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":165}}
   attribution={{"path":"registry/components/chromatic-aberration-wipe","tags":["video-primitive","transition-primitive"]}}
@@ -200,7 +204,9 @@ That writes one file: `compositions/components/chromatic-aberration-wipe.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -242,6 +248,4 @@ Tagged `video-primitive` `transition-primitive`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/code-terminal-run.mdx b/docs/catalog/components/code-terminal-run.mdx
index 4cd885dcc5..18b69aeb6d 100644
--- a/docs/catalog/components/code-terminal-run.mdx
+++ b/docs/catalog/components/code-terminal-run.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Code Terminal Run</h1>
+  <p>A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/code-terminal-run.json"
   compositionId="code-terminal-run"
   compositionSrc="compositions/components/code-terminal-run.html"
   title="Code Terminal Run"
-  description="A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears."
   variables={[{"id":"prompt_glyph","type":"string","role":"style","label":"Prompt glyph","description":"Leading glyph before the command and the trailing prompt. Empty string hides it.","default":"$"},{"id":"cadence","type":"enum","role":"timing","label":"Cadence","description":"Keystroke rhythm: uniform fixed steps or seeded human chunks.","default":"human","options":[{"value":"uniform","label":"Uniform"},{"value":"human","label":"Human"}]},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds relative to mount start; cue N sets when output line N prints. Empty uses the authored rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color of the prompt glyph and caret.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. Frame roots own transitions; none holds the end frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":560}}
   attribution={{"path":"registry/components/code-terminal-run","tags":["motion-primitive","product-demo","terminal","typing","deterministic"]}}
@@ -595,7 +599,9 @@ That writes one file: `compositions/components/code-terminal-run.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -638,6 +644,4 @@ Tagged `motion-primitive` `product-demo` `terminal` `typing` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/colorama-wipe.mdx b/docs/catalog/components/colorama-wipe.mdx
index 3e3e14ef3c..583c626008 100644
--- a/docs/catalog/components/colorama-wipe.mdx
+++ b/docs/catalog/components/colorama-wipe.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Colorama Wipe</h1>
+  <p>Headline reveal through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to clean type and wipes off again — the After Effects masked-text + Compound Blur + Colorama 'shiny wipe' as a deterministic canvas effect on any text element</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/colorama-wipe.json"
   compositionId="colorama-wipe"
   compositionSrc="compositions/components/colorama-wipe.html"
   title="Colorama Wipe"
-  description="Headline reveal through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to clean type and wipes off again — the After Effects masked-text + Compound Blur + Colorama 'shiny wipe' as a deterministic canvas effect on any text element"
   variables={[]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":358}}
   attribution={{"path":"registry/components/colorama-wipe","tags":["text","reveal","wipe","colorama","gradient","blur","headline","saas"]}}
@@ -393,7 +397,9 @@ That writes one file: `compositions/components/colorama-wipe.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -413,6 +419,4 @@ Tagged `text` `reveal` `wipe` `colorama` `gradient` `blur` `headline` `saas`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/comparison-split.mdx b/docs/catalog/components/comparison-split.mdx
index 891ee9483f..a9efdc2cd3 100644
--- a/docs/catalog/components/comparison-split.mdx
+++ b/docs/catalog/components/comparison-split.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Comparison Split</h1>
+  <p>Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/comparison-split.json"
   compositionId="comparison-split"
   compositionSrc="compositions/components/comparison-split.html"
   title="Comparison Split"
-  description="Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split."
   variables={[{"id":"split","type":"number","role":"layout","label":"Split position","description":"Target resting position of the comparison divider.","default":50,"min":0,"max":100,"step":1,"unit":"%"},{"id":"orientation","type":"enum","role":"layout","label":"Orientation","description":"Axis and direction used by the comparison wipe.","default":"horizontal","options":[{"value":"horizontal","label":"Horizontal"},{"value":"vertical","label":"Vertical"}]},{"id":"labelA","type":"string","role":"content","label":"Before label","description":"Caption shown on the base before panel.","default":"Before"},{"id":"labelB","type":"string","role":"content","label":"After label","description":"Caption shown on the revealed after panel.","default":"After"}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":449}}
   attribution={{"path":"registry/components/comparison-split","tags":["prop","ui-props","compare","holdable","before-after","wipe"]}}
@@ -484,7 +488,9 @@ That writes one file: `compositions/components/comparison-split.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -526,6 +532,4 @@ Tagged `prop` `ui-props` `compare` `holdable` `before-after` `wipe`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/confetti.mdx b/docs/catalog/components/confetti.mdx
index 4780527bc8..9005dc032b 100644
--- a/docs/catalog/components/confetti.mdx
+++ b/docs/catalog/components/confetti.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Confetti</h1>
+  <p>A deterministic celebration burst with seeded particles and gravity.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/confetti.json"
   compositionId="confetti"
   compositionSrc="compositions/components/confetti.html"
   title="Confetti"
-  description="A deterministic celebration burst with seeded particles and gravity."
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":127}}
   attribution={{"path":"registry/components/confetti","tags":["effect"]}}
@@ -162,7 +166,9 @@ That writes one file: `compositions/components/confetti.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -182,6 +188,4 @@ Tagged `effect`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/conic-progress-ring.mdx b/docs/catalog/components/conic-progress-ring.mdx
index 6332c7c688..ad98661f0b 100644
--- a/docs/catalog/components/conic-progress-ring.mdx
+++ b/docs/catalog/components/conic-progress-ring.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Conic Progress Ring</h1>
+  <p>A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/conic-progress-ring.json"
   compositionId="conic-progress-ring"
   compositionSrc="compositions/components/conic-progress-ring.html"
   title="Conic Progress Ring"
-  description="A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage."
   variables={[{"id":"progress","type":"number","role":"content","label":"Progress","description":"Target angular fill from 0 to 100.","default":100,"min":0,"max":100,"step":1,"unit":"%"},{"id":"thickness","type":"number","role":"layout","label":"Thickness","description":"Ring stroke thickness as a percent of the ring radius.","default":12,"min":4,"max":30,"step":1,"unit":"%"},{"id":"label","type":"string","role":"content","label":"Center label","description":"Numeric target shown in the center and counted in sync with the fill.","default":"100"}]}
   meta={{"category":"Data","badge":"Stable","codeLines":235}}
   attribution={{"path":"registry/components/conic-progress-ring","tags":["data","progress","ring","conic-gradient","prove","demonstrate"]}}
@@ -270,7 +274,9 @@ That writes one file: `compositions/components/conic-progress-ring.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -311,6 +317,4 @@ Tagged `data` `progress` `ring` `conic-gradient` `prove` `demonstrate`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/constellation-hub.mdx b/docs/catalog/components/constellation-hub.mdx
index 23c3230fa8..98350bc440 100644
--- a/docs/catalog/components/constellation-hub.mdx
+++ b/docs/catalog/components/constellation-hub.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Constellation Hub</h1>
+  <p>Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/constellation-hub.json"
   compositionId="constellation-hub"
   compositionSrc="compositions/components/constellation-hub.html"
   title="Constellation Hub"
-  description="Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup."
   variables={[{"id":"hub_label","type":"string","role":"content","label":"Hub label","description":"Text displayed inside the fixed central hub.","default":"Product"},{"id":"nodes","type":"string","role":"content","label":"Feature nodes","description":"Comma-separated feature labels introduced in narration order.","default":"Capture,Compose,Render,Share"},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds (from mount start) for each node reveal. Empty keeps the authored even spread.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color used by the hub, connectors, and active nodes.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":427}}
   attribution={{"path":"registry/components/constellation-hub","tags":["motion-primitive","feature-tour","hub","nodes","connector","reveal"]}}
@@ -462,7 +466,9 @@ That writes one file: `compositions/components/constellation-hub.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -505,6 +511,4 @@ Tagged `motion-primitive` `feature-tour` `hub` `nodes` `connector` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/count-up.mdx b/docs/catalog/components/count-up.mdx
index b2c4dd43fe..74b6a6896b 100644
--- a/docs/catalog/components/count-up.mdx
+++ b/docs/catalog/components/count-up.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Count Up</h1>
+  <p>A token-native stat counter that eases between values, counting up or down, and lands with a restrained scale pulse.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/count-up.json"
   compositionId="count-up"
   compositionSrc="compositions/components/count-up.html"
   title="Count Up"
-  description="A token-native stat counter that eases between values, counting up or down, and lands with a restrained scale pulse."
   variables={[{"id":"start","type":"number","role":"content","label":"Start value","description":"First value shown by the count.","default":0,"step":1},{"id":"end","type":"number","role":"content","label":"End value","description":"Final value where the count lands.","default":100,"step":1},{"id":"prefix","type":"string","role":"content","label":"Prefix","description":"Optional text shown before the value.","default":""},{"id":"suffix","type":"string","role":"content","label":"Suffix","description":"Optional text shown after the value.","default":"%"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the count.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"glow","type":"boolean","role":"style","label":"Glow","description":"Optional soft accent glow under the count. Off by default.","default":false},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the landed value holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":297}}
   attribution={{"path":"registry/components/count-up","tags":["motion-primitive","proof","stats","counter","number","countdown","deterministic"]}}
@@ -332,7 +336,9 @@ That writes one file: `compositions/components/count-up.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -377,6 +383,4 @@ Tagged `motion-primitive` `proof` `stats` `counter` `number` `countdown` `determ
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cta-close.mdx b/docs/catalog/components/cta-close.mdx
index 243283cf8b..f95c2e64d4 100644
--- a/docs/catalog/components/cta-close.mdx
+++ b/docs/catalog/components/cta-close.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>CTA Close</h1>
+  <p>A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cta-close.json"
   compositionId="cta-close"
   compositionSrc="compositions/components/cta-close.html"
   title="CTA Close"
-  description="A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still."
   variables={[{"id":"action_line","type":"string","role":"content","label":"Action line","description":"Two to four word action that closes the film.","default":"Make it happen"},{"id":"button_label","type":"string","role":"content","label":"Button label","description":"Text displayed inside the single CTA capsule.","default":"Start now"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color used by the CTA capsule.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts (this primitive closes films).","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":264}}
   attribution={{"path":"registry/components/cta-close","tags":["motion-primitive","ui-props","cta","end-card","close","ask"]}}
@@ -299,7 +303,9 @@ That writes one file: `compositions/components/cta-close.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -341,6 +347,4 @@ Tagged `motion-primitive` `ui-props` `cta` `end-card` `close` `ask`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cta-lockup.mdx b/docs/catalog/components/cta-lockup.mdx
index 9be73fc01c..cae356793b 100644
--- a/docs/catalog/components/cta-lockup.mdx
+++ b/docs/catalog/components/cta-lockup.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>CTA Lockup</h1>
+  <p>A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cta-lockup.json"
   compositionId="cta-lockup"
   compositionSrc="compositions/components/cta-lockup.html"
   title="CTA Lockup"
-  description="A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence."
   variables={[{"id":"action_line","type":"string","role":"content","label":"Action line","description":"Primary action statement shown above the CTA.","default":"Start building today"},{"id":"button_label","type":"string","role":"content","label":"Button label","description":"Text displayed inside the CTA capsule.","default":"Get HyperFrames"},{"id":"microcopy","type":"string","role":"content","label":"Microcopy","description":"Supporting detail shown below the CTA capsule.","default":"Free while in beta"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Fill color used by the CTA capsule.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":258}}
   attribution={{"path":"registry/components/cta-lockup","tags":["motion-primitive","ui-props","cta","end-card","lockup","ask"]}}
@@ -293,7 +297,9 @@ That writes one file: `compositions/components/cta-lockup.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -335,6 +341,4 @@ Tagged `motion-primitive` `ui-props` `cta` `end-card` `lockup` `ask`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cursor-annotate.mdx b/docs/catalog/components/cursor-annotate.mdx
index cde9728647..d0423639b0 100644
--- a/docs/catalog/components/cursor-annotate.mdx
+++ b/docs/catalog/components/cursor-annotate.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Annotate Cursor</h1>
+  <p>A marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid exactly under its nib, then lifts and leaves.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cursor-annotate.json"
   compositionId="cursor-annotate"
   compositionSrc="compositions/components/cursor-annotate.html"
   title="Annotate Cursor"
-  description="A marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid exactly under its nib, then lifts and leaves."
   variables={[{"id":"shape","type":"enum","role":"style","label":"Mark","default":"circle","options":[{"value":"circle","label":"Loose loop"},{"value":"underline","label":"Underline"},{"value":"arrow","label":"Arrow"}]},{"id":"color","type":"color","role":"style","label":"Ink","default":"#f43f5e"},{"id":"target_x","type":"number","role":"layout","label":"Region left","default":40,"min":0,"max":95,"step":1,"unit":"%"},{"id":"target_y","type":"number","role":"layout","label":"Region top","default":38,"min":0,"max":95,"step":1,"unit":"%"},{"id":"target_w","type":"number","role":"layout","label":"Region width","default":20,"min":2,"max":90,"step":1,"unit":"%"},{"id":"target_h","type":"number","role":"layout","label":"Region height","default":16,"min":2,"max":90,"step":1,"unit":"%"}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":494}}
   attribution={{"path":"registry/components/cursor-annotate","tags":["cursor","motion-primitive","pen","annotation","draw-on","highlight"]}}
@@ -529,7 +533,9 @@ That writes one file: `compositions/components/cursor-annotate.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -573,6 +579,4 @@ Tagged `cursor` `motion-primitive` `pen` `annotation` `draw-on` `highlight`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cursor-context-menu.mdx b/docs/catalog/components/cursor-context-menu.mdx
index cf50aafaa3..48b3a92335 100644
--- a/docs/catalog/components/cursor-context-menu.mdx
+++ b/docs/catalog/components/cursor-context-menu.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Context Menu Cursor</h1>
+  <p>A cursor right-clicks a file, a context menu blooms from its tip, the hover highlight tracks the item under it, and the chosen action plays out: duplicate, rename, move to trash, or a confirmation toast.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cursor-context-menu.json"
   compositionId="cursor-context-menu"
   compositionSrc="compositions/components/cursor-context-menu.html"
   title="Context Menu Cursor"
-  description="A cursor right-clicks a file, a context menu blooms from its tip, the hover highlight tracks the item under it, and the chosen action plays out: duplicate, rename, move to trash, or a confirmation toast."
   variables={[{"id":"items","type":"string","role":"content","label":"Menu items","default":"Open,Rename,Duplicate,Share,Move to Trash"},{"id":"pick","type":"number","role":"content","label":"Chosen item (0 = first)","default":2,"min":0,"max":9,"step":1},{"id":"tone","type":"enum","role":"style","label":"Tone","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":562}}
   attribution={{"path":"registry/components/cursor-context-menu","tags":["cursor","motion-primitive","menu","right-click","desktop","files"]}}
@@ -597,7 +601,9 @@ That writes one file: `compositions/components/cursor-context-menu.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -638,6 +644,4 @@ Tagged `cursor` `motion-primitive` `menu` `right-click` `desktop` `files`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cursor-drag-drop.mdx b/docs/catalog/components/cursor-drag-drop.mdx
index 556aa13fcf..b75363e6d8 100644
--- a/docs/catalog/components/cursor-drag-drop.mdx
+++ b/docs/catalog/components/cursor-drag-drop.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Drag and Drop Cursor</h1>
+  <p>A cursor grabs a task card, lifts and tilts it into its motion, carries it in lockstep to an empty column, drops it with a small settle, and the list closes the gap behind it.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cursor-drag-drop.json"
   compositionId="cursor-drag-drop"
   compositionSrc="compositions/components/cursor-drag-drop.html"
   title="Drag and Drop Cursor"
-  description="A cursor grabs a task card, lifts and tilts it into its motion, carries it in lockstep to an empty column, drops it with a small settle, and the list closes the gap behind it."
   variables={[{"id":"card_label","type":"string","role":"content","label":"Dragged card","default":"Fix checkout validation"},{"id":"accent","type":"color","role":"style","label":"Accent","default":"#0a84ff"},{"id":"tone","type":"enum","role":"style","label":"Board tone","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":464}}
   attribution={{"path":"registry/components/cursor-drag-drop","tags":["cursor","motion-primitive","drag","drop","kanban","product-demo"]}}
@@ -499,7 +503,9 @@ That writes one file: `compositions/components/cursor-drag-drop.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -540,6 +546,4 @@ Tagged `cursor` `motion-primitive` `drag` `drop` `kanban` `product-demo`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cursor-glyph-trail.mdx b/docs/catalog/components/cursor-glyph-trail.mdx
index 93ec39b17f..8cb160e7cb 100644
--- a/docs/catalog/components/cursor-glyph-trail.mdx
+++ b/docs/catalog/components/cursor-glyph-trail.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Cursor Glyph Trail</h1>
+  <p>A tutorial cursor path: on a settings screen the arrow clicks through three steps, leaving a dotted trail spaced evenly by distance and a numbered marker at each click; each step's trail fades as the next move begins.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cursor-glyph-trail.json"
   compositionId="cursor-glyph-trail"
   compositionSrc="compositions/components/cursor-glyph-trail.html"
   title="Cursor Glyph Trail"
-  description="A tutorial cursor path: on a settings screen the arrow clicks through three steps, leaving a dotted trail spaced evenly by distance and a numbered marker at each click; each step's trail fades as the next move begins."
   variables={[{"id":"glyphs","type":"string","role":"content","label":"Glyphs (deprecated)","description":"Deprecated and ignored: the trail draws evenly spaced dots.","default":""},{"id":"density","type":"enum","role":"style","label":"Density","description":"Spacing between trail dots.","default":"med","options":[{"value":"low","label":"Low"},{"value":"med","label":"Medium"},{"value":"high","label":"High"}]},{"id":"path","type":"enum","role":"style","label":"Path","description":"How each move bends: sweep is a gentle curve, arc a deeper one, zigzag a straight line.","default":"sweep","options":[{"value":"sweep","label":"Sweep"},{"value":"arc","label":"Arc"},{"value":"zigzag","label":"Zigzag"}]},{"id":"fade","type":"number","role":"timing","label":"Fade","description":"Seconds a step trail takes to fade once the next move begins, clamped 0.3 to 1.5.","default":0.5},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Trail and step marker color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the finished screen holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":651}}
   attribution={{"path":"registry/components/cursor-glyph-trail","tags":["cursor","motion-primitive","demonstrate","trail","tutorial","steps","deterministic"]}}
@@ -686,7 +690,9 @@ That writes one file: `compositions/components/cursor-glyph-trail.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -730,6 +736,4 @@ Tagged `cursor` `motion-primitive` `demonstrate` `trail` `tutorial` `steps` `det
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cursor-marquee-select.mdx b/docs/catalog/components/cursor-marquee-select.mdx
index 4393a86696..30953ae08a 100644
--- a/docs/catalog/components/cursor-marquee-select.mdx
+++ b/docs/catalog/components/cursor-marquee-select.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Marquee Select Cursor</h1>
+  <p>A cursor drags a selection rectangle across a photo grid; each tile rings and pops a check the frame the rectangle touches it, while a pill counts the selection up.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cursor-marquee-select.json"
   compositionId="cursor-marquee-select"
   compositionSrc="compositions/components/cursor-marquee-select.html"
   title="Marquee Select Cursor"
-  description="A cursor drags a selection rectangle across a photo grid; each tile rings and pops a check the frame the rectangle touches it, while a pill counts the selection up."
   variables={[{"id":"accent","type":"color","role":"style","label":"Accent","default":"#0a84ff"},{"id":"start_x","type":"number","role":"layout","label":"Drag start X","default":20.5,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"start_y","type":"number","role":"layout","label":"Drag start Y","default":25.5,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"end_x","type":"number","role":"layout","label":"Drag end X","default":57,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"end_y","type":"number","role":"layout","label":"Drag end Y","default":52,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"pill_label","type":"string","role":"content","label":"Pill label","default":"selected"}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":1048}}
   attribution={{"path":"registry/components/cursor-marquee-select","tags":["cursor","motion-primitive","select","marquee","grid","product-demo"]}}
@@ -1083,7 +1087,9 @@ That writes one file: `compositions/components/cursor-marquee-select.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -1127,6 +1133,4 @@ Tagged `cursor` `motion-primitive` `select` `marquee` `grid` `product-demo`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cursor-text-select.mdx b/docs/catalog/components/cursor-text-select.mdx
index 4fd17c8af8..1f39643e5e 100644
--- a/docs/catalog/components/cursor-text-select.mdx
+++ b/docs/catalog/components/cursor-text-select.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text Select Cursor</h1>
+  <p>An arrow turns into an I-beam over a document, drags a selection across a phrase character by character, raises a format toolbar, turns back into an arrow and clicks Bold.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cursor-text-select.json"
   compositionId="cursor-text-select"
   compositionSrc="compositions/components/cursor-text-select.html"
   title="Text Select Cursor"
-  description="An arrow turns into an I-beam over a document, drags a selection across a phrase character by character, raises a format toolbar, turns back into an arrow and clicks Bold."
   variables={[{"id":"title","type":"string","role":"content","label":"Heading","default":"Spring release notes"},{"id":"text","type":"string","role":"content","label":"Paragraph","default":"Our spring release ships on Thursday. Teams can now share a live review link, collect time-stamped comments, and approve the final cut without leaving the editor. Early customers cut their review rounds in half."},{"id":"phrase","type":"string","role":"content","label":"Phrase to select","default":"approve the final cut"},{"id":"accent","type":"color","role":"style","label":"Accent","default":"#0a84ff"}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":440}}
   attribution={{"path":"registry/components/cursor-text-select","tags":["cursor","motion-primitive","text","selection","editor","toolbar"]}}
@@ -475,7 +479,9 @@ That writes one file: `compositions/components/cursor-text-select.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -517,6 +523,4 @@ Tagged `cursor` `motion-primitive` `text` `selection` `editor` `toolbar`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cursor-zoom-follow.mdx b/docs/catalog/components/cursor-zoom-follow.mdx
index 0f3013f60d..548d748c92 100644
--- a/docs/catalog/components/cursor-zoom-follow.mdx
+++ b/docs/catalog/components/cursor-zoom-follow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Zoom Follow Cursor</h1>
+  <p>Screen-recording auto-zoom: the camera pushes in toward each upcoming click, trails the cursor on a smooth spring, marks every click with a press and a ring, then eases back out to the full screen as the cursor leaves.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cursor-zoom-follow.json"
   compositionId="cursor-zoom-follow"
   compositionSrc="compositions/components/cursor-zoom-follow.html"
   title="Zoom Follow Cursor"
-  description="Screen-recording auto-zoom: the camera pushes in toward each upcoming click, trails the cursor on a smooth spring, marks every click with a press and a ring, then eases back out to the full screen as the cursor leaves."
   variables={[{"id":"image","type":"image","role":"content","label":"Screenshot","description":"Your own screen capture. Leave empty for the built-in dashboard.","default":""},{"id":"zoom","type":"number","role":"style","label":"Zoom","default":1.8,"min":1.2,"max":2.6,"step":0.1},{"id":"click1_x","type":"number","role":"layout","label":"Click 1 X","default":68.5,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"click1_y","type":"number","role":"layout","label":"Click 1 Y","default":7.5,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"click2_x","type":"number","role":"layout","label":"Click 2 X","default":50,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"click2_y","type":"number","role":"layout","label":"Click 2 Y","default":48.5,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"click3_x","type":"number","role":"layout","label":"Click 3 X","default":90.5,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"click3_y","type":"number","role":"layout","label":"Click 3 Y","default":7.5,"min":0,"max":100,"step":0.5,"unit":"%"},{"id":"accent","type":"color","role":"style","label":"Ripple","default":"#0a84ff"}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":720}}
   attribution={{"path":"registry/components/cursor-zoom-follow","tags":["cursor","camera","zoom","screen-recording","click","product-demo"]}}
@@ -755,7 +759,9 @@ That writes one file: `compositions/components/cursor-zoom-follow.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -802,6 +808,4 @@ Tagged `cursor` `camera` `zoom` `screen-recording` `click` `product-demo`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/curtain-reveal.mdx b/docs/catalog/components/curtain-reveal.mdx
index 4ac3eb7525..261b4d6009 100644
--- a/docs/catalog/components/curtain-reveal.mdx
+++ b/docs/catalog/components/curtain-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Curtain Reveal</h1>
+  <p>Two pleated stage curtains gather outward from center, the way real velvet bunches at the tieback, revealing the stage underneath. A static pelmet frames the top; a soft spotlight can bloom in as they part.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/curtain-reveal.json"
   compositionId="curtain-reveal"
   compositionSrc="compositions/components/curtain-reveal.html"
   title="Curtain Reveal"
-  description="Two pleated stage curtains gather outward from center, the way real velvet bunches at the tieback, revealing the stage underneath. A static pelmet frames the top; a soft spotlight can bloom in as they part."
   variables={[{"id":"tone","type":"enum","role":"style","label":"Curtain tone","description":"Curtain color.","default":"burgundy","options":[{"value":"red","label":"Red"},{"value":"burgundy","label":"Burgundy"},{"value":"navy","label":"Navy"},{"value":"forest","label":"Forest"}]},{"id":"pelmet","type":"enum","role":"style","label":"Pelmet","description":"Static valance framing the top of the stage.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"spotlight","type":"enum","role":"style","label":"Spotlight","description":"Soft glow blooming over the stage as the curtains part.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":377}}
   attribution={{"path":"registry/components/curtain-reveal","tags":["curtain","stage reveal","transition","motion-primitive"]}}
@@ -412,7 +416,9 @@ That writes one file: `compositions/components/curtain-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -453,6 +459,4 @@ Tagged `curtain` `stage reveal` `transition` `motion-primitive`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/cut-the-curve.mdx b/docs/catalog/components/cut-the-curve.mdx
index fe27e590e3..360288b16d 100644
--- a/docs/catalog/components/cut-the-curve.mdx
+++ b/docs/catalog/components/cut-the-curve.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Cut the Curve</h1>
+  <p>A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/cut-the-curve.json"
   compositionId="cut-the-curve"
   compositionSrc="compositions/components/cut-the-curve.html"
   title="Cut the Curve"
-  description="A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out."
   variables={[{"id":"subject","type":"enum","role":"content","label":"Subject","description":"Visual payload used on both sides of the cut.","default":"cursor","options":[{"value":"cursor","label":"Cursor"},{"value":"card","label":"Card"},{"value":"scene","label":"Scene"}]},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Shared screen direction for outgoing and incoming travel.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"},{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"cutFraction","type":"number","role":"timing","label":"Cut fraction","description":"Normalized point where the hard cut swaps subjects.","default":0.33,"min":0,"max":1,"step":0.01},{"id":"blurPx","type":"number","role":"style","label":"Cut blur","description":"Blur in pixels shared by both subjects at the cut seam.","default":12,"min":0,"max":40,"step":1,"unit":"px"},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure of the incoming subject. Default none: it rests until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":500}}
   attribution={{"path":"registry/components/cut-the-curve","tags":["transition","directional-cut","velocity-match","whip","bridge","demonstrate"]}}
@@ -535,7 +539,9 @@ That writes one file: `compositions/components/cut-the-curve.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -578,6 +584,4 @@ Tagged `transition` `directional-cut` `velocity-match` `whip` `bridge` `demonstr
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/dart-cursor.mdx b/docs/catalog/components/dart-cursor.mdx
index def70b1f0b..786e60229b 100644
--- a/docs/catalog/components/dart-cursor.mdx
+++ b/docs/catalog/components/dart-cursor.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Dart Cursor</h1>
+  <p>A bold outlined arrowhead that dives in from camera depth, flies nose-first with motion blur along its path, squashes on two clicks, and whips out of frame.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/dart-cursor.json"
   compositionId="dart-cursor"
   compositionSrc="compositions/components/dart-cursor.html"
   title="Dart Cursor"
-  description="A bold outlined arrowhead that dives in from camera depth, flies nose-first with motion blur along its path, squashes on two clicks, and whips out of frame."
   variables={[{"id":"tone","type":"enum","role":"style","label":"Tone","default":"dark","options":[{"value":"dark","label":"Dark body, white outline"},{"value":"light","label":"Light body, dark outline"}]},{"id":"target_x","type":"number","role":"layout","label":"First click X","default":34,"min":5,"max":95,"step":1,"unit":"%"},{"id":"target_y","type":"number","role":"layout","label":"First click Y","default":58,"min":5,"max":95,"step":1,"unit":"%"},{"id":"target2_x","type":"number","role":"layout","label":"Second click X","default":64,"min":5,"max":95,"step":1,"unit":"%"},{"id":"target2_y","type":"number","role":"layout","label":"Second click Y","default":46,"min":5,"max":95,"step":1,"unit":"%"},{"id":"enter_from","type":"enum","role":"timing","label":"Enter from","default":"right","options":[{"value":"right","label":"Right"},{"value":"left","label":"Left"},{"value":"top","label":"Top"},{"value":"bottom","label":"Bottom"}]},{"id":"exit_to","type":"enum","role":"timing","label":"Exit to","default":"right","options":[{"value":"right","label":"Right"},{"value":"left","label":"Left"},{"value":"top","label":"Top"},{"value":"bottom","label":"Bottom"}]},{"id":"blur","type":"number","role":"style","label":"Motion blur","default":1,"min":0,"max":1.5,"step":0.1}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":357}}
   attribution={{"path":"registry/components/dart-cursor","tags":["cursor","motion-primitive","pointer","click","motion-blur","depth"]}}
@@ -392,7 +396,9 @@ That writes one file: `compositions/components/dart-cursor.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -438,6 +444,4 @@ Tagged `cursor` `motion-primitive` `pointer` `click` `motion-blur` `depth`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/decline-chart.mdx b/docs/catalog/components/decline-chart.mdx
index a228c96289..80e6a4b92d 100644
--- a/docs/catalog/components/decline-chart.mdx
+++ b/docs/catalog/components/decline-chart.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Decline Chart</h1>
+  <p>A metric line draws downward as its value counts down and the ambient background darkens in lockstep.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/decline-chart.json"
   compositionId="decline-chart"
   compositionSrc="compositions/components/decline-chart.html"
   title="Decline Chart"
-  description="A metric line draws downward as its value counts down and the ambient background darkens in lockstep."
   variables={[{"id":"label","type":"string","role":"content","label":"Metric label","description":"Label shown above the declining value.","default":"Retention"},{"id":"start_value","type":"number","role":"content","label":"Start value","description":"Metric value at the start of the decline.","default":82,"min":0,"max":100,"step":1},{"id":"end_value","type":"number","role":"content","label":"End value","description":"Metric value at the bottom of the decline.","default":34,"min":0,"max":100,"step":1}]}
   meta={{"category":"Data","badge":"Stable","codeLines":276}}
   attribution={{"path":"registry/components/decline-chart","tags":["motion-primitive","data","chart","decline","metric","problem"]}}
@@ -311,7 +315,9 @@ That writes one file: `compositions/components/decline-chart.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -352,6 +358,4 @@ Tagged `motion-primitive` `data` `chart` `decline` `metric` `problem`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/device-frame-stage.mdx b/docs/catalog/components/device-frame-stage.mdx
index d6620aba86..5fa5e9c5a9 100644
--- a/docs/catalog/components/device-frame-stage.mdx
+++ b/docs/catalog/components/device-frame-stage.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Device Frame Stage</h1>
+  <p>A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/device-frame-stage.json"
   compositionId="device-frame-stage"
   compositionSrc="compositions/components/device-frame-stage.html"
   title="Device Frame Stage"
-  description="A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float"
   variables={[{"id":"device","type":"enum","role":"layout","label":"Device kind","default":"phone","options":[{"value":"phone","label":"Phone"},{"value":"tablet","label":"Tablet"}]},{"id":"cutout","type":"enum","role":"layout","label":"Camera cutout","default":"none","options":[{"value":"none","label":"None"},{"value":"island","label":"Island"},{"value":"notch","label":"Notch"}]},{"id":"body","type":"enum","role":"style","label":"Body material","default":"graphite","options":[{"value":"graphite","label":"Graphite"},{"value":"silver","label":"Silver"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":466}}
   attribution={{"path":"registry/components/device-frame-stage","tags":["prop","device","mobile","tablet","ui-props","holdable"]}}
@@ -501,7 +505,9 @@ That writes one file: `compositions/components/device-frame-stage.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -542,6 +548,4 @@ Tagged `prop` `device` `mobile` `tablet` `ui-props` `holdable`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/directional-wipe.mdx b/docs/catalog/components/directional-wipe.mdx
index dccffc77c8..c71a984d49 100644
--- a/docs/catalog/components/directional-wipe.mdx
+++ b/docs/catalog/components/directional-wipe.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Directional Wipe</h1>
+  <p>A directional scene push that slides one panel over another.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/directional-wipe.json"
   compositionId="directional-wipe"
   compositionSrc="compositions/components/directional-wipe.html"
   title="Directional Wipe"
-  description="A directional scene push that slides one panel over another."
   variables={[{"id":"palette","type":"enum","role":"style","label":"Palette","description":"Theme token for the ring marking the incoming panel. Slate rides --accent, teal --brand, ember --accent-2; each falls back to a neutral hairline.","default":"slate","options":[{"value":"slate","label":"Slate"},{"value":"teal","label":"Teal"},{"value":"ember","label":"Ember"}]},{"id":"corner","type":"enum","role":"style","label":"Corner","description":"Corner radius of the transition card.","default":"rounded","options":[{"value":"square","label":"Square"},{"value":"rounded","label":"Rounded"},{"value":"soft","label":"Soft"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":146}}
   attribution={{"path":"registry/components/directional-wipe","tags":["transition-primitive"]}}
@@ -181,7 +185,9 @@ That writes one file: `compositions/components/directional-wipe.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -222,6 +228,4 @@ Tagged `transition-primitive`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/drift-hold.mdx b/docs/catalog/components/drift-hold.mdx
index a81fc210e1..a7e1cb0f3a 100644
--- a/docs/catalog/components/drift-hold.mdx
+++ b/docs/catalog/components/drift-hold.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Drift Hold</h1>
+  <p>A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/drift-hold.json"
   compositionId="drift-hold"
   compositionSrc="compositions/components/drift-hold.html"
   title="Drift Hold"
-  description="A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Text displayed in the default centered card.","default":"Always alive"},{"id":"intensity","type":"enum","role":"motion","label":"Intensity","description":"Amplitude of the ambient rotation, breathing, and light sweep.","default":"standard","options":[{"value":"whisper","label":"Whisper"},{"value":"standard","label":"Standard"}]}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":192}}
   attribution={{"path":"registry/components/drift-hold","tags":["motion-primitive","camera","ambient","drift","hold","loopable"]}}
@@ -227,7 +231,9 @@ That writes one file: `compositions/components/drift-hold.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -267,6 +273,4 @@ Tagged `motion-primitive` `camera` `ambient` `drift` `hold` `loopable`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/dynamic-grid.mdx b/docs/catalog/components/dynamic-grid.mdx
index e377a16677..0cdc1d7c48 100644
--- a/docs/catalog/components/dynamic-grid.mdx
+++ b/docs/catalog/components/dynamic-grid.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Dynamic Grid</h1>
+  <p>A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/dynamic-grid.json"
   compositionId="dynamic-grid"
   compositionSrc="compositions/components/dynamic-grid.html"
   title="Dynamic Grid"
-  description="A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes"
   variables={[{"id":"density","type":"enum","role":"style","label":"Density","description":"Cell size of the grid: fine reads as graph paper, coarse as a few large panels.","default":"standard","options":[{"value":"fine","label":"Fine"},{"value":"standard","label":"Standard"},{"value":"coarse","label":"Coarse"}]},{"id":"weight","type":"enum","role":"style","label":"Weight","description":"Thickness of the grid lines, from a hairline rule to a bold structural grid.","default":"hairline","options":[{"value":"hairline","label":"Hairline"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Line colour: neutral is the translucent white the original ships with, and the accents ride --brand, --accent and --accent-2.","default":"neutral","options":[{"value":"neutral","label":"Neutral"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":104}}
   attribution={{"path":"registry/components/dynamic-grid","tags":["video-primitive","motion-primitive","background","grid","ui"]}}
@@ -139,7 +143,9 @@ That writes one file: `compositions/components/dynamic-grid.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -181,6 +187,4 @@ Tagged `video-primitive` `motion-primitive` `background` `grid` `ui`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/echo-smear.mdx b/docs/catalog/components/echo-smear.mdx
index 3d4450f248..9a851dfc89 100644
--- a/docs/catalog/components/echo-smear.mdx
+++ b/docs/catalog/components/echo-smear.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Echo Smear</h1>
+  <p>Distance-adaptive streak — records each element's real trajectory (position, rotation, scale, opacity), then trails time-offset copies behind it in proportion to its speed, combined by brightest pixel, so fast moves smear and slow ones stay sharp; spinning edges stay smooth</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/echo-smear.json"
   compositionId="echo-smear"
   compositionSrc="compositions/components/echo-smear.html"
   title="Echo Smear"
-  description="Distance-adaptive streak — records each element's real trajectory (position, rotation, scale, opacity), then trails time-offset copies behind it in proportion to its speed, combined by brightest pixel, so fast moves smear and slow ones stay sharp; spinning edges stay smooth"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":607}}
   attribution={{"path":"registry/components/echo-smear","tags":["effect","smear","echo","motion-blur","velocity","after-effects","animation"]}}
@@ -642,7 +646,9 @@ That writes one file: `compositions/components/echo-smear.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -662,6 +668,4 @@ Tagged `effect` `smear` `echo` `motion-blur` `velocity` `after-effects` `animati
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/echo-trail.mdx b/docs/catalog/components/echo-trail.mdx
index 6a0c45be7e..289721175d 100644
--- a/docs/catalog/components/echo-trail.mdx
+++ b/docs/catalog/components/echo-trail.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Echo Trail</h1>
+  <p>A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/echo-trail.json"
   compositionId="echo-trail"
   compositionSrc="compositions/components/echo-trail.html"
   title="Echo Trail"
-  description="A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest."
   variables={[{"id":"echoes","type":"number","role":"style","label":"Echoes","description":"Ghost copy count, clamped 2 to 6.","default":4},{"id":"delta","type":"number","role":"timing","label":"Delta","description":"Lag between successive ghosts in seconds, clamped 0.03 to 0.3.","default":0.09},{"id":"path","type":"enum","role":"timing","label":"Path","description":"Authored traversal preset.","default":"sweep","options":[{"value":"sweep","label":"Sweep"},{"value":"rise","label":"Rise"},{"value":"arc","label":"Arc"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Subject accent color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled element holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":353}}
   attribution={{"path":"registry/components/echo-trail","tags":["motion-primitive","demonstrate","trail","onion-skin","ghosts","deterministic"]}}
@@ -388,7 +392,9 @@ That writes one file: `compositions/components/echo-trail.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -431,6 +437,4 @@ Tagged `motion-primitive` `demonstrate` `trail` `onion-skin` `ghosts` `determini
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/extended-keyframe.mdx b/docs/catalog/components/extended-keyframe.mdx
index 66fe85cb9c..068212506d 100644
--- a/docs/catalog/components/extended-keyframe.mdx
+++ b/docs/catalog/components/extended-keyframe.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Extended Keyframe</h1>
+  <p>The never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest to the last frame, exits along its arrival vector, and carries shutter motion blur — from any side or by scale, one call per element, plus the ease on its own for any tween</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/extended-keyframe.json"
   compositionId="extended-keyframe"
   compositionSrc="compositions/components/extended-keyframe.html"
   title="Extended Keyframe"
-  description="The never-fully-lands arrival: an element covers most of its move in the first fifth of the duration and creeps the rest to the last frame, exits along its arrival vector, and carries shutter motion blur — from any side or by scale, one call per element, plus the ease on its own for any tween"
   variables={[]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":563}}
   attribution={{"path":"registry/components/extended-keyframe","tags":["motion","ease","arrival","kinetic-type","text","motion-blur","after-effects","slide-in","scale-in"]}}
@@ -598,7 +602,9 @@ That writes one file: `compositions/components/extended-keyframe.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -618,6 +624,4 @@ Tagged `motion` `ease` `arrival` `kinetic-type` `text` `motion-blur` `after-effe
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/facet-morph.mdx b/docs/catalog/components/facet-morph.mdx
index d9ebde357b..1372fffbb3 100644
--- a/docs/catalog/components/facet-morph.mdx
+++ b/docs/catalog/components/facet-morph.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Facet Morph</h1>
+  <p>A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/facet-morph.json"
   compositionId="facet-morph"
   compositionSrc="compositions/components/facet-morph.html"
   title="Facet Morph"
-  description="A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold."
   variables={[{"id":"forms","type":"string","role":"content","label":"Forms","description":"Comma-separated silhouette sequence from blob, mark, badge.","default":"blob,mark,badge"},{"id":"hold_last","type":"boolean","role":"timing","label":"Hold last","description":"True settles dead still on the final silhouette; false keeps the mass slowly breathing through the hold.","default":true},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Tint of the lit facets.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the settled mass.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":551}}
   attribution={{"path":"registry/components/facet-morph","tags":["motion-primitive","intro","morph","low-poly","svg","deterministic"]}}
@@ -586,7 +590,9 @@ That writes one file: `compositions/components/facet-morph.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -628,6 +634,4 @@ Tagged `motion-primitive` `intro` `morph` `low-poly` `svg` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/fade-through.mdx b/docs/catalog/components/fade-through.mdx
index 1321f912f7..e3261fc9ed 100644
--- a/docs/catalog/components/fade-through.mdx
+++ b/docs/catalog/components/fade-through.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Fade Through</h1>
+  <p>A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/fade-through.json"
   compositionId="fade-through"
   compositionSrc="compositions/components/fade-through.html"
   title="Fade Through"
-  description="A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer"
   variables={[{"id":"wash","type":"enum","role":"style","label":"Wash","description":"Colour of the mid-transition frame. Paper resolves through --hf-fade-through-wash, accent rides --accent.","default":"paper","options":[{"value":"paper","label":"Paper"},{"value":"white","label":"White"},{"value":"ink","label":"Ink"},{"value":"accent","label":"Accent"}]},{"id":"strength","type":"number","role":"style","label":"Strength","description":"How far the wash covers at its peak. 1 is a full flash, 0.3 a light veil.","default":1,"min":0.1,"max":1,"step":0.05},{"id":"shape","type":"enum","role":"style","label":"Shape","description":"Flat fills the frame evenly, bloom concentrates the wash in the centre.","default":"flat","options":[{"value":"flat","label":"Flat"},{"value":"bloom","label":"Bloom"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":96}}
   attribution={{"path":"registry/components/fade-through","tags":["motion-primitive","transition","fade","crossfade","scene"]}}
@@ -131,7 +135,9 @@ That writes one file: `compositions/components/fade-through.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -173,6 +179,4 @@ Tagged `motion-primitive` `transition` `fade` `crossfade` `scene`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/filmed-screen.mdx b/docs/catalog/components/filmed-screen.mdx
index bf306f4863..b343433d36 100644
--- a/docs/catalog/components/filmed-screen.mdx
+++ b/docs/catalog/components/filmed-screen.mdx
@@ -7,11 +7,15 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Filmed Screen</h1>
+  <p>Your scene, filmed off a screen: perspective, depth of field that follows an element you name, LED sub-pixels and per-shot colour grades. Shots glide into each other, focus racks between elements, and the focused element stays sharp.</p>
+</div>
+
 <CatalogDetail
   compositionId="filmed-screen"
   compositionSrc="compositions/components/filmed-screen.html"
   title="Filmed Screen"
-  description="Your scene, filmed off a screen: perspective, depth of field that follows an element you name, LED sub-pixels and per-shot colour grades. Shots glide into each other, focus racks between elements, and the focused element stays sharp."
   variables={[]}
   meta={{"category":"HTML-in-Canvas","badge":"Experimental","codeLines":701}}
   attribution={{"path":"registry/components/filmed-screen","tags":["filmed","screen","monitor","led","camera","depth-of-field","html-in-canvas","shader","webgl","effect"]}}
@@ -737,7 +741,9 @@ That writes one file: `compositions/components/filmed-screen.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
@@ -763,6 +769,4 @@ Tagged `filmed` `screen` `monitor` `led` `camera` `depth-of-field` `html-in-canv
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/focus-blur-resolve.mdx b/docs/catalog/components/focus-blur-resolve.mdx
index 81cf525821..9e500d1ca4 100644
--- a/docs/catalog/components/focus-blur-resolve.mdx
+++ b/docs/catalog/components/focus-blur-resolve.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Focus Blur Resolve</h1>
+  <p>A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/focus-blur-resolve.json"
   compositionId="focus-blur-resolve"
   compositionSrc="compositions/components/focus-blur-resolve.html"
   title="Focus Blur Resolve"
-  description="A premium focus pull from heavy blur to crisp text, then a soft blur-out exit."
   variables={[{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"size","type":"enum","role":"style","label":"Size","description":"Type size of the words, from a caption-scale line to a full display card.","default":"standard","options":[{"value":"compact","label":"Compact"},{"value":"standard","label":"Standard"},{"value":"display","label":"Display"}]},{"id":"blur","type":"enum","role":"style","label":"Blur","description":"Scales the blur radius the timeline drives, so the focus pull starts as a light haze or a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":91}}
   attribution={{"path":"registry/components/focus-blur-resolve","tags":["motion-primitive","typography"]}}
@@ -126,7 +130,9 @@ That writes one file: `compositions/components/focus-blur-resolve.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -168,6 +174,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/focus-rack.mdx b/docs/catalog/components/focus-rack.mdx
index 48e9348979..149fe6112d 100644
--- a/docs/catalog/components/focus-rack.mdx
+++ b/docs/catalog/components/focus-rack.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Focus Rack</h1>
+  <p>Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/focus-rack.json"
   compositionId="focus-rack"
   compositionSrc="compositions/components/focus-rack.html"
   title="Focus Rack"
-  description="Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax."
   variables={[{"id":"label_a","type":"string","role":"content","label":"Card A label","description":"Label on the card that begins in focus.","default":"Draft"},{"id":"label_b","type":"string","role":"content","label":"Card B label","description":"Label on the card that receives focus.","default":"Published"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color shared by both cards.","default":"blue","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":330}}
   attribution={{"path":"registry/components/focus-rack","tags":["motion-primitive","camera","focus","focus-rack","depth","parallax","emphasize"]}}
@@ -365,7 +369,9 @@ That writes one file: `compositions/components/focus-rack.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -406,6 +412,4 @@ Tagged `motion-primitive` `camera` `focus` `focus-rack` `depth` `parallax` `emph
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/focus-swap.mdx b/docs/catalog/components/focus-swap.mdx
index a2bc5bbcc4..bb0a513b85 100644
--- a/docs/catalog/components/focus-swap.mdx
+++ b/docs/catalog/components/focus-swap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Focus Swap</h1>
+  <p>Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/focus-swap.json"
   compositionId="focus-swap"
   compositionSrc="compositions/components/focus-swap.html"
   title="Focus Swap"
-  description="Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus."
   variables={[{"id":"focus","type":"enum","role":"motion","label":"Final focus","description":"Card that ends sharp, full-size, and fully opaque.","default":"b","options":[{"value":"a","label":"Card A"},{"value":"b","label":"Card B"}]},{"id":"blurPx","type":"number","role":"style","label":"Unfocused blur","description":"Blur applied to the card outside the viewer focus.","default":6,"min":0,"max":20,"step":1,"unit":"px"},{"id":"dim","type":"number","role":"style","label":"Unfocused opacity","description":"Opacity of the card outside the viewer focus.","default":0.5,"min":0,"max":1,"step":0.05}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":281}}
   attribution={{"path":"registry/components/focus-swap","tags":["effect","ui-props","focus","blur","attention","demonstrate"]}}
@@ -316,7 +320,9 @@ That writes one file: `compositions/components/focus-swap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -357,6 +363,4 @@ Tagged `effect` `ui-props` `focus` `blur` `attention` `demonstrate`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/gesture-tap.mdx b/docs/catalog/components/gesture-tap.mdx
index 9041a80b8a..053d4f238f 100644
--- a/docs/catalog/components/gesture-tap.mdx
+++ b/docs/catalog/components/gesture-tap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Gesture Tap</h1>
+  <p>A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/gesture-tap.json"
   compositionId="gesture-tap"
   compositionSrc="compositions/components/gesture-tap.html"
   title="Gesture Tap"
-  description="A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away."
   variables={[{"id":"tap_label","type":"string","role":"content","label":"Tap label","description":"Button label shown before the tap response.","default":"Follow"},{"id":"response_label","type":"string","role":"content","label":"Response label","description":"Button label shown when the tap releases.","default":"Following"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used for the completed button state and response pulse.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":404}}
   attribution={{"path":"registry/components/gesture-tap","tags":["motion-primitive","gesture","tap","interaction","ui-props"]}}
@@ -439,7 +443,9 @@ That writes one file: `compositions/components/gesture-tap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -480,6 +486,4 @@ Tagged `motion-primitive` `gesture` `tap` `interaction` `ui-props`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/gloss-sweep.mdx b/docs/catalog/components/gloss-sweep.mdx
index 8ad809279e..b5a372dfb9 100644
--- a/docs/catalog/components/gloss-sweep.mdx
+++ b/docs/catalog/components/gloss-sweep.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Gloss Sweep</h1>
+  <p>A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/gloss-sweep.json"
   compositionId="gloss-sweep"
   compositionSrc="compositions/components/gloss-sweep.html"
   title="Gloss Sweep"
-  description="A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still."
   variables={[{"id":"text","type":"string","role":"content","label":"Label","description":"Text displayed on the card.","default":"Pro"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color treatment for the card.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"sweep_angle","type":"number","role":"style","label":"Sweep angle","description":"Angle of the specular gloss in degrees.","default":25,"min":-60,"max":60,"step":1,"unit":"deg"}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":213}}
   attribution={{"path":"registry/components/gloss-sweep","tags":["motion-primitive","celebration","gloss","card","badge","payoff"]}}
@@ -248,7 +252,9 @@ That writes one file: `compositions/components/gloss-sweep.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -289,6 +295,4 @@ Tagged `motion-primitive` `celebration` `gloss` `card` `badge` `payoff`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/grade-split-reveal.mdx b/docs/catalog/components/grade-split-reveal.mdx
index 31c451f78a..50dcf2a306 100644
--- a/docs/catalog/components/grade-split-reveal.mdx
+++ b/docs/catalog/components/grade-split-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Grade Split Reveal</h1>
+  <p>The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/grade-split-reveal.json"
   compositionId="grade-split-reveal"
   compositionSrc="compositions/components/grade-split-reveal.html"
   title="Grade Split Reveal"
-  description="The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match."
   variables={[{"id":"look","type":"enum","role":"style","label":"Look","description":"Grade carried by the upper copy, and the label printed over it. All three are real grading blocks handed to the shader, not CSS filters.","default":"warm-cinematic","options":[{"value":"warm-cinematic","label":"Warm Cinematic"},{"value":"cool-teal","label":"Cool Teal"},{"value":"bleach-bypass","label":"Bleach Bypass"}]},{"id":"split","type":"number","role":"motion","label":"Split point","description":"How far across the plate the edge stops to hold the comparison, before it commits and takes the rest.","default":62,"min":25,"max":85,"step":1,"unit":"%"},{"id":"edge","type":"enum","role":"style","label":"Edge","description":"The divider line riding the wipe. Hidden drops it entirely so the grade arrives with no seam.","default":"hairline","options":[{"value":"hairline","label":"Hairline"},{"value":"bold","label":"Bold"},{"value":"hidden","label":"Hidden"}]},{"id":"labels","type":"enum","role":"style","label":"Labels","description":"Show or hide the two captions naming each half of the plate.","default":"on","options":[{"value":"on","label":"Show"},{"value":"off","label":"Hide"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":446}}
   attribution={{"path":"registry/components/grade-split-reveal","tags":["color-grading","media","compare","reveal","motion-primitive","grade"]}}
@@ -481,7 +485,9 @@ That writes one file: `compositions/components/grade-split-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -523,6 +529,4 @@ Tagged `color-grading` `media` `compare` `reveal` `motion-primitive` `grade`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/grain-field.mdx b/docs/catalog/components/grain-field.mdx
index 725f6fcf1b..6500a85d4f 100644
--- a/docs/catalog/components/grain-field.mdx
+++ b/docs/catalog/components/grain-field.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Grain Field</h1>
+  <p>A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/grain-field.json"
   compositionId="grain-field"
   compositionSrc="compositions/components/grain-field.html"
   title="Grain Field"
-  description="A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop."
   variables={[{"id":"density","type":"enum","role":"style","label":"Density","description":"Dot size and spacing across the grain field.","default":"fine","options":[{"value":"fine","label":"Fine"},{"value":"coarse","label":"Coarse"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used to color the dots and luminance wash.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Texture","badge":"Stable","codeLines":170}}
   attribution={{"path":"registry/components/grain-field","tags":["motion-primitive","background","grain","dots","texture","ambient","loopable"]}}
@@ -205,7 +209,9 @@ That writes one file: `compositions/components/grain-field.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -245,6 +251,4 @@ Tagged `motion-primitive` `background` `grain` `dots` `texture` `ambient` `loopa
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index 16b3b4eb04..56442f897d 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Grain Overlay</h1>
+  <p>Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/grain-overlay.json"
   compositionId="grain-overlay"
   compositionSrc="compositions/components/grain-overlay.html"
   title="Grain Overlay"
-  description="Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition"
   variables={[]}
   meta={{"category":"Texture","badge":"Stable","codeLines":75}}
   attribution={{"path":"registry/components/grain-overlay","tags":["texture","grain","overlay","film"]}}
@@ -110,7 +114,9 @@ That writes one file: `compositions/components/grain-overlay.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -130,6 +136,4 @@ Tagged `texture` `grain` `overlay` `film`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/grid-card-assemble.mdx b/docs/catalog/components/grid-card-assemble.mdx
index 2894ddca12..538558a78c 100644
--- a/docs/catalog/components/grid-card-assemble.mdx
+++ b/docs/catalog/components/grid-card-assemble.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Grid Card Assemble</h1>
+  <p>N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/grid-card-assemble.json"
   compositionId="grid-card-assemble"
   compositionSrc="compositions/components/grid-card-assemble.html"
   title="Grid Card Assemble"
-  description="N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still."
   variables={[{"id":"items","type":"string","role":"content","label":"Items","description":"Comma-separated cards (3 to 12). \"Label: body\" adds a one-line muted body under the label.","default":"Capture,Compose,Render,Publish"},{"id":"layout","type":"enum","role":"layout","label":"Layout","description":"Grid wraps by columns; list stacks vertically.","default":"grid","options":[{"value":"grid","label":"Grid"},{"value":"list","label":"List"}]},{"id":"columns","type":"number","role":"layout","label":"Columns","description":"Grid column count (grid layout only). 0 picks automatically: one row up to 3 items, then ceil(sqrt(N)).","default":0,"min":0,"max":4,"step":1},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated per-item entrance times in seconds. Blank entries use the default cascade.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the card icons.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"How the assembled layout leaves the frame. Default none: the hold ends the film.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":468}}
   attribution={{"path":"registry/components/grid-card-assemble","tags":["motion-primitive","layout","grid","list","stagger","assemble","feature-tour"]}}
@@ -503,7 +507,9 @@ That writes one file: `compositions/components/grid-card-assemble.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -547,6 +553,4 @@ Tagged `motion-primitive` `layout` `grid` `list` `stagger` `assemble` `feature-t
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index cb5771a18f..f29c3e1f26 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Grid Pixelate Wipe</h1>
+  <p>Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/grid-pixelate-wipe.json"
   compositionId="grid-pixelate-wipe"
   compositionSrc="compositions/components/grid-pixelate-wipe.html"
   title="Grid Pixelate Wipe"
-  description="Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":80}}
   attribution={{"path":"registry/components/grid-pixelate-wipe","tags":["transition","wipe","grid","pixelate"]}}
@@ -115,7 +119,9 @@ That writes one file: `compositions/components/grid-pixelate-wipe.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -135,6 +141,4 @@ Tagged `transition` `wipe` `grid` `pixelate`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/halftone-dissolve.mdx b/docs/catalog/components/halftone-dissolve.mdx
index b21934d978..b8f6811459 100644
--- a/docs/catalog/components/halftone-dissolve.mdx
+++ b/docs/catalog/components/halftone-dissolve.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Halftone Dissolve</h1>
+  <p>Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/halftone-dissolve.json"
   compositionId="halftone-dissolve"
   compositionSrc="compositions/components/halftone-dissolve.html"
   title="Halftone Dissolve"
-  description="Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A."
   variables={[{"id":"dot_size","type":"enum","role":"style","label":"Dot size","description":"Grid pitch for the halftone field.","default":"medium","options":[{"value":"small","label":"Small"},{"value":"medium","label":"Medium"},{"value":"large","label":"Large"}]},{"id":"direction","type":"enum","role":"timing","label":"Direction","description":"Threshold ordering: ltr sweeps left to right, center grows from the middle, noise scatters.","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"center","label":"Center out"},{"value":"noise","label":"Noise"}]},{"id":"dissolve_at","type":"number","role":"timing","label":"Dissolve at","description":"Seconds from mount start when the dissolve begins.","default":1.1,"min":0.2,"max":10,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Ink dot color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: scene B holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":420}}
   attribution={{"path":"registry/components/halftone-dissolve","tags":["motion-primitive","transition","texture","halftone","dissolve"]}}
@@ -455,7 +459,9 @@ That writes one file: `compositions/components/halftone-dissolve.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -498,6 +504,4 @@ Tagged `motion-primitive` `transition` `texture` `halftone` `dissolve`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/headline-slam.mdx b/docs/catalog/components/headline-slam.mdx
index bea7f69415..7de9a63267 100644
--- a/docs/catalog/components/headline-slam.mdx
+++ b/docs/catalog/components/headline-slam.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Headline Slam</h1>
+  <p>A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/headline-slam.json"
   compositionId="headline-slam"
   compositionSrc="compositions/components/headline-slam.html"
   title="Headline Slam"
-  description="A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit."
   variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text displayed as the headline.","default":"Ship it today"},{"id":"accent_word_index","type":"number","role":"content","label":"Accent word index","description":"Zero-based word index to color. Out of range leaves the headline unaccented.","default":1,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color applied to the selected word.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"shadow","type":"boolean","role":"style","label":"Shadow","description":"Drop shadow cast under the headline. On by default; set false for a flat matte look.","default":true}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":237}}
   attribution={{"path":"registry/components/headline-slam","tags":["motion-primitive","typography","headline","slam","impact","exit"]}}
@@ -272,7 +276,9 @@ That writes one file: `compositions/components/headline-slam.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -314,6 +320,4 @@ Tagged `motion-primitive` `typography` `headline` `slam` `impact` `exit`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
index 99dcd2a6f3..97864abd84 100644
--- a/docs/catalog/components/hw-arrow.mdx
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Hand-Drawn Arrow</h1>
+  <p>Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/hw-arrow.json"
   compositionId="hw-arrow"
   compositionSrc="compositions/components/hw-arrow.html"
   title="Hand-Drawn Arrow"
-  description="Wobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a travel-aligned head-arrival stretch pulse with spring recovery; boils while on screen"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":671}}
   attribution={{"path":"registry/components/hw-arrow","tags":["handwritten","annotation","arrow","overlay"]}}
@@ -706,7 +710,9 @@ That writes `compositions/components/hw-arrow.html`, plus 1 supporting file unde
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -725,6 +731,4 @@ Tagged `handwritten` `annotation` `arrow` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
index 1fa2b3f820..d6ac880c3e 100644
--- a/docs/catalog/components/hw-boil.mdx
+++ b/docs/catalog/components/hw-boil.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Hand-Drawn Boil</h1>
+  <p>Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/hw-boil.json"
   compositionId="hw-boil"
   compositionSrc="compositions/components/hw-boil.html"
   title="Hand-Drawn Boil"
-  description="Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher, a wobbled-ellipse path generator, the boil pose control (off/calm/lively over the family-locked frameDrop), a curvature-adaptive pen-velocity ease, and the completed stroke matrix (plain/soft/sharp/spray — spray is index-seeded deterministic dots, no turbulence) with texture-safe draw-on"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":504}}
   attribution={{"path":"registry/components/hw-boil","tags":["handwritten","effect","annotation"]}}
@@ -539,7 +543,9 @@ That writes `compositions/components/hw-boil.html`, plus 1 supporting file under
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -558,6 +564,4 @@ Tagged `handwritten` `effect` `annotation`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
index d31bf6b9ac..bd24632555 100644
--- a/docs/catalog/components/hw-box-label.mdx
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Hand-Drawn Box Label</h1>
+  <p>Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/hw-box-label.json"
   compositionId="hw-box-label"
   compositionSrc="compositions/components/hw-box-label.html"
   title="Hand-Drawn Box Label"
-  description="Wobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true contact squash and bouncy spring recovery, with a handwritten label above or centered; boils"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":551}}
   attribution={{"path":"registry/components/hw-box-label","tags":["handwritten","annotation","overlay"]}}
@@ -586,7 +590,9 @@ That writes `compositions/components/hw-box-label.html`, plus 1 supporting file
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -605,6 +611,4 @@ Tagged `handwritten` `annotation` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
index bf8b4ae27c..69319974ff 100644
--- a/docs/catalog/components/hw-callout-circle.mdx
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Scribble Callout Circle</h1>
+  <p>Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/hw-callout-circle.json"
   compositionId="hw-callout-circle"
   compositionSrc="compositions/components/hw-callout-circle.html"
   title="Scribble Callout Circle"
-  description="Wobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the drawn shapes absorb the arrival with a volume-preserving contact squash; outline and connector take the family stroke matrix (plain/soft/sharp/spray); boils"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":623}}
   attribution={{"path":"registry/components/hw-callout-circle","tags":["handwritten","annotation","callout","overlay"]}}
@@ -658,7 +662,9 @@ That writes `compositions/components/hw-callout-circle.html`, plus 1 supporting
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -677,6 +683,4 @@ Tagged `handwritten` `annotation` `callout` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
index 74468d97c3..ab964ec539 100644
--- a/docs/catalog/components/hw-underline.mdx
+++ b/docs/catalog/components/hw-underline.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Squiggle Marks</h1>
+  <p>Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/hw-underline.json"
   compositionId="hw-underline"
   compositionSrc="compositions/components/hw-underline.html"
   title="Squiggle Marks"
-  description="Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":257}}
   attribution={{"path":"registry/components/hw-underline","tags":["handwritten","annotation","text-treatment"]}}
@@ -292,7 +296,9 @@ That writes `compositions/components/hw-underline.html`, plus 1 supporting file
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -311,6 +317,4 @@ Tagged `handwritten` `annotation` `text-treatment`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/icon-morph-beat.mdx b/docs/catalog/components/icon-morph-beat.mdx
index eb06e7c4da..4c78d6b23c 100644
--- a/docs/catalog/components/icon-morph-beat.mdx
+++ b/docs/catalog/components/icon-morph-beat.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Icon Morph Beat</h1>
+  <p>An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/icon-morph-beat.json"
   compositionId="icon-morph-beat"
   compositionSrc="compositions/components/icon-morph-beat.html"
   title="Icon Morph Beat"
-  description="An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse."
   variables={[{"id":"pair","type":"enum","role":"content","label":"Icon pair","description":"Before and after icon states used by the morph.","default":"mic-check","options":[{"value":"mic-check","label":"Mic to check"},{"value":"play-check","label":"Play to check"},{"value":"lock-unlock","label":"Lock to unlock"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color applied as the morph completes.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":258}}
   attribution={{"path":"registry/components/icon-morph-beat","tags":["motion-primitive","product-demo","icon","morph","state-change","completion"]}}
@@ -293,7 +297,9 @@ That writes one file: `compositions/components/icon-morph-beat.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -333,6 +339,4 @@ Tagged `motion-primitive` `product-demo` `icon` `morph` `state-change` `completi
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/icon-swap.mdx b/docs/catalog/components/icon-swap.mdx
index 33dafb94e1..5b0b74077c 100644
--- a/docs/catalog/components/icon-swap.mdx
+++ b/docs/catalog/components/icon-swap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Icon Swap</h1>
+  <p>A scale-and-blur icon swap primitive for toolbar and action state changes</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/icon-swap.json"
   compositionId="icon-swap"
   compositionSrc="compositions/components/icon-swap.html"
   title="Icon Swap"
-  description="A scale-and-blur icon swap primitive for toolbar and action state changes"
   variables={[{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Button fill and glyph colour. Accent rides --brand.","default":"dark","options":[{"value":"dark","label":"Dark"},{"value":"light","label":"Light"},{"value":"accent","label":"Accent"}]},{"id":"size","type":"enum","role":"layout","label":"Size","description":"Button box and glyph size, from a toolbar chip to a hero action.","default":"standard","options":[{"value":"small","label":"Small"},{"value":"standard","label":"Standard"},{"value":"large","label":"Large"}]},{"id":"shape","type":"enum","role":"style","label":"Shape","description":"Corner treatment of the button box.","default":"rounded","options":[{"value":"rounded","label":"Rounded"},{"value":"circle","label":"Circle"},{"value":"square","label":"Square"}]},{"id":"blur","type":"enum","role":"motion","label":"Blur","description":"Scales the blur radius the timeline drives through the swap, from a light haze to a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":112}}
   attribution={{"path":"registry/components/icon-swap","tags":["video-primitive","transition-primitive","transitions-dev-port","icon","swap"]}}
@@ -147,7 +151,9 @@ That writes one file: `compositions/components/icon-swap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -190,6 +196,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `icon` `s
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/ink-bleed-reveal.mdx b/docs/catalog/components/ink-bleed-reveal.mdx
index f55df6d2ca..3e84da1a1d 100644
--- a/docs/catalog/components/ink-bleed-reveal.mdx
+++ b/docs/catalog/components/ink-bleed-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Ink Bleed Reveal</h1>
+  <p>Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/ink-bleed-reveal.json"
   compositionId="ink-bleed-reveal"
   compositionSrc="compositions/components/ink-bleed-reveal.html"
   title="Ink Bleed Reveal"
-  description="Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result."
   variables={[{"id":"blobs","type":"number","role":"style","label":"Blobs","description":"How many ink blobs bleed and merge (4 to 6).","default":5,"min":4,"max":6,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Ink tint: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the revealed mark holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Texture","badge":"Stable","codeLines":447}}
   attribution={{"path":"registry/components/ink-bleed-reveal","tags":["motion-primitive","texture","reveal","gooey","svg-filter","deterministic","experiment"]}}
@@ -482,7 +486,9 @@ That writes one file: `compositions/components/ink-bleed-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -523,6 +529,4 @@ Tagged `motion-primitive` `texture` `reveal` `gooey` `svg-filter` `deterministic
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/inline-highlight.mdx b/docs/catalog/components/inline-highlight.mdx
index 9c04dc333b..8d4a0800e5 100644
--- a/docs/catalog/components/inline-highlight.mdx
+++ b/docs/catalog/components/inline-highlight.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Inline Highlight</h1>
+  <p>A clean marker-style inline highlight that animates behind text using a CSS scale variable</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/inline-highlight.json"
   compositionId="inline-highlight"
   compositionSrc="compositions/components/inline-highlight.html"
   title="Inline Highlight"
-  description="A clean marker-style inline highlight that animates behind text using a CSS scale variable"
   variables={[{"id":"tint","type":"enum","role":"style","label":"Tint","description":"Marker colour. Green, blue and violet ride --brand, --accent and --accent-2.","default":"yellow","options":[{"value":"yellow","label":"Yellow"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"thickness","type":"enum","role":"style","label":"Thickness","description":"Height of the marker band behind the text, as a share of the font size.","default":"standard","options":[{"value":"thin","label":"Thin"},{"value":"standard","label":"Standard"},{"value":"thick","label":"Thick"}]},{"id":"origin","type":"enum","role":"motion","label":"Origin","description":"Edge the marker grows out of as the scale variable runs from 0 to 1.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"},{"value":"center","label":"Center"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":92}}
   attribution={{"path":"registry/components/inline-highlight","tags":["motion-primitive","text","highlight","caption"]}}
@@ -127,7 +131,9 @@ That writes one file: `compositions/components/inline-highlight.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -169,6 +175,4 @@ Tagged `motion-primitive` `text` `highlight` `caption`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/input-feedback.mdx b/docs/catalog/components/input-feedback.mdx
index 7bd8379bd5..1e3350afd2 100644
--- a/docs/catalog/components/input-feedback.mdx
+++ b/docs/catalog/components/input-feedback.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Input Feedback</h1>
+  <p>A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/input-feedback.json"
   compositionId="input-feedback"
   compositionSrc="compositions/components/input-feedback.html"
   title="Input Feedback"
-  description="A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state"
   variables={[{"id":"status","type":"enum","role":"style","label":"Status","description":"Whether the field reads as accepted or rejected, colouring the border, chip and hint.","default":"valid","options":[{"value":"valid","label":"Valid"},{"value":"error","label":"Error"}]},{"id":"value","type":"string","role":"content","label":"Value","description":"Text held by the field.","default":"mia@example.com"},{"id":"hint","type":"string","role":"content","label":"Hint","description":"Helper line under the field.","default":"Looks good."}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":155}}
   attribution={{"path":"registry/components/input-feedback","tags":["transition-primitive","transitions-dev-port","input","feedback"]}}
@@ -190,7 +194,9 @@ That writes one file: `compositions/components/input-feedback.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -232,6 +238,4 @@ Tagged `transition-primitive` `transitions-dev-port` `input` `feedback`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/iris-reveal.mdx b/docs/catalog/components/iris-reveal.mdx
index c69d6b4303..d687973ed2 100644
--- a/docs/catalog/components/iris-reveal.mdx
+++ b/docs/catalog/components/iris-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Iris Reveal</h1>
+  <p>A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/iris-reveal.json"
   compositionId="iris-reveal"
   compositionSrc="compositions/components/iris-reveal.html"
   title="Iris Reveal"
-  description="A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty."
   variables={[{"id":"iris_x","type":"number","role":"layout","label":"Iris origin X","description":"Horizontal iris origin as a percent of the frame width.","default":50,"min":0,"max":100,"step":1,"unit":"%"},{"id":"iris_y","type":"number","role":"layout","label":"Iris origin Y","description":"Vertical iris origin as a percent of the frame height.","default":50,"min":0,"max":100,"step":1,"unit":"%"},{"id":"open_at","type":"number","role":"timing","label":"Open start","description":"Seconds after mount start when the iris begins opening.","default":0.35,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"register","type":"enum","role":"style","label":"Register","description":"Color dims and desaturates the before state so the after state lands in full color. Plain leaves both untouched.","default":"color","options":[{"value":"color","label":"Color"},{"value":"plain","label":"Plain"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Iris rim ring and default after art tint.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the final revealed frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":478}}
   attribution={{"path":"registry/components/iris-reveal","tags":["transition","iris","circle-reveal","clip-path","bridge","slots"]}}
@@ -513,7 +517,9 @@ That writes one file: `compositions/components/iris-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -557,6 +563,4 @@ Tagged `transition` `iris` `circle-reveal` `clip-path` `bridge` `slots`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/keyframe-scrub-stack.mdx b/docs/catalog/components/keyframe-scrub-stack.mdx
index b171d22b03..a609e0cdb9 100644
--- a/docs/catalog/components/keyframe-scrub-stack.mdx
+++ b/docs/catalog/components/keyframe-scrub-stack.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Keyframe Scrub Stack</h1>
+  <p>A keyframe-sequenced stack of cards with offset timing and easing presets.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/keyframe-scrub-stack.json"
   compositionId="keyframe-scrub-stack"
   compositionSrc="compositions/components/keyframe-scrub-stack.html"
   title="Keyframe Scrub Stack"
-  description="A keyframe-sequenced stack of cards with offset timing and easing presets."
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":84}}
   attribution={{"path":"registry/components/keyframe-scrub-stack","tags":["advanced-motion","anime-inspired","hyperframes-native"]}}
@@ -119,7 +123,9 @@ That writes one file: `compositions/components/keyframe-scrub-stack.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -139,6 +145,4 @@ Tagged `advanced-motion` `anime-inspired` `hyperframes-native`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/kinetic-center-build.mdx b/docs/catalog/components/kinetic-center-build.mdx
index 9f6174821f..0d3273fd03 100644
--- a/docs/catalog/components/kinetic-center-build.mdx
+++ b/docs/catalog/components/kinetic-center-build.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Kinetic Center Build</h1>
+  <p>Words enter from the right and push the growing phrase left until the final line locks centered.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/kinetic-center-build.json"
   compositionId="kinetic-center-build"
   compositionSrc="compositions/components/kinetic-center-build.html"
   title="Kinetic Center Build"
-  description="Words enter from the right and push the growing phrase left until the final line locks centered."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Short phrase that builds one word at a time.","default":"Words push left."},{"id":"font_size","type":"number","role":"style","label":"Font size","description":"Maximum text size in pixels. Longer phrases shrink to stay inside the frame.","default":72,"min":36,"max":160,"step":2,"unit":"px"},{"id":"entry_offset","type":"number","role":"motion","label":"Entry offset","description":"Horizontal distance each new word travels before it lands.","default":88,"min":20,"max":160,"step":4,"unit":"px"},{"id":"color","type":"color","role":"style","label":"Color","description":"Text color for the full phrase.","default":"#171717"},{"id":"font_weight","type":"enum","role":"style","label":"Font weight","description":"Weight used by every word in the phrase.","default":"600","options":[{"value":"500","label":"Medium"},{"value":"600","label":"Semibold"},{"value":"700","label":"Bold"},{"value":"800","label":"Extra bold"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":284}}
   attribution={{"author":"Remocn","authorUrl":"https://github.com/Remocn/remocn","path":"registry/components/kinetic-center-build","tags":["motion-primitive","text-effects","kinetic-type","reveal","remocn-port"]}}
@@ -319,7 +323,9 @@ That writes one file: `compositions/components/kinetic-center-build.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -364,6 +370,4 @@ Created by [Remocn](https://github.com/Remocn/remocn).
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/kinetic-type-swap.mdx b/docs/catalog/components/kinetic-type-swap.mdx
index ff15b7d692..8c3a4ca719 100644
--- a/docs/catalog/components/kinetic-type-swap.mdx
+++ b/docs/catalog/components/kinetic-type-swap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Kinetic Type Swap</h1>
+  <p>A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/kinetic-type-swap.json"
   compositionId="kinetic-type-swap"
   compositionSrc="compositions/components/kinetic-type-swap.html"
   title="Kinetic Type Swap"
-  description="A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option."
   variables={[{"id":"prefix","type":"string","role":"content","label":"Prefix","description":"Fixed sentence text before the rolling word slot.","default":"Ship"},{"id":"options","type":"string","role":"content","label":"Options","description":"Comma-separated words shown in the rolling slot.","default":"faster,smarter,together"},{"id":"suffix","type":"string","role":"content","label":"Suffix","description":"Fixed sentence text after the rolling word slot.","default":""},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds (from mount start) for each word swap. Empty keeps the authored even spread.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the rolling word slot.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the sentence holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":373}}
   attribution={{"path":"registry/components/kinetic-type-swap","tags":["motion-primitive","text-effects","kinetic-type","word-swap","reveal"]}}
@@ -408,7 +412,9 @@ That writes one file: `compositions/components/kinetic-type-swap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -452,6 +458,4 @@ Tagged `motion-primitive` `text-effects` `kinetic-type` `word-swap` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/light-sweep-pass.mdx b/docs/catalog/components/light-sweep-pass.mdx
index d86a37368a..12b384f0d4 100644
--- a/docs/catalog/components/light-sweep-pass.mdx
+++ b/docs/catalog/components/light-sweep-pass.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Light Sweep Pass</h1>
+  <p>A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/light-sweep-pass.json"
   compositionId="light-sweep-pass"
   compositionSrc="compositions/components/light-sweep-pass.html"
   title="Light Sweep Pass"
-  description="A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty."
   variables={[{"id":"angle","type":"number","role":"style","label":"Angle","description":"Band and highlight gradient angle in degrees.","default":115,"min":60,"max":160,"step":1,"unit":"deg"},{"id":"sweep_at","type":"number","role":"timing","label":"Sweep start","description":"Seconds after mount start when the band starts crossing.","default":0.9,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"strength","type":"enum","role":"style","label":"Strength","description":"Band opacity and highlight bloom multiplier.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Tint inside the band and the highlight blooms.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the settled key.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":477}}
   attribution={{"path":"registry/components/light-sweep-pass","tags":["motion-primitive","overlay","light","sweep","slots","deterministic"]}}
@@ -512,7 +516,9 @@ That writes one file: `compositions/components/light-sweep-pass.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -555,6 +561,4 @@ Tagged `motion-primitive` `overlay` `light` `sweep` `slots` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/line-by-line-slide.mdx b/docs/catalog/components/line-by-line-slide.mdx
index 9821acdb85..568bbff9f0 100644
--- a/docs/catalog/components/line-by-line-slide.mdx
+++ b/docs/catalog/components/line-by-line-slide.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Line-by-Line Slide</h1>
+  <p>Each line enters from the left with staggered slide and exits to the right.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/line-by-line-slide.json"
   compositionId="line-by-line-slide"
   compositionSrc="compositions/components/line-by-line-slide.html"
   title="Line-by-Line Slide"
-  description="Each line enters from the left with staggered slide and exits to the right."
   variables={[{"id":"size","type":"enum","role":"layout","label":"Size","description":"Type size of the whole stack.","default":"standard","options":[{"value":"compact","label":"Compact"},{"value":"standard","label":"Standard"},{"value":"display","label":"Display"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Line colour: ink for light frames, paper for dark ones, accent rides the brand token.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"density","type":"enum","role":"layout","label":"Density","description":"The gap between lines, from a tight block to an airy stack.","default":"standard","options":[{"value":"fine","label":"Fine"},{"value":"standard","label":"Standard"},{"value":"coarse","label":"Coarse"}]},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which side the lines slide in from as the timeline drives the offset.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":105}}
   attribution={{"path":"registry/components/line-by-line-slide","tags":["motion-primitive","typography"]}}
@@ -140,7 +144,9 @@ That writes one file: `compositions/components/line-by-line-slide.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -183,6 +189,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/line-swap.mdx b/docs/catalog/components/line-swap.mdx
index 5058a6fed5..3e4eba3c76 100644
--- a/docs/catalog/components/line-swap.mdx
+++ b/docs/catalog/components/line-swap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Line Swap</h1>
+  <p>A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/line-swap.json"
   compositionId="line-swap"
   compositionSrc="compositions/components/line-swap.html"
   title="Line Swap"
-  description="A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B."
   variables={[{"id":"line_a","type":"string","role":"content","label":"Line A","description":"First line; holds center inside the mask, then exits up on the swap beat.","default":"Everyone promised you AI."},{"id":"line_b","type":"string","role":"content","label":"Line B","description":"Replacement line; enters bottom-up on the swap beat and holds.","default":"Almost nobody promised you control."},{"id":"swap_at","type":"number","role":"timing","label":"Swap at","description":"Second (from mount start) of the beat replacement. Clamped so the swap and underline complete before any exit.","default":1.5,"min":0,"step":0.1,"unit":"s"},{"id":"underline_word","type":"string","role":"content","label":"Underline word","description":"First case-insensitive substring match in line B gets the accent underline after landing. Empty disables it.","default":"control"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Underline color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the landed line holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":309}}
   attribution={{"path":"registry/components/line-swap","tags":["motion-primitive","text-effects","swap","beat","deterministic"]}}
@@ -344,7 +348,9 @@ That writes one file: `compositions/components/line-swap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -388,6 +394,4 @@ Tagged `motion-primitive` `text-effects` `swap` `beat` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/locked-nucleus-orbit.mdx b/docs/catalog/components/locked-nucleus-orbit.mdx
index ce74e07ed5..7052e31033 100644
--- a/docs/catalog/components/locked-nucleus-orbit.mdx
+++ b/docs/catalog/components/locked-nucleus-orbit.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Locked Nucleus Orbit</h1>
+  <p>A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/locked-nucleus-orbit.json"
   compositionId="locked-nucleus-orbit"
   compositionSrc="compositions/components/locked-nucleus-orbit.html"
   title="Locked Nucleus Orbit"
-  description="A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup."
   variables={[{"id":"label","type":"string","role":"content","label":"Nucleus label","description":"Text displayed inside the fixed center nucleus.","default":"core"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the nucleus, rings, and satellite markers.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"satellites","type":"number","role":"layout","label":"Satellites","description":"Number of orbiting copy chips.","default":4,"min":3,"max":6,"step":1}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":353}}
   attribution={{"path":"registry/components/locked-nucleus-orbit","tags":["motion-primitive","intro","reveal","orbit","lockup","deterministic"]}}
@@ -388,7 +392,9 @@ That writes one file: `compositions/components/locked-nucleus-orbit.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -429,6 +435,4 @@ Tagged `motion-primitive` `intro` `reveal` `orbit` `lockup` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/logo-brand-close.mdx b/docs/catalog/components/logo-brand-close.mdx
index 0d99b17435..cef64104f5 100644
--- a/docs/catalog/components/logo-brand-close.mdx
+++ b/docs/catalog/components/logo-brand-close.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Logo Brand Close</h1>
+  <p>A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/logo-brand-close.json"
   compositionId="logo-brand-close"
   compositionSrc="compositions/components/logo-brand-close.html"
   title="Logo Brand Close"
-  description="A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film."
   variables={[{"id":"wordmark","type":"string","role":"content","label":"Wordmark","description":"Brand name whose letters cascade into the centered lockup.","default":"HYPERFRAMES"},{"id":"tagline","type":"string","role":"content","label":"Tagline","description":"Optional tagline that settles beneath the wordmark. Empty hides it.","default":"Write HTML. Render video."},{"id":"url","type":"string","role":"content","label":"URL","description":"Optional mono URL line beneath the tagline. Empty hides it.","default":"hyperframes.heygen.com"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color used by the brand period at the end of the wordmark.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. Films end on the still hold, so the default is none.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":367}}
   attribution={{"path":"registry/components/logo-brand-close","tags":["motion-primitive","typography","brand","logo","end-card","close"]}}
@@ -402,7 +406,9 @@ That writes one file: `compositions/components/logo-brand-close.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -445,6 +451,4 @@ Tagged `motion-primitive` `typography` `brand` `logo` `end-card` `close`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/logo-sting.mdx b/docs/catalog/components/logo-sting.mdx
index ccf0a4b5dd..f266e5766f 100644
--- a/docs/catalog/components/logo-sting.mdx
+++ b/docs/catalog/components/logo-sting.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Logo Sting</h1>
+  <p>A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/logo-sting.json"
   compositionId="logo-sting"
   compositionSrc="compositions/components/logo-sting.html"
   title="Logo Sting"
-  description="A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still."
   variables={[{"id":"wordmark","type":"string","role":"content","label":"Wordmark","description":"Brand name displayed in the final lockup.","default":"HYPERFRAMES"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color of the single impact ring.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":180}}
   attribution={{"path":"registry/components/logo-sting","tags":["motion-primitive","brand","logo","sting","impact","reveal"]}}
@@ -215,7 +219,9 @@ That writes one file: `compositions/components/logo-sting.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -255,6 +261,4 @@ Tagged `motion-primitive` `brand` `logo` `sting` `impact` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/logo-wall.mdx b/docs/catalog/components/logo-wall.mdx
index d0925961f9..f7b6f5a514 100644
--- a/docs/catalog/components/logo-wall.mdx
+++ b/docs/catalog/components/logo-wall.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Logo Wall</h1>
+  <p>A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/logo-wall.json"
   compositionId="logo-wall"
   compositionSrc="compositions/components/logo-wall.html"
   title="Logo Wall"
-  description="A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger."
   variables={[{"id":"rows","type":"number","role":"layout","label":"Rows","description":"Number of logo rows in the wall.","default":3,"min":2,"max":4,"step":1},{"id":"cols","type":"number","role":"layout","label":"Columns","description":"Number of logo columns in the wall.","default":5,"min":3,"max":6,"step":1},{"id":"stagger","type":"number","role":"motion","label":"Stagger","description":"Delay between consecutive logo cell entrances.","default":45,"min":20,"max":75,"step":1,"unit":"ms"}]}
   meta={{"category":"Data","badge":"Stable","codeLines":299}}
   attribution={{"path":"registry/components/logo-wall","tags":["data","logos","social-proof","stagger","prove"]}}
@@ -334,7 +338,9 @@ That writes one file: `compositions/components/logo-wall.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -375,6 +381,4 @@ Tagged `data` `logos` `social-proof` `stagger` `prove`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/magnetic-cursor.mdx b/docs/catalog/components/magnetic-cursor.mdx
index e7ec9866f6..0ce8c63c22 100644
--- a/docs/catalog/components/magnetic-cursor.mdx
+++ b/docs/catalog/components/magnetic-cursor.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Magnetic Cursor</h1>
+  <p>A soft dot pointer glides across an editor toolbar, is pulled into each button and morphs into its rounded hover plate while the icon leans toward it, presses one, and leaves as a dot.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/magnetic-cursor.json"
   compositionId="magnetic-cursor"
   compositionSrc="compositions/components/magnetic-cursor.html"
   title="Magnetic Cursor"
-  description="A soft dot pointer glides across an editor toolbar, is pulled into each button and morphs into its rounded hover plate while the icon leans toward it, presses one, and leaves as a dot."
   variables={[{"id":"accent","type":"color","role":"style","label":"Accent","default":"#3b82f6"},{"id":"tone","type":"enum","role":"style","label":"Tone","default":"light","options":[{"value":"light","label":"Light toolbar"},{"value":"dark","label":"Dark toolbar"}]},{"id":"visits","type":"string","role":"content","label":"Buttons visited","description":"Comma-separated indexes 0-5: bold, italic, underline, link, list, image.","default":"0,3"},{"id":"press","type":"number","role":"timing","label":"Pressed visit","default":2,"min":1,"max":3,"step":1}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":427}}
   attribution={{"path":"registry/components/magnetic-cursor","tags":["cursor","motion-primitive","pointer","hover","morph","toolbar"]}}
@@ -462,7 +466,9 @@ That writes one file: `compositions/components/magnetic-cursor.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -504,6 +510,4 @@ Tagged `cursor` `motion-primitive` `pointer` `hover` `morph` `toolbar`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/marker-checklist-card.mdx b/docs/catalog/components/marker-checklist-card.mdx
index aaeec5a10b..4d328fa062 100644
--- a/docs/catalog/components/marker-checklist-card.mdx
+++ b/docs/catalog/components/marker-checklist-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Marker Checklist Card</h1>
+  <p>A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/marker-checklist-card.json"
   compositionId="marker-checklist-card"
   compositionSrc="compositions/components/marker-checklist-card.html"
   title="Marker Checklist Card"
-  description="A hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks draw themselves on - typewriter labels, marker values. The paper-and-marker sibling of mk-specs-list's clean professional rows"
   variables={[{"id":"top","type":"string","role":"content","label":"Headline top","description":"First marker line.","default":"THE POWER"},{"id":"mid","type":"string","role":"content","label":"Headline middle","description":"Small connecting word under the underline.","default":"OF"},{"id":"circled","type":"string","role":"content","label":"Circled word","description":"The word the marker ellipse draws around.","default":"ONE"},{"id":"rest","type":"string","role":"content","label":"Headline rest","description":"The rest of the bottom line.","default":"FILE"},{"id":"l1","type":"string","role":"content","label":"Row 1 label","description":"Typewriter label of row 1.","default":"WRITE"},{"id":"v1","type":"string","role":"content","label":"Row 1 value","description":"Marker value of row 1.","default":"HTML"},{"id":"l2","type":"string","role":"content","label":"Row 2 label","description":"Typewriter label of row 2.","default":"RENDER"},{"id":"v2","type":"string","role":"content","label":"Row 2 value","description":"Marker value of row 2.","default":"IN 4K"},{"id":"l3","type":"string","role":"content","label":"Row 3 label","description":"Typewriter label of row 3.","default":"SHIP"},{"id":"v3","type":"string","role":"content","label":"Row 3 value","description":"Marker value of row 3.","default":"TODAY"}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":306}}
   attribution={{"author":"Miao Yang","path":"registry/components/marker-checklist-card","tags":["motion-primitive","handwritten","checklist","paper","marker"]}}
@@ -341,7 +345,9 @@ That writes `compositions/components/marker-checklist-card.html`, plus 2 support
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -391,6 +397,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/marker-highlight.mdx b/docs/catalog/components/marker-highlight.mdx
index 55a3489aa4..99633a5d72 100644
--- a/docs/catalog/components/marker-highlight.mdx
+++ b/docs/catalog/components/marker-highlight.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Marker Highlight</h1>
+  <p>Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/marker-highlight.json"
   compositionId="marker-highlight"
   compositionSrc="compositions/components/marker-highlight.html"
   title="Marker Highlight"
-  description="Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Full line of display text.","default":"Ship it with confidence"},{"id":"emphasis_word","type":"string","role":"content","label":"Emphasis word","description":"First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.","default":"confidence"},{"id":"style","type":"enum","role":"style","label":"Marker style","description":"Shape of the hand-drawn marker stroke.","default":"highlight","options":[{"value":"highlight","label":"Highlight"},{"value":"circle","label":"Circle"},{"value":"underline","label":"Underline"},{"value":"scribble","label":"Scribble"}]},{"id":"draw_at","type":"number","role":"timing","label":"Draw at","description":"Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.","default":0.9,"min":0,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Marker ink color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":365}}
   attribution={{"path":"registry/components/marker-highlight","tags":["motion-primitive","typography","emphasis","marker","deterministic"]}}
@@ -400,7 +404,9 @@ That writes one file: `compositions/components/marker-highlight.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -444,6 +450,4 @@ Tagged `motion-primitive` `typography` `emphasis` `marker` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/match-cut.mdx b/docs/catalog/components/match-cut.mdx
index a63458d065..1c2f9c89eb 100644
--- a/docs/catalog/components/match-cut.mdx
+++ b/docs/catalog/components/match-cut.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Match Cut</h1>
+  <p>A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/match-cut.json"
   compositionId="match-cut"
   compositionSrc="compositions/components/match-cut.html"
   title="Match Cut"
-  description="A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose."
   variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color shared by the matched circles.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"label_a","type":"string","role":"content","label":"Scene A label","description":"Text inside the outgoing button.","default":"Start"},{"id":"label_b","type":"string","role":"content","label":"Scene B label","description":"Result text revealed after the cut.","default":"Done"}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":309}}
   attribution={{"path":"registry/components/match-cut","tags":["motion-primitive","transition","match-cut","hard-cut","continuity"]}}
@@ -344,7 +348,9 @@ That writes one file: `compositions/components/match-cut.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -385,6 +391,4 @@ Tagged `motion-primitive` `transition` `match-cut` `hard-cut` `continuity`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/matrix-decode.mdx b/docs/catalog/components/matrix-decode.mdx
index b3325dea51..1e5f17a647 100644
--- a/docs/catalog/components/matrix-decode.mdx
+++ b/docs/catalog/components/matrix-decode.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Matrix Decode</h1>
+  <p>Random scramble resolves left-to-right into the target text.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/matrix-decode.json"
   compositionId="matrix-decode"
   compositionSrc="compositions/components/matrix-decode.html"
   title="Matrix Decode"
-  description="Random scramble resolves left-to-right into the target text."
   variables={[{"id":"text","type":"string","role":"content","label":"Target text","description":"Word the scramble resolves into. One scrambling cell per character, up to 32.","default":"HYPERFRAMES"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour family of the cells and their glow.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"size","type":"number","role":"style","label":"Size","description":"Type size of the cells in pixels. Cell width follows it.","default":64,"min":24,"max":160,"step":4,"unit":"px"},{"id":"glow","type":"enum","role":"style","label":"Glow","description":"Strength of the halo behind the cells, from none to a heavy bloom.","default":"standard","options":[{"value":"none","label":"None"},{"value":"standard","label":"Standard"},{"value":"strong","label":"Strong"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":128}}
   attribution={{"path":"registry/components/matrix-decode","tags":["motion-primitive","typography"]}}
@@ -163,7 +167,9 @@ That writes one file: `compositions/components/matrix-decode.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -206,6 +212,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/menu-morph.mdx b/docs/catalog/components/menu-morph.mdx
index 1911dcc9ce..32edc1db1d 100644
--- a/docs/catalog/components/menu-morph.mdx
+++ b/docs/catalog/components/menu-morph.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Menu Morph</h1>
+  <p>A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/menu-morph.json"
   compositionId="menu-morph"
   compositionSrc="compositions/components/menu-morph.html"
   title="Menu Morph"
-  description="A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus"
   variables={[{"id":"actions","type":"string","role":"content","label":"Actions","description":"Comma separated labels for the pills that fan out under the button. Up to six.","default":"Text, Image, Audio"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of the round button behind the white bars.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"size","type":"number","role":"layout","label":"Button size","description":"Diameter of the round button in pixels. The bars scale with it.","default":68,"min":52,"max":112,"step":4,"unit":"px"}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":161}}
   attribution={{"path":"registry/components/menu-morph","tags":["video-primitive","transition-primitive","transitions-dev-port","menu","morph"]}}
@@ -196,7 +200,9 @@ That writes one file: `compositions/components/menu-morph.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -238,6 +244,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `menu` `m
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/mesh-gradient-bg.mdx b/docs/catalog/components/mesh-gradient-bg.mdx
index 53b2c06581..93cff167f1 100644
--- a/docs/catalog/components/mesh-gradient-bg.mdx
+++ b/docs/catalog/components/mesh-gradient-bg.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Mesh Gradient Background</h1>
+  <p>A render-safe mesh gradient using animated radial layers.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/mesh-gradient-bg.json"
   compositionId="mesh-gradient-bg"
   compositionSrc="compositions/components/mesh-gradient-bg.html"
   title="Mesh Gradient Background"
-  description="A render-safe mesh gradient using animated radial layers."
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":101}}
   attribution={{"path":"registry/components/mesh-gradient-bg","tags":["effect"]}}
@@ -136,7 +140,9 @@ That writes one file: `compositions/components/mesh-gradient-bg.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -156,6 +162,4 @@ Tagged `effect`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/micro-transitions.mdx b/docs/catalog/components/micro-transitions.mdx
index e33af392d9..4131eed6d7 100644
--- a/docs/catalog/components/micro-transitions.mdx
+++ b/docs/catalog/components/micro-transitions.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Micro Transitions</h1>
+  <p>A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/micro-transitions.json"
   compositionId="micro-transitions"
   compositionSrc="compositions/components/micro-transitions.html"
   title="Micro Transitions"
-  description="A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions"
   variables={[{"id":"badge","type":"string","role":"content","label":"Badge","description":"Count inside the notification badge on the bell.","default":"3"},{"id":"tooltip","type":"string","role":"content","label":"Tooltip","description":"Wording inside the small dark tooltip.","default":"Copied"},{"id":"tone","type":"enum","role":"style","label":"Badge tone","description":"Colour of the notification badge chip.","default":"red","options":[{"value":"red","label":"Red"},{"value":"amber","label":"Amber"},{"value":"violet","label":"Violet"}]},{"id":"travel","type":"enum","role":"motion","label":"Travel","description":"Scales how far every panel starts from its resting place before it settles.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":264}}
   attribution={{"path":"registry/components/micro-transitions","tags":["transition-primitive","motion-primitive","transitions-dev-port","ui","transition","microinteraction"]}}
@@ -299,7 +303,9 @@ That writes one file: `compositions/components/micro-transitions.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -342,6 +348,4 @@ Tagged `transition-primitive` `motion-primitive` `transitions-dev-port` `ui` `tr
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
index 29ca8a15d8..7e2479fa5c 100644
--- a/docs/catalog/components/mk-emphasis-type.mdx
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Background Emphasis Type</h1>
+  <p>Oversized low-contrast background word drifting slowly behind the subject — typography as texture</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/mk-emphasis-type.json"
   compositionId="mk-emphasis-type"
   compositionSrc="compositions/components/mk-emphasis-type.html"
   title="Background Emphasis Type"
-  description="Oversized low-contrast background word drifting slowly behind the subject — typography as texture"
   variables={[]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":97}}
   attribution={{"path":"registry/components/mk-emphasis-type","tags":["typography","text-treatment","minimal"]}}
@@ -132,7 +136,9 @@ That writes one file: `compositions/components/mk-emphasis-type.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -151,6 +157,4 @@ Tagged `typography` `text-treatment` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
index 721a8769f2..bea9c044d6 100644
--- a/docs/catalog/components/mk-usage-arc.mdx
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Hairline Arc Gauge</h1>
+  <p>Thin circular gauge that draws on while its percentage counts up; one helper call drives both</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/mk-usage-arc.json"
   compositionId="mk-usage-arc"
   compositionSrc="compositions/components/mk-usage-arc.html"
   title="Hairline Arc Gauge"
-  description="Thin circular gauge that draws on while its percentage counts up; one helper call drives both"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":159}}
   attribution={{"path":"registry/components/mk-usage-arc","tags":["data-viz","gauge","minimal"]}}
@@ -194,7 +198,9 @@ That writes one file: `compositions/components/mk-usage-arc.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -213,6 +219,4 @@ Tagged `data-viz` `gauge` `minimal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/modal-morph.mdx b/docs/catalog/components/modal-morph.mdx
index 238fa0853b..7320dfc04a 100644
--- a/docs/catalog/components/modal-morph.mdx
+++ b/docs/catalog/components/modal-morph.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Modal Morph</h1>
+  <p>A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/modal-morph.json"
   compositionId="modal-morph"
   compositionSrc="compositions/components/modal-morph.html"
   title="Modal Morph"
-  description="A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time."
   variables={[{"id":"from_scale","type":"number","role":"style","label":"From scale","description":"Multiplies the authored card footprint, clamped 0.5 to 1.5.","default":1},{"id":"expand_at","type":"number","role":"timing","label":"Expand at","description":"Seconds after mount when the card grows into the panel.","default":1.2},{"id":"register","type":"enum","role":"timing","label":"Register","description":"Morph feel. Snappy is faster with a settle capped at 1.02 of the target rect.","default":"calm","options":[{"value":"calm","label":"Calm"},{"value":"snappy","label":"Snappy"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled panel holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":522}}
   attribution={{"path":"registry/components/modal-morph","tags":["motion-primitive","structure","flip","shared-element","modal","deterministic","experiment"]}}
@@ -557,7 +561,9 @@ That writes one file: `compositions/components/modal-morph.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -600,6 +606,4 @@ Tagged `motion-primitive` `structure` `flip` `shared-element` `modal` `determini
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/morph-swap.mdx b/docs/catalog/components/morph-swap.mdx
index abaa84d8df..12fe2a8ef0 100644
--- a/docs/catalog/components/morph-swap.mdx
+++ b/docs/catalog/components/morph-swap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Morph Swap</h1>
+  <p>Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/morph-swap.json"
   compositionId="morph-swap"
   compositionSrc="compositions/components/morph-swap.html"
   title="Morph Swap"
-  description="Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty."
   variables={[{"id":"swap_at","type":"number","role":"timing","label":"Swap start","description":"Seconds after mount start when the morph begins.","default":1.4,"min":0.1,"max":8,"step":0.05,"unit":"s"},{"id":"register","type":"enum","role":"style","label":"Register","description":"Morph mechanic: condense shrink-fades A into B at center; reshape morphs the silhouette on scaleX/scaleY.","default":"condense","options":[{"value":"condense","label":"Condense"},{"value":"reshape","label":"Reshape"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Incoming card accent color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the final frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":387}}
   attribution={{"path":"registry/components/morph-swap","tags":["transition","morph","swap","condense","reshape","holdable","slots"]}}
@@ -422,7 +426,9 @@ That writes one file: `compositions/components/morph-swap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -464,6 +470,4 @@ Tagged `transition` `morph` `swap` `condense` `reshape` `holdable` `slots`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 1ee47ce464..34709f5a38 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Morph Text</h1>
+  <p>Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/morph-text.json"
   compositionId="morph-text"
   compositionSrc="compositions/components/morph-text.html"
   title="Morph Text"
-  description="Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect"
   variables={[]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":234}}
   attribution={{"path":"registry/components/morph-text","tags":["text","text-effect","typography","morph","gooey","kinetic","animation"]}}
@@ -269,7 +273,9 @@ That writes one file: `compositions/components/morph-text.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -288,6 +294,4 @@ Tagged `text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index bac52f5dc0..f0093a8b5f 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Motion Blur</h1>
+  <p>After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/motion-blur.json"
   compositionId="motion-blur"
   compositionSrc="compositions/components/motion-blur.html"
   title="Motion Blur"
-  description="After Effects-style motion blur — integrates each element over a shutter window (shutter angle, phase, samples per frame) by sampling the GSAP timeline at sub-frame times and averaging equal-weight additive copies of the element along its real trajectory, so translation, scale, rotation, 3D rotation and skew all drive the smear"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":767}}
   attribution={{"path":"registry/components/motion-blur","tags":["effect","motion-blur","shutter","after-effects","velocity","animation"]}}
@@ -802,7 +806,9 @@ That writes one file: `compositions/components/motion-blur.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Usage
 
@@ -865,6 +871,4 @@ Tagged `effect` `motion-blur` `shutter` `after-effects` `velocity` `animation`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/multi-device-splay.mdx b/docs/catalog/components/multi-device-splay.mdx
index 493ff2feb2..dfa3f34753 100644
--- a/docs/catalog/components/multi-device-splay.mdx
+++ b/docs/catalog/components/multi-device-splay.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Multi Device Splay</h1>
+  <p>Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/multi-device-splay.json"
   compositionId="multi-device-splay"
   compositionSrc="compositions/components/multi-device-splay.html"
   title="Multi Device Splay"
-  description="Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float."
   variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Shared accent color used by all three product screens.","default":"blue","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":727}}
   attribution={{"path":"registry/components/multi-device-splay","tags":["motion-primitive","device","phone","tablet","desktop","splay"]}}
@@ -762,7 +766,9 @@ That writes one file: `compositions/components/multi-device-splay.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -801,6 +807,4 @@ Tagged `motion-primitive` `device` `phone` `tablet` `desktop` `splay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/multiplayer-cursors.mdx b/docs/catalog/components/multiplayer-cursors.mdx
index 97af5b12dd..be72221dc6 100644
--- a/docs/catalog/components/multiplayer-cursors.mdx
+++ b/docs/catalog/components/multiplayer-cursors.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Multiplayer Cursors</h1>
+  <p>Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/multiplayer-cursors.json"
   compositionId="multiplayer-cursors"
   compositionSrc="compositions/components/multiplayer-cursors.html"
   title="Multiplayer Cursors"
-  description="Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence."
   variables={[{"id":"cursorCount","type":"number","role":"content","label":"Cursor count","description":"Number of labeled collaborator cursors.","default":4,"min":2,"max":6,"step":1},{"id":"labels","type":"string","role":"content","label":"Labels","description":"Comma-separated cursor names, in order.","default":"Ana,Ken,Wen,Mia"}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":429}}
   attribution={{"path":"registry/components/multiplayer-cursors","tags":["cursor","pointer","multiplayer","collaboration","presence","loop","prove"]}}
@@ -464,7 +468,9 @@ That writes one file: `compositions/components/multiplayer-cursors.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -504,6 +510,4 @@ Tagged `cursor` `pointer` `multiplayer` `collaboration` `presence` `loop` `prove
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/native-notification-pop.mdx b/docs/catalog/components/native-notification-pop.mdx
index 8e13c599a1..e711b9673d 100644
--- a/docs/catalog/components/native-notification-pop.mdx
+++ b/docs/catalog/components/native-notification-pop.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Native Notification Pop</h1>
+  <p>One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/native-notification-pop.json"
   compositionId="native-notification-pop"
   compositionSrc="compositions/components/native-notification-pop.html"
   title="Native Notification Pop"
-  description="One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit."
   variables={[{"id":"title","type":"string","role":"content","label":"Title","description":"The notification title line.","default":"Render complete"},{"id":"body","type":"string","role":"content","label":"Body","description":"One body line. Long lines truncate with an ellipsis.","default":"launch-cut.mp4 is ready to preview"},{"id":"app_label","type":"string","role":"content","label":"App label","description":"Small-caps app name row beside the app dot.","default":"HyperFrames"},{"id":"os","type":"enum","role":"style","label":"OS","description":"Banner geometry and placement: wide centered iOS or compact top-right macOS.","default":"ios","options":[{"value":"ios","label":"iOS"},{"value":"macos","label":"macOS"}]},{"id":"at","type":"number","role":"timing","label":"Drop start","description":"Seconds after mount start when the banner drops in.","default":0.3,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"App dot color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"None holds the banner; up tucks it back off the top; fade fades it in place.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":456}}
   attribution={{"path":"registry/components/native-notification-pop","tags":["motion-primitive","product-demo","overlay","notification","spring"]}}
@@ -491,7 +495,9 @@ That writes one file: `compositions/components/native-notification-pop.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -536,6 +542,4 @@ Tagged `motion-primitive` `product-demo` `overlay` `notification` `spring`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/notes-typing.mdx b/docs/catalog/components/notes-typing.mdx
index df77f9db2d..38eb52601a 100644
--- a/docs/catalog/components/notes-typing.mdx
+++ b/docs/catalog/components/notes-typing.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Notes Typing</h1>
+  <p>The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/notes-typing.json"
   compositionId="notes-typing"
   compositionSrc="compositions/components/notes-typing.html"
   title="Notes Typing"
-  description="The notes-app confession as a mountable scene: a bold title, then body lines typed character by character on the measured human keystroke rhythm, the caret riding every landed character and jumping down at each paragraph. For a bare prompt line use typed-prompt; for an even mechanical reveal use typewriter"
   variables={[{"id":"title","type":"string","role":"content","label":"Title","description":"Bold note title. A | breaks the line.","default":"Things nobody told me|about video."},{"id":"lines","type":"string","role":"content","label":"Lines","description":"Pipe-separated body lines, typed one after another.","default":"my videos sucked|my tools cost $$$|and re-edits never end."},{"id":"speed","type":"number","role":"timing","label":"Speed","description":"Typing speed multiplier. 1 is the measured human rhythm.","default":1,"min":0.5,"max":2,"step":0.1}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":347}}
   attribution={{"author":"Miao Yang","path":"registry/components/notes-typing","tags":["motion-primitive","notes","typing","mock-ui","vertical"]}}
@@ -382,7 +386,9 @@ That writes one file: `compositions/components/notes-typing.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -425,6 +431,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/notification-pileup.mdx b/docs/catalog/components/notification-pileup.mdx
index 723dabc9ea..b7343f664b 100644
--- a/docs/catalog/components/notification-pileup.mdx
+++ b/docs/catalog/components/notification-pileup.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Notification Pileup</h1>
+  <p>Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/notification-pileup.json"
   compositionId="notification-pileup"
   compositionSrc="compositions/components/notification-pileup.html"
   title="Notification Pileup"
-  description="Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower."
   variables={[{"id":"count","type":"number","role":"content","label":"Notification count","description":"Number of notification cards in the final pile.","default":7,"min":4,"max":10,"step":1},{"id":"speed","type":"number","role":"timing","label":"Arrival speed","description":"Pacing multiplier for the accelerating notification arrivals.","default":1,"min":0.5,"max":2,"step":0.1},{"id":"showBadges","type":"enum","role":"content","label":"Unread badges","description":"Show or hide unread count badges on the notification cards.","default":"yes","options":[{"value":"yes","label":"Show badges"},{"value":"no","label":"Hide badges"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":463}}
   attribution={{"path":"registry/components/notification-pileup","tags":["notification","mobile","ui-props","overload","pileup","loop","agitate"]}}
@@ -498,7 +502,9 @@ That writes one file: `compositions/components/notification-pileup.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -539,6 +545,4 @@ Tagged `notification` `mobile` `ui-props` `overload` `pileup` `loop` `agitate`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/notification-stack.mdx b/docs/catalog/components/notification-stack.mdx
index 7ea0d276b4..f8d11c4a44 100644
--- a/docs/catalog/components/notification-stack.mdx
+++ b/docs/catalog/components/notification-stack.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Notification Stack</h1>
+  <p>1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/notification-stack.json"
   compositionId="notification-stack"
   compositionSrc="compositions/components/notification-stack.html"
   title="Notification Stack"
-  description="1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position."
   variables={[{"id":"titles","type":"string","role":"content","label":"Titles","description":"Comma-separated card titles (1 to 5 cards).","default":"Build queued,Checks passed,Deploy live"},{"id":"bodies","type":"string","role":"content","label":"Bodies","description":"Comma-separated body lines matched to titles by index. Blank entries hide that body line.","default":"Pipeline started for main,All 42 checks green,Now serving version 2.4"},{"id":"expand","type":"number","role":"content","label":"Expand","description":"Index of the focus card in the titles list. -1 focuses the newest card (top of the stack).","default":-1,"min":-1,"max":4,"step":1},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated per-card arrival times in seconds. Blank entries use the default rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the icon dots.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"How the stack leaves the frame. Default none: the hold ends the film.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":387}}
   attribution={{"path":"registry/components/notification-stack","tags":["motion-primitive","product-demo","notification","stack","stagger"]}}
@@ -422,7 +426,9 @@ That writes one file: `compositions/components/notification-stack.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -466,6 +472,4 @@ Tagged `motion-primitive` `product-demo` `notification` `stack` `stagger`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/number-pop-in.mdx b/docs/catalog/components/number-pop-in.mdx
index 80f43fcbf3..d8f6f9e274 100644
--- a/docs/catalog/components/number-pop-in.mdx
+++ b/docs/catalog/components/number-pop-in.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Number Pop In</h1>
+  <p>A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/number-pop-in.json"
   compositionId="number-pop-in"
   compositionSrc="compositions/components/number-pop-in.html"
   title="Number Pop In"
-  description="A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal"
   variables={[{"id":"value","type":"string","role":"content","label":"Value","description":"The number itself. Every character becomes its own span, so the stagger still lands character by character.","default":"5.7"},{"id":"unit","type":"string","role":"content","label":"Unit","description":"Small suffix printed after the number. Pass an empty string to drop it.","default":"k"},{"id":"lift","type":"enum","role":"motion","label":"Lift","description":"Scales the offset the timeline drives, so the characters cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Number colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":120}}
   attribution={{"path":"registry/components/number-pop-in","tags":["video-primitive","transition-primitive","transitions-dev-port","number","pop"]}}
@@ -155,7 +159,9 @@ That writes one file: `compositions/components/number-pop-in.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -198,6 +204,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `number`
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/number-wheel.mdx b/docs/catalog/components/number-wheel.mdx
index 2c5d90ae2a..33cd394a1f 100644
--- a/docs/catalog/components/number-wheel.mdx
+++ b/docs/catalog/components/number-wheel.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Number Wheel</h1>
+  <p>A rolling digit counter primitive for metrics, prices, counts, and scoreboards</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/number-wheel.json"
   compositionId="number-wheel"
   compositionSrc="compositions/components/number-wheel.html"
   title="Number Wheel"
-  description="A rolling digit counter primitive for metrics, prices, counts, and scoreboards"
   variables={[{"id":"spin","type":"enum","role":"motion","label":"Spin","description":"How many full 0 to 9 revolutions each column adds before it lands, which is how far the reel travels in the same time.","default":"single","options":[{"value":"single","label":"Single"},{"value":"double","label":"Double"},{"value":"triple","label":"Triple"}]},{"id":"spacing","type":"enum","role":"layout","label":"Spacing","description":"Gap between the digit columns.","default":"standard","options":[{"value":"tight","label":"Tight"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Digit colour: inherit keeps the surrounding text colour, ink suits light frames, paper suits dark ones, accent rides --brand.","default":"inherit","options":[{"value":"inherit","label":"Inherit"},{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":122}}
   attribution={{"path":"registry/components/number-wheel","tags":["video-primitive","motion-primitive","number","counter","data"]}}
@@ -157,7 +161,9 @@ That writes one file: `compositions/components/number-wheel.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -199,6 +205,4 @@ Tagged `video-primitive` `motion-primitive` `number` `counter` `data`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/offset-path-traveler.mdx b/docs/catalog/components/offset-path-traveler.mdx
index 6cbf739759..175abbe9b9 100644
--- a/docs/catalog/components/offset-path-traveler.mdx
+++ b/docs/catalog/components/offset-path-traveler.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Offset Path Traveler</h1>
+  <p>A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/offset-path-traveler.json"
   compositionId="offset-path-traveler"
   compositionSrc="compositions/components/offset-path-traveler.html"
   title="Offset Path Traveler"
-  description="A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit."
   variables={[{"id":"path","type":"string","role":"content","label":"Path","description":"SVG path data authored in a 1000 by 500 route viewBox.","default":"M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35"},{"id":"traveler_label","type":"string","role":"content","label":"Traveler label","description":"Text displayed inside the default traveler chip.","default":"Live preview"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the traveler and route.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":287}}
   attribution={{"path":"registry/components/offset-path-traveler","tags":["motion-primitive","product-demo","path","traveler","auto-rotate"]}}
@@ -322,7 +326,9 @@ That writes one file: `compositions/components/offset-path-traveler.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -363,6 +369,4 @@ Tagged `motion-primitive` `product-demo` `path` `traveler` `auto-rotate`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/onboarding-stepper-flow.mdx b/docs/catalog/components/onboarding-stepper-flow.mdx
index 95602e46d6..e3be56457a 100644
--- a/docs/catalog/components/onboarding-stepper-flow.mdx
+++ b/docs/catalog/components/onboarding-stepper-flow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Onboarding Stepper Flow</h1>
+  <p>A composed onboarding flow with milestone rail, active step card, and next-action button</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/onboarding-stepper-flow.json"
   compositionId="onboarding-stepper-flow"
   compositionSrc="compositions/components/onboarding-stepper-flow.html"
   title="Onboarding Stepper Flow"
-  description="A composed onboarding flow with milestone rail, active step card, and next-action button"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":92}}
   attribution={{"path":"registry/components/onboarding-stepper-flow","tags":["ui-flow","onboarding","stepper"]}}
@@ -127,7 +131,9 @@ That writes one file: `compositions/components/onboarding-stepper-flow.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -147,6 +153,4 @@ Tagged `ui-flow` `onboarding` `stepper`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/ordered-dither-pass.mdx b/docs/catalog/components/ordered-dither-pass.mdx
index 71785f3970..fea315129b 100644
--- a/docs/catalog/components/ordered-dither-pass.mdx
+++ b/docs/catalog/components/ordered-dither-pass.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Ordered Dither Pass</h1>
+  <p>Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/ordered-dither-pass.json"
   compositionId="ordered-dither-pass"
   compositionSrc="compositions/components/ordered-dither-pass.html"
   title="Ordered Dither Pass"
-  description="Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion."
   variables={[{"id":"matrix","type":"enum","role":"style","label":"Matrix","description":"Bayer matrix size: 2 is the coarsest crosshatch, 8 the smoothest ordered grain.","default":"4","options":[{"value":"2","label":"2 x 2"},{"value":"4","label":"4 x 4"},{"value":"8","label":"8 x 8"}]},{"id":"direction","type":"enum","role":"timing","label":"Direction","description":"in resolves noise to clean; out dissolves clean to noise and holds it.","default":"in","options":[{"value":"in","label":"Noise to clean"},{"value":"out","label":"Clean to noise"}]},{"id":"levels","type":"number","role":"style","label":"Levels","description":"Quantization levels per color channel during the dithered phase.","default":2,"min":2,"max":6,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Light tone of the 2-tone noise phase: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the final state holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":511}}
   attribution={{"path":"registry/components/ordered-dither-pass","tags":["motion-primitive","experiment","texture","dither","transition","quantize"]}}
@@ -546,7 +550,9 @@ That writes one file: `compositions/components/ordered-dither-pass.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -589,6 +595,4 @@ Tagged `motion-primitive` `experiment` `texture` `dither` `transition` `quantize
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/outline-draw.mdx b/docs/catalog/components/outline-draw.mdx
index 462f9de988..2ffa77162a 100644
--- a/docs/catalog/components/outline-draw.mdx
+++ b/docs/catalog/components/outline-draw.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Outline Draw</h1>
+  <p>A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/outline-draw.json"
   compositionId="outline-draw"
   compositionSrc="compositions/components/outline-draw.html"
   title="Outline Draw"
-  description="A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure."
   variables={[{"id":"progress","type":"number","role":"timing","label":"Draw progress","description":"Final percentage of the outline that is drawn.","default":100,"min":0,"max":100,"step":1,"unit":"%"},{"id":"thickness","type":"number","role":"layout","label":"Stroke thickness","description":"Outline stroke in tenths of the host width.","default":6,"min":1,"max":20,"step":1,"unit":"0.1cqw"},{"id":"radius","type":"number","role":"layout","label":"Corner radius","description":"Corner radius in tenths of the host smaller dimension.","default":24,"min":0,"max":80,"step":1,"unit":"0.1cqmin"}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":173}}
   attribution={{"path":"registry/components/outline-draw","tags":["motion-primitive","effects","outline","border","mask","proof"]}}
@@ -208,7 +212,9 @@ That writes one file: `compositions/components/outline-draw.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -249,6 +255,4 @@ Tagged `motion-primitive` `effects` `outline` `border` `mask` `proof`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/oversized-cursor.mdx b/docs/catalog/components/oversized-cursor.mdx
index b5fe66ae19..77d0b3c399 100644
--- a/docs/catalog/components/oversized-cursor.mdx
+++ b/docs/catalog/components/oversized-cursor.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Oversized Cursor</h1>
+  <p>The look-here pointer for a video: the macOS arrow at 3.5x its normal size lands its tip on one control, clicks it on, settles just below it so the result stays in view, then exits off-screen</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/oversized-cursor.json"
   compositionId="oversized-cursor"
   compositionSrc="compositions/components/oversized-cursor.html"
   title="Oversized Cursor"
-  description="The look-here pointer for a video: the macOS arrow at 3.5x its normal size lands its tip on one control, clicks it on, settles just below it so the result stays in view, then exits off-screen"
   variables={[{"id":"cursor_variant","type":"enum","role":"style","label":"Cursor fill","default":"light","options":[{"value":"light","label":"Light (white body)"},{"value":"dark","label":"Dark (near-black body)"}]},{"id":"target_x","type":"number","role":"layout","label":"Target X","default":55,"min":15,"max":85,"step":1,"unit":"%"},{"id":"target_y","type":"number","role":"layout","label":"Target Y","default":55,"min":15,"max":85,"step":1,"unit":"%"},{"id":"click_label","type":"string","role":"content","label":"Click label","default":"Generate"},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional whole-stage departure. Default none: the ignited target stays until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":388}}
   attribution={{"path":"registry/components/oversized-cursor","tags":["cursor","motion-primitive","actor","pointer","interaction"]}}
@@ -423,7 +427,9 @@ That writes one file: `compositions/components/oversized-cursor.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -466,6 +472,4 @@ Tagged `cursor` `motion-primitive` `actor` `pointer` `interaction`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/overwhelm-surround.mdx b/docs/catalog/components/overwhelm-surround.mdx
index efd4e5241e..57e5fb149a 100644
--- a/docs/catalog/components/overwhelm-surround.mdx
+++ b/docs/catalog/components/overwhelm-surround.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Overwhelm Surround</h1>
+  <p>Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/overwhelm-surround.json"
   compositionId="overwhelm-surround"
   compositionSrc="compositions/components/overwhelm-surround.html"
   title="Overwhelm Surround"
-  description="Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure."
   variables={[{"id":"count","type":"number","role":"content","label":"Chip count","description":"Number of tasks and notifications crowding the center.","default":16,"min":8,"max":24,"step":1},{"id":"centerLabel","type":"string","role":"content","label":"Center label","description":"Text inside the calm central subject. Blank hides the text.","default":"You"},{"id":"intensity","type":"number","role":"layout","label":"Intensity","description":"How tightly and quickly the chips crowd the center.","default":1,"min":0.5,"max":2,"step":0.1}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":374}}
   attribution={{"path":"registry/components/overwhelm-surround","tags":["effects","agitate","overwhelm","pressure","notifications"]}}
@@ -409,7 +413,9 @@ That writes one file: `compositions/components/overwhelm-surround.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -450,6 +456,4 @@ Tagged `effects` `agitate` `overwhelm` `pressure` `notifications`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/page-slide.mdx b/docs/catalog/components/page-slide.mdx
index bb6e48d928..d84948c29b 100644
--- a/docs/catalog/components/page-slide.mdx
+++ b/docs/catalog/components/page-slide.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Page Slide</h1>
+  <p>A transitions.dev-inspired page slide primitive with outgoing and incoming panels</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/page-slide.json"
   compositionId="page-slide"
   compositionSrc="compositions/components/page-slide.html"
   title="Page Slide"
-  description="A transitions.dev-inspired page slide primitive with outgoing and incoming panels"
   variables={[{"id":"label_a","type":"string","role":"content","label":"Outgoing label","description":"Label printed on the page that slides out.","default":"Dashboard"},{"id":"label_b","type":"string","role":"content","label":"Incoming label","description":"Label printed on the page that slides in.","default":"Analytics"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Gradient family painted on the incoming page. The outgoing page stays slate.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"corner","type":"enum","role":"style","label":"Corner","description":"Corner radius of the frame the pages slide inside.","default":"round","options":[{"value":"square","label":"Square"},{"value":"soft","label":"Soft"},{"value":"round","label":"Round"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":120}}
   attribution={{"path":"registry/components/page-slide","tags":["video-primitive","transition-primitive","transitions-dev-port","page","slide"]}}
@@ -155,7 +159,9 @@ That writes one file: `compositions/components/page-slide.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -198,6 +204,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `page` `s
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/pan-stations.mdx b/docs/catalog/components/pan-stations.mdx
index 30efb1acb0..44c971eda5 100644
--- a/docs/catalog/components/pan-stations.mdx
+++ b/docs/catalog/components/pan-stations.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Pan Stations</h1>
+  <p>A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/pan-stations.json"
   compositionId="pan-stations"
   compositionSrc="compositions/components/pan-stations.html"
   title="Pan Stations"
-  description="A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan."
   variables={[{"id":"stationCount","type":"number","role":"layout","label":"Station count","description":"Number of feature stations in the row.","default":4,"min":3,"max":6,"step":1},{"id":"labels","type":"string","role":"content","label":"Station labels","description":"Comma-separated labels shown on the station cards.","default":"Capture,Edit,Render,Share"},{"id":"dwell","type":"number","role":"timing","label":"Dwell","description":"Seconds the camera holds at each station before panning.","default":0.6,"min":0.2,"max":2,"step":0.1,"unit":"s"}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":364}}
   attribution={{"path":"registry/components/pan-stations","tags":["camera","pan","stations","features","exhibit","agitate","cross-shelved"]}}
@@ -399,7 +403,9 @@ That writes one file: `compositions/components/pan-stations.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -440,6 +446,4 @@ Tagged `camera` `pan` `stations` `features` `exhibit` `agitate` `cross-shelved`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/panel-reveal.mdx b/docs/catalog/components/panel-reveal.mdx
index 7cd31f5e4a..a8b2253053 100644
--- a/docs/catalog/components/panel-reveal.mdx
+++ b/docs/catalog/components/panel-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Panel Reveal</h1>
+  <p>A panel reveal primitive with height expansion and content fade</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/panel-reveal.json"
   compositionId="panel-reveal"
   compositionSrc="compositions/components/panel-reveal.html"
   title="Panel Reveal"
-  description="A panel reveal primitive with height expansion and content fade"
   variables={[{"id":"title","type":"string","role":"content","label":"Title","description":"The header line that sits above the folded body.","default":"Motion tokens"},{"id":"width","type":"enum","role":"layout","label":"Width","description":"How wide the panel sits, 280, 360 or 480 px.","default":"standard","options":[{"value":"narrow","label":"Narrow"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Surface family: paper is the white card for light frames, ink inverts it for dark frames.","default":"paper","options":[{"value":"paper","label":"Paper"},{"value":"ink","label":"Ink"}]},{"id":"reveal","type":"enum","role":"motion","label":"Reveal","description":"Whether the body fades in with the height. fade is the shipped motion, solid opens the height only.","default":"fade","options":[{"value":"fade","label":"Fade"},{"value":"solid","label":"Solid"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":133}}
   attribution={{"path":"registry/components/panel-reveal","tags":["transition-primitive","transitions-dev-port","panel","reveal"]}}
@@ -168,7 +172,9 @@ That writes one file: `compositions/components/panel-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -211,6 +217,4 @@ Tagged `transition-primitive` `transitions-dev-port` `panel` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/paper-collage-reveal.mdx b/docs/catalog/components/paper-collage-reveal.mdx
index 30ab9be3ec..8d5784d7ef 100644
--- a/docs/catalog/components/paper-collage-reveal.mdx
+++ b/docs/catalog/components/paper-collage-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Paper Collage Reveal</h1>
+  <p>A scrapbook patchwork of torn paper scraps, each with its own texture and tilt, flutters away in a staggered scatter to reveal the content underneath.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/paper-collage-reveal.json"
   compositionId="paper-collage-reveal"
   compositionSrc="compositions/components/paper-collage-reveal.html"
   title="Paper Collage Reveal"
-  description="A scrapbook patchwork of torn paper scraps, each with its own texture and tilt, flutters away in a staggered scatter to reveal the content underneath."
   variables={[{"id":"panels","type":"number","role":"content","label":"Panels","description":"How many torn paper scraps cover the frame.","default":6,"min":4,"max":8,"step":1},{"id":"tone","type":"enum","role":"style","label":"Paper tone","description":"Color per scrap. Mixed seeds a different tone per scrap for a real scrapbook mix.","default":"mixed","options":[{"value":"cream","label":"Cream"},{"value":"kraft","label":"Kraft"},{"value":"mixed","label":"Mixed"}]},{"id":"spread","type":"enum","role":"motion","label":"Spread","description":"Outward sends each scrap away from the frame center. Scatter sends every scrap the same general direction with seeded variance.","default":"outward","options":[{"value":"outward","label":"Outward"},{"value":"scatter","label":"Scatter"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":441}}
   attribution={{"path":"registry/components/paper-collage-reveal","tags":["collage","scrapbook","torn paper","reveal","transition","motion-primitive"]}}
@@ -476,7 +480,9 @@ That writes one file: `compositions/components/paper-collage-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -517,6 +523,4 @@ Tagged `collage` `scrapbook` `torn paper` `reveal` `transition` `motion-primitiv
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/parallax-device-dive.mdx b/docs/catalog/components/parallax-device-dive.mdx
index 306b1a8aa5..29a2214430 100644
--- a/docs/catalog/components/parallax-device-dive.mdx
+++ b/docs/catalog/components/parallax-device-dive.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Parallax Device Dive</h1>
+  <p>A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/parallax-device-dive.json"
   compositionId="parallax-device-dive"
   compositionSrc="compositions/components/parallax-device-dive.html"
   title="Parallax Device Dive"
-  description="A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame."
   variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color used throughout the app UI.","default":"blue","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"app_title","type":"string","role":"content","label":"App title","description":"Title displayed in the app header.","default":"Dashboard"}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":451}}
   attribution={{"path":"registry/components/parallax-device-dive","tags":["motion-primitive","camera","device","phone","parallax","transition"]}}
@@ -486,7 +490,9 @@ That writes one file: `compositions/components/parallax-device-dive.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -526,6 +532,4 @@ Tagged `motion-primitive` `camera` `device` `phone` `parallax` `transition`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/parallax-unzoom.mdx b/docs/catalog/components/parallax-unzoom.mdx
index 373f46a93f..293976096f 100644
--- a/docs/catalog/components/parallax-unzoom.mdx
+++ b/docs/catalog/components/parallax-unzoom.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Parallax Unzoom</h1>
+  <p>Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/parallax-unzoom.json"
   compositionId="parallax-unzoom"
   compositionSrc="compositions/components/parallax-unzoom.html"
   title="Parallax Unzoom"
-  description="Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":103}}
   attribution={{"path":"registry/components/parallax-unzoom","tags":["transition","reveal","unzoom","parallax","grid","hero"]}}
@@ -138,7 +142,9 @@ That writes one file: `compositions/components/parallax-unzoom.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -158,6 +164,4 @@ Tagged `transition` `reveal` `unzoom` `parallax` `grid` `hero`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/parallax-zoom.mdx b/docs/catalog/components/parallax-zoom.mdx
index bae5f2dec8..81b4791145 100644
--- a/docs/catalog/components/parallax-zoom.mdx
+++ b/docs/catalog/components/parallax-zoom.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Parallax Zoom</h1>
+  <p>Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/parallax-zoom.json"
   compositionId="parallax-zoom"
   compositionSrc="compositions/components/parallax-zoom.html"
   title="Parallax Zoom"
-  description="Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":99}}
   attribution={{"path":"registry/components/parallax-zoom","tags":["transition","zoom","parallax","grid","hero"]}}
@@ -134,7 +138,9 @@ That writes one file: `compositions/components/parallax-zoom.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -154,6 +160,4 @@ Tagged `transition` `zoom` `parallax` `grid` `hero`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/particle-image-reveal.mdx b/docs/catalog/components/particle-image-reveal.mdx
index 38e0d596fc..012f5b133a 100644
--- a/docs/catalog/components/particle-image-reveal.mdx
+++ b/docs/catalog/components/particle-image-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Particle Image Reveal</h1>
+  <p>A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/particle-image-reveal.json"
   compositionId="particle-image-reveal"
   compositionSrc="compositions/components/particle-image-reveal.html"
   title="Particle Image Reveal"
-  description="A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean."
   variables={[{"id":"density","type":"enum","role":"style","label":"Density","description":"Particle count for the converging field.","default":"med","options":[{"value":"low","label":"Low"},{"value":"med","label":"Medium"},{"value":"high","label":"High"}]},{"id":"direction","type":"enum","role":"timing","label":"Direction","description":"ltr sweeps the reveal left to right; center opens an iris from the middle outward.","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"center","label":"Center out"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Particle and monogram color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the revealed image holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":392}}
   attribution={{"path":"registry/components/particle-image-reveal","tags":["motion-primitive","intros-reveals","particles","reveal","canvas","deterministic"]}}
@@ -427,7 +431,9 @@ That writes one file: `compositions/components/particle-image-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -469,6 +475,4 @@ Tagged `motion-primitive` `intros-reveals` `particles` `reveal` `canvas` `determ
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/particle-text-dissolve.mdx b/docs/catalog/components/particle-text-dissolve.mdx
index 892d1ddd2d..6f1fd93544 100644
--- a/docs/catalog/components/particle-text-dissolve.mdx
+++ b/docs/catalog/components/particle-text-dissolve.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Particle Text Dissolve</h1>
+  <p>Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/particle-text-dissolve.json"
   compositionId="particle-text-dissolve"
   compositionSrc="compositions/components/particle-text-dissolve.html"
   title="Particle Text Dissolve"
-  description="Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The line that assembles from (or dissolves into) the particle cloud.","default":"Dissolve"},{"id":"direction","type":"enum","role":"timing","label":"Direction","description":"in assembles the text from the cloud and holds it crisp; out erases the text into the cloud and holds empty.","default":"in","options":[{"value":"in","label":"Assemble in"},{"value":"out","label":"Dissolve out"}]},{"id":"density","type":"enum","role":"style","label":"Density","description":"Particle count cap for the field.","default":"med","options":[{"value":"low","label":"Low"},{"value":"med","label":"Medium"},{"value":"high","label":"High"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Text and particle color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the end state holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":414}}
   attribution={{"path":"registry/components/particle-text-dissolve","tags":["motion-primitive","text-effects","particles","canvas","deterministic","experiment"]}}
@@ -449,7 +453,9 @@ That writes one file: `compositions/components/particle-text-dissolve.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -492,6 +498,4 @@ Tagged `motion-primitive` `text-effects` `particles` `canvas` `deterministic` `e
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/pendulum-swing.mdx b/docs/catalog/components/pendulum-swing.mdx
index 477cc719eb..915be0315b 100644
--- a/docs/catalog/components/pendulum-swing.mdx
+++ b/docs/catalog/components/pendulum-swing.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Pendulum Swing</h1>
+  <p>Content hangs from a fixed pivot and swings into rest with gravity-damped oscillation, like a hanging sign settling on its hook.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/pendulum-swing.json"
   compositionId="pendulum-swing"
   compositionSrc="compositions/components/pendulum-swing.html"
   title="Pendulum Swing"
-  description="Content hangs from a fixed pivot and swings into rest with gravity-damped oscillation, like a hanging sign settling on its hook."
   variables={[{"id":"pivot","type":"enum","role":"layout","label":"Pivot","description":"Where the content hangs from. The swing rotates about this point, so the top edge stays pinned.","default":"top-center","options":[{"value":"top-center","label":"Top center"},{"value":"top-left","label":"Top left"},{"value":"top-right","label":"Top right"}]},{"id":"amplitude","type":"enum","role":"motion","label":"Amplitude","description":"How far the first swing reaches before it settles. Every later swing scales with it, so the pendulum still comes to rest upright.","default":"standard","options":[{"value":"gentle","label":"Gentle"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which side the pendulum swings in from: right lifts the first swing clockwise, left mirrors it.","default":"right","options":[{"value":"right","label":"Right"},{"value":"left","label":"Left"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Content colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":130}}
   attribution={{"path":"registry/components/pendulum-swing","tags":["motion-primitive","physics","swing","settle","reveal"]}}
@@ -165,7 +169,9 @@ That writes one file: `compositions/components/pendulum-swing.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -208,6 +214,4 @@ Tagged `motion-primitive` `physics` `swing` `settle` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/per-word-crossfade.mdx b/docs/catalog/components/per-word-crossfade.mdx
index 6830a20af6..61b7c6a9ff 100644
--- a/docs/catalog/components/per-word-crossfade.mdx
+++ b/docs/catalog/components/per-word-crossfade.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Per-Word Crossfade</h1>
+  <p>Words gently fade into place with a short vertical drift for calm keynote rhythm.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/per-word-crossfade.json"
   compositionId="per-word-crossfade"
   compositionSrc="compositions/components/per-word-crossfade.html"
   title="Per-Word Crossfade"
-  description="Words gently fade into place with a short vertical drift for calm keynote rhythm."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The line to animate. It is split on whitespace and every word gets its own span, so the stagger picks up the new words.","default":"Create once reuse everywhere"},{"id":"drift","type":"enum","role":"motion","label":"Drift","description":"Scales the vertical offset, so the words cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"blur","type":"enum","role":"style","label":"Blur","description":"Scales the blur radius the timeline drives, from a light haze to a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":115}}
   attribution={{"path":"registry/components/per-word-crossfade","tags":["motion-primitive","typography"]}}
@@ -150,7 +154,9 @@ That writes one file: `compositions/components/per-word-crossfade.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -193,6 +199,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/per-word-rise.mdx b/docs/catalog/components/per-word-rise.mdx
index d45dff5d5d..bffd96a012 100644
--- a/docs/catalog/components/per-word-rise.mdx
+++ b/docs/catalog/components/per-word-rise.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Per Word Rise</h1>
+  <p>Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/per-word-rise.json"
   compositionId="per-word-rise"
   compositionSrc="compositions/components/per-word-rise.html"
   title="Per Word Rise"
-  description="Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit)."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Text whose words or characters rise into place.","default":"WORDS IN MOTION"},{"id":"split","type":"enum","role":"content","label":"Split","description":"Animate the text as words or individual characters.","default":"word","options":[{"value":"word","label":"Word"},{"value":"char","label":"Character"}]},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds (from mount start) for each unit landing. Empty keeps the authored cascade rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract accent token used for the text color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the line holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":316}}
   attribution={{"path":"registry/components/per-word-rise","tags":["motion-primitive","text-effects","typography","stagger","reveal"]}}
@@ -351,7 +355,9 @@ That writes one file: `compositions/components/per-word-rise.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -394,6 +400,4 @@ Tagged `motion-primitive` `text-effects` `typography` `stagger` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/perspective-marquee.mdx b/docs/catalog/components/perspective-marquee.mdx
index 0d40800d31..5cc0a0d46e 100644
--- a/docs/catalog/components/perspective-marquee.mdx
+++ b/docs/catalog/components/perspective-marquee.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Perspective Marquee</h1>
+  <p>A 3D tilted marquee with depth feel as items roll toward the horizon.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/perspective-marquee.json"
   compositionId="perspective-marquee"
   compositionSrc="compositions/components/perspective-marquee.html"
   title="Perspective Marquee"
-  description="A 3D tilted marquee with depth feel as items roll toward the horizon."
   variables={[{"id":"tilt","type":"enum","role":"style","label":"Tilt","description":"How far the marquee plane leans back toward the horizon.","default":"standard","options":[{"value":"flat","label":"Flat"},{"value":"standard","label":"Standard"},{"value":"steep","label":"Steep"}]},{"id":"travel","type":"enum","role":"motion","label":"Travel","description":"Scales the offset the timeline drives, so the strip covers a shorter or longer run in the same time.","default":"standard","options":[{"value":"short","label":"Short"},{"value":"standard","label":"Standard"},{"value":"long","label":"Long"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Pill colour: ink for light frames, paper for dark ones, accent rides the brand token.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"words","type":"string","role":"content","label":"Words","description":"Comma separated pill labels. The list is laid down twice so the strip still reads as a continuous loop.","default":"COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS"}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":136}}
   attribution={{"path":"registry/components/perspective-marquee","tags":["motion-primitive","typography"]}}
@@ -171,7 +175,9 @@ That writes one file: `compositions/components/perspective-marquee.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -214,6 +220,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/physical-exit.mdx b/docs/catalog/components/physical-exit.mdx
index c66a17b041..f1572ffc18 100644
--- a/docs/catalog/components/physical-exit.mdx
+++ b/docs/catalog/components/physical-exit.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Physical Exit</h1>
+  <p>A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/physical-exit.json"
   compositionId="physical-exit"
   compositionSrc="compositions/components/physical-exit.html"
   title="Physical Exit"
-  description="A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading."
   variables={[{"id":"mode","type":"enum","role":"motion","label":"Exit mode","description":"Physical behavior used to carry the card offscreen.","default":"toss","options":[{"value":"toss","label":"Toss"},{"value":"drop","label":"Drop"},{"value":"slide","label":"Slide"}]},{"id":"text","type":"string","role":"content","label":"Card text","description":"Word displayed on the exiting card.","default":"Later"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color applied to the card edge.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":247}}
   attribution={{"path":"registry/components/physical-exit","tags":["motion-primitive","exit","momentum","toss","drop","slide"]}}
@@ -282,7 +286,9 @@ That writes one file: `compositions/components/physical-exit.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -323,6 +329,4 @@ Tagged `motion-primitive` `exit` `momentum` `toss` `drop` `slide`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/press-ripple.mdx b/docs/catalog/components/press-ripple.mdx
index 1c38b2dd21..b23eb07a20 100644
--- a/docs/catalog/components/press-ripple.mdx
+++ b/docs/catalog/components/press-ripple.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Press Ripple</h1>
+  <p>A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with two small click rings while the label swaps to a check, then exits off-stage while the confirmed state holds.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/press-ripple.json"
   compositionId="press-ripple"
   compositionSrc="compositions/components/press-ripple.html"
   title="Press Ripple"
-  description="A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with two small click rings while the label swaps to a check, then exits off-stage while the confirmed state holds."
   variables={[{"id":"label","type":"string","role":"content","label":"Label","description":"Text inside the default pill target.","default":"Get started"},{"id":"done_label","type":"string","role":"content","label":"Done label","description":"Text beside the check once the default pill is pressed.","default":"Saved"},{"id":"target_x","type":"number","role":"layout","label":"Target X","description":"Zone center, percent of host width.","default":50,"min":8,"max":92,"step":1,"unit":"%"},{"id":"target_y","type":"number","role":"layout","label":"Target Y","description":"Zone center, percent of host height.","default":50,"min":8,"max":92,"step":1,"unit":"%"},{"id":"press_at","type":"number","role":"timing","label":"Press at","description":"Seconds from mount start when the press begins.","default":0.9,"min":0.9,"max":10,"step":0.1,"unit":"s"},{"id":"cursor","type":"enum","role":"style","label":"Cursor","description":"Pointer tone.","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color for the click rings and the confirmation check.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"How the frame leaves. None holds the pressed state.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Fade up"}]}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":434}}
   attribution={{"path":"registry/components/press-ripple","tags":["cursor","motion-primitive","product-demo","press","ripple","payoff"]}}
@@ -469,7 +473,9 @@ That writes one file: `compositions/components/press-ripple.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -515,6 +521,4 @@ Tagged `cursor` `motion-primitive` `product-demo` `press` `ripple` `payoff`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/pull-back-reveal.mdx b/docs/catalog/components/pull-back-reveal.mdx
index fcb54e2941..4895c84af4 100644
--- a/docs/catalog/components/pull-back-reveal.mdx
+++ b/docs/catalog/components/pull-back-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Pull Back Reveal</h1>
+  <p>A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/pull-back-reveal.json"
   compositionId="pull-back-reveal"
   compositionSrc="compositions/components/pull-back-reveal.html"
   title="Pull Back Reveal"
-  description="A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it."
   variables={[{"id":"detail_text","type":"string","role":"content","label":"Detail text","description":"Stat shown in the detail chip at the center of the reveal.","default":"+312%"},{"id":"headline","type":"string","role":"content","label":"Headline","description":"Headline revealed around the focused detail.","default":"Growth compounds"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color used across the composed scene.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":336}}
   attribution={{"path":"registry/components/pull-back-reveal","tags":["motion-primitive","camera","pull-back","reveal","recontextualize"]}}
@@ -371,7 +375,9 @@ That writes one file: `compositions/components/pull-back-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -412,6 +418,4 @@ Tagged `motion-primitive` `camera` `pull-back` `reveal` `recontextualize`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/pull-to-refresh.mdx b/docs/catalog/components/pull-to-refresh.mdx
index 09ffe24c3a..808b810a08 100644
--- a/docs/catalog/components/pull-to-refresh.mdx
+++ b/docs/catalog/components/pull-to-refresh.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Pull to Refresh</h1>
+  <p>A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/pull-to-refresh.json"
   compositionId="pull-to-refresh"
   compositionSrc="compositions/components/pull-to-refresh.html"
   title="Pull to Refresh"
-  description="A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest."
   variables={[{"id":"pullDistance","type":"number","role":"layout","label":"Pull distance","description":"Raw pull distance before nonlinear rubber-band resistance.","default":120,"min":60,"max":220,"step":5},{"id":"spinnerStyle","type":"enum","role":"content","label":"Spinner style","description":"Refresh indicator geometry and loading motion.","default":"ring","options":[{"value":"arrow","label":"Arrow"},{"value":"dots","label":"Dots"},{"value":"ring","label":"Ring"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":679}}
   attribution={{"path":"registry/components/pull-to-refresh","tags":["pointer","pointers","mobile","gesture","interaction","refresh","demonstrate"]}}
@@ -714,7 +718,9 @@ That writes one file: `compositions/components/pull-to-refresh.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -754,6 +760,4 @@ Tagged `pointer` `pointers` `mobile` `gesture` `interaction` `refresh` `demonstr
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/push-in.mdx b/docs/catalog/components/push-in.mdx
index d0ef3cb996..cbe2d76590 100644
--- a/docs/catalog/components/push-in.mdx
+++ b/docs/catalog/components/push-in.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Push In</h1>
+  <p>A centered headline gains focus through one slow, continuous camera push and a gentle fade out.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/push-in.json"
   compositionId="push-in"
   compositionSrc="compositions/components/push-in.html"
   title="Push In"
-  description="A centered headline gains focus through one slow, continuous camera push and a gentle fade out."
   variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text centered in the camera frame.","default":"Focus"},{"id":"intensity","type":"enum","role":"motion","label":"Push intensity","description":"Final camera scale reached by the push.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":178}}
   attribution={{"path":"registry/components/push-in","tags":["motion-primitive","camera","push-in","focus","emphasize","holdable"]}}
@@ -213,7 +217,9 @@ That writes one file: `compositions/components/push-in.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -253,6 +259,4 @@ Tagged `motion-primitive` `camera` `push-in` `focus` `emphasize` `holdable`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/radial-surround.mdx b/docs/catalog/components/radial-surround.mdx
index e6466fe4b0..6edcee07b7 100644
--- a/docs/catalog/components/radial-surround.mdx
+++ b/docs/catalog/components/radial-surround.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Radial Surround</h1>
+  <p>Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/radial-surround.json"
   compositionId="radial-surround"
   compositionSrc="compositions/components/radial-surround.html"
   title="Radial Surround"
-  description="Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed."
   variables={[{"id":"center_label","type":"string","role":"content","label":"Center label","description":"Label on the default center token card.","default":"Your team"},{"id":"chips","type":"string","role":"content","label":"Chips","description":"Comma-separated chip labels that surround the center (up to 12).","default":"Docs,Tickets,Dashboards,Inbox,Chat,Sheets"},{"id":"close_in","type":"boolean","role":"timing","label":"Close in","description":"Converge the ring inward with a subtle edge dim after assembly. The center never moves.","default":true},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated per-chip entrance times in seconds. Blank entries use the default cascade.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the center card tint.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"How the surrounded stage leaves the frame. Default none: the crowded hold ends the film.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":432}}
   attribution={{"path":"registry/components/radial-surround","tags":["motion-primitive","problem-setup","radial","ring","surround","converge"]}}
@@ -467,7 +471,9 @@ That writes one file: `compositions/components/radial-surround.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -511,6 +517,4 @@ Tagged `motion-primitive` `problem-setup` `radial` `ring` `surround` `converge`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/rgb-glitch-text.mdx b/docs/catalog/components/rgb-glitch-text.mdx
index 12ecc6f09d..df53f11aeb 100644
--- a/docs/catalog/components/rgb-glitch-text.mdx
+++ b/docs/catalog/components/rgb-glitch-text.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>RGB Glitch Text</h1>
+  <p>RGB-offset text copies jitter briefly for a controlled glitch window.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/rgb-glitch-text.json"
   compositionId="rgb-glitch-text"
   compositionSrc="compositions/components/rgb-glitch-text.html"
   title="RGB Glitch Text"
-  description="RGB-offset text copies jitter briefly for a controlled glitch window."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The word shown on all three stacked copies.","default":"GLITCH","maxLength":24},{"id":"intensity","type":"enum","role":"motion","label":"Intensity","description":"Scales the red and cyan offsets the timeline drives, so the split reads as a hairline or a hard tear.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"extreme","label":"Extreme"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of the solid copy the two ghosts split away from: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":110}}
   attribution={{"path":"registry/components/rgb-glitch-text","tags":["motion-primitive","typography"]}}
@@ -145,7 +149,9 @@ That writes one file: `compositions/components/rgb-glitch-text.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -187,6 +193,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/rubber-band-bumper.mdx b/docs/catalog/components/rubber-band-bumper.mdx
index fea9636bc6..121d5af4ba 100644
--- a/docs/catalog/components/rubber-band-bumper.mdx
+++ b/docs/catalog/components/rubber-band-bumper.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Rubber Band Bumper</h1>
+  <p>An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/rubber-band-bumper.json"
   compositionId="rubber-band-bumper"
   compositionSrc="compositions/components/rubber-band-bumper.html"
   title="Rubber Band Bumper"
-  description="An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it."
   variables={[{"id":"direction","type":"enum","role":"content","label":"Direction","description":"Edge the outgoing panel releases through.","default":"up","options":[{"value":"up","label":"Up"},{"value":"left","label":"Left"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color applied to the tension bands and incoming panel.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":331}}
   attribution={{"path":"registry/components/rubber-band-bumper","tags":["motion-primitive","transition","rubber-band","resistance","overshoot"]}}
@@ -366,7 +370,9 @@ That writes one file: `compositions/components/rubber-band-bumper.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -406,6 +412,4 @@ Tagged `motion-primitive` `transition` `rubber-band` `resistance` `overshoot`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/scan-band.mdx b/docs/catalog/components/scan-band.mdx
index 89dd41fb78..f87c43878a 100644
--- a/docs/catalog/components/scan-band.mdx
+++ b/docs/catalog/components/scan-band.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Scan Band</h1>
+  <p>A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/scan-band.json"
   compositionId="scan-band"
   compositionSrc="compositions/components/scan-band.html"
   title="Scan Band"
-  description="A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band."
   variables={[{"id":"wordmark","type":"string","role":"content","label":"Wordmark","description":"Text displayed by the scan effect.","default":"HYPERFRAMES"},{"id":"band_angle","type":"number","role":"layout","label":"Band angle","description":"Diagonal angle of the distortion band in degrees.","default":12,"min":-30,"max":30,"step":1,"unit":"deg"}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":216}}
   attribution={{"path":"registry/components/scan-band","tags":["motion-primitive","typography","scan","chromatic","distortion","wordmark"]}}
@@ -251,7 +255,9 @@ That writes one file: `compositions/components/scan-band.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -291,6 +297,4 @@ Tagged `motion-primitive` `typography` `scan` `chromatic` `distortion` `wordmark
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/scramble-reveal.mdx b/docs/catalog/components/scramble-reveal.mdx
index 313c1e5c96..760355de77 100644
--- a/docs/catalog/components/scramble-reveal.mdx
+++ b/docs/catalog/components/scramble-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Scramble Reveal</h1>
+  <p>A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/scramble-reveal.json"
   compositionId="scramble-reveal"
   compositionSrc="compositions/components/scramble-reveal.html"
   title="Scramble Reveal"
-  description="A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Target string that resolves from deterministic wrong glyphs.","default":"HYPERFRAMES"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the text, prefix, and optional terminal frame.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"style","type":"enum","role":"style","label":"Style","description":"Terminal frame or clean text-only presentation.","default":"terminal","options":[{"value":"terminal","label":"Terminal"},{"value":"clean","label":"Clean"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the locked string holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":289}}
   attribution={{"path":"registry/components/scramble-reveal","tags":["motion-primitive","text-effects","scramble","reveal","deterministic"]}}
@@ -324,7 +328,9 @@ That writes one file: `compositions/components/scramble-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -366,6 +372,4 @@ Tagged `motion-primitive` `text-effects` `scramble` `reveal` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/screen-flow-carousel.mdx b/docs/catalog/components/screen-flow-carousel.mdx
index 5496f9d8cb..d3547e0330 100644
--- a/docs/catalog/components/screen-flow-carousel.mdx
+++ b/docs/catalog/components/screen-flow-carousel.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Screen Flow Carousel</h1>
+  <p>Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/screen-flow-carousel.json"
   compositionId="screen-flow-carousel"
   compositionSrc="compositions/components/screen-flow-carousel.html"
   title="Screen Flow Carousel"
-  description="Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults."
   variables={[{"id":"screens","type":"number","role":"content","label":"Screens","description":"How many screens ride the rail.","default":3,"min":2,"max":5,"step":1},{"id":"captions","type":"string","role":"content","label":"Captions","description":"Comma-separated caption per screen. Blank entries use the authored defaults.","default":""},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated advance times in seconds from mount start. Blank entries use the authored even rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Token the active ring, caption dot, and skeleton accents ride.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the final screen holds until the cut.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":576}}
   attribution={{"path":"registry/components/screen-flow-carousel","tags":["product-demo","feature-tour","carousel","rail","slot","screens"]}}
@@ -611,7 +615,9 @@ That writes one file: `compositions/components/screen-flow-carousel.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -654,6 +660,4 @@ Tagged `product-demo` `feature-tour` `carousel` `rail` `slot` `screens`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/scroll-camera-story.mdx b/docs/catalog/components/scroll-camera-story.mdx
index e912d64b96..81d2f21099 100644
--- a/docs/catalog/components/scroll-camera-story.mdx
+++ b/docs/catalog/components/scroll-camera-story.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Scroll Camera Story</h1>
+  <p>A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/scroll-camera-story.json"
   compositionId="scroll-camera-story"
   compositionSrc="compositions/components/scroll-camera-story.html"
   title="Scroll Camera Story"
-  description="A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section."
   variables={[{"id":"sections","type":"number","role":"content","label":"Sections","description":"How many skeleton sections ride the pass. A sections slot overrides this with its own child count.","default":3,"min":2,"max":4,"step":1},{"id":"travel","type":"number","role":"content","label":"Travel","description":"Total camera travel in cqh. The world is 100 + travel cqh tall.","default":220,"min":100,"max":400,"step":10,"unit":"cqh"},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds: arrival times for the sections after the first. Empty keeps the authored default rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Token the skeleton accents and foreground motes ride.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. None holds the final section.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":805}}
   attribution={{"path":"registry/components/scroll-camera-story","tags":["camera","scroll","parallax","story","sections","slot","servo"]}}
@@ -840,7 +844,9 @@ That writes one file: `compositions/components/scroll-camera-story.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -883,6 +889,4 @@ Tagged `camera` `scroll` `parallax` `story` `sections` `slot` `servo`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/scroll-feed.mdx b/docs/catalog/components/scroll-feed.mdx
index e440f6f911..9618c74356 100644
--- a/docs/catalog/components/scroll-feed.mdx
+++ b/docs/catalog/components/scroll-feed.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Scroll Feed</h1>
+  <p>A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/scroll-feed.json"
   compositionId="scroll-feed"
   compositionSrc="compositions/components/scroll-feed.html"
   title="Scroll Feed"
-  description="A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace."
   variables={[{"id":"speed","type":"enum","role":"timing","label":"Scroll speed","description":"Pace of the upward feed movement.","default":"doom","options":[{"value":"doom","label":"Doom"},{"value":"frantic","label":"Frantic"}]},{"id":"card_count","type":"number","role":"content","label":"Card count","description":"Number of skeleton posts in one repeated feed cycle.","default":6,"min":4,"max":10,"step":1},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds (from mount start); each cue advances the feed by one card. Empty synthesizes evenly spaced flicks, one per card.","default":""},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the feed scrolls until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":397}}
   attribution={{"path":"registry/components/scroll-feed","tags":["motion-primitive","effects","scroll","feed","loop","agitation"]}}
@@ -432,7 +436,9 @@ That writes one file: `compositions/components/scroll-feed.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -474,6 +480,4 @@ Tagged `motion-primitive` `effects` `scroll` `feed` `loop` `agitation`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/segmentation-flood.mdx b/docs/catalog/components/segmentation-flood.mdx
index 51be76f03c..a2e5c5e485 100644
--- a/docs/catalog/components/segmentation-flood.mdx
+++ b/docs/catalog/components/segmentation-flood.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Segmentation Flood</h1>
+  <p>Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/segmentation-flood.json"
   compositionId="segmentation-flood"
   compositionSrc="compositions/components/segmentation-flood.html"
   title="Segmentation Flood"
-  description="Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean."
   variables={[{"id":"regions","type":"string","role":"content","label":"Regions","description":"Comma-separated region labels; 2 to 4 are used, one translucent mask + bracket + mono chip each.","default":"Figure, Signal, Ground"},{"id":"flood_at","type":"number","role":"timing","label":"Flood at","description":"Seconds from mount start when the segmentation pass begins. Clamped so the pass and any exit stay inside the clip.","default":0.8},{"id":"flicker","type":"enum","role":"style","label":"Flicker","description":"Deterministic 2-frame HUD luminance toggle riding the flood pass.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Mask, bracket, and chip color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the labeled read holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":517}}
   attribution={{"path":"registry/components/segmentation-flood","tags":["motion-primitive","product-demo","ai","hud","canvas","deterministic","experiment"]}}
@@ -552,7 +556,9 @@ That writes one file: `compositions/components/segmentation-flood.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -595,6 +601,4 @@ Tagged `motion-primitive` `product-demo` `ai` `hud` `canvas` `deterministic` `ex
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/separator.mdx b/docs/catalog/components/separator.mdx
index 23b63e4e1b..22ea461d59 100644
--- a/docs/catalog/components/separator.mdx
+++ b/docs/catalog/components/separator.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Separator</h1>
+  <p>A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/separator.json"
   compositionId="separator"
   compositionSrc="compositions/components/separator.html"
   title="Separator"
-  description="A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal"
   variables={[{"id":"orientation","type":"enum","role":"layout","label":"Orientation","description":"Which way the rule runs, and so which way the reveal travels.","default":"horizontal","options":[{"value":"horizontal","label":"Horizontal"},{"value":"vertical","label":"Vertical"}]},{"id":"thickness","type":"enum","role":"style","label":"Thickness","description":"Size of the rule across its short edge, from a 1px hairline to a 4px bar.","default":"hairline","options":[{"value":"hairline","label":"Hairline"},{"value":"medium","label":"Medium"},{"value":"bold","label":"Bold"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of the revealed fill: neutral grey, the theme accent, or the warning hue.","default":"neutral","options":[{"value":"neutral","label":"Neutral"},{"value":"accent","label":"Accent"},{"value":"warning","label":"Warning"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":238}}
   attribution={{"path":"registry/components/separator","tags":["video-primitive","separator","layout"]}}
@@ -273,7 +277,9 @@ That writes one file: `compositions/components/separator.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -315,6 +321,4 @@ Tagged `video-primitive` `separator` `layout`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/settings-toggle-flow.mdx b/docs/catalog/components/settings-toggle-flow.mdx
index f4e2ad697a..ea3a2e410c 100644
--- a/docs/catalog/components/settings-toggle-flow.mdx
+++ b/docs/catalog/components/settings-toggle-flow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Settings Toggle Flow</h1>
+  <p>A composed settings flow with preference rows, toggle switches, and active-state feedback</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/settings-toggle-flow.json"
   compositionId="settings-toggle-flow"
   compositionSrc="compositions/components/settings-toggle-flow.html"
   title="Settings Toggle Flow"
-  description="A composed settings flow with preference rows, toggle switches, and active-state feedback"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":88}}
   attribution={{"path":"registry/components/settings-toggle-flow","tags":["ui-flow","settings","toggle"]}}
@@ -123,7 +127,9 @@ That writes one file: `compositions/components/settings-toggle-flow.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -143,6 +149,4 @@ Tagged `ui-flow` `settings` `toggle`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/shared-axis-y.mdx b/docs/catalog/components/shared-axis-y.mdx
index 253505a5e9..62332644ea 100644
--- a/docs/catalog/components/shared-axis-y.mdx
+++ b/docs/catalog/components/shared-axis-y.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Shared Axis Y</h1>
+  <p>Per-word vertical shared-axis transition for sharp editorial swaps.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/shared-axis-y.json"
   compositionId="shared-axis-y"
   compositionSrc="compositions/components/shared-axis-y.html"
   title="Shared Axis Y"
-  description="Per-word vertical shared-axis transition for sharp editorial swaps."
   variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which side of the baseline the words travel in from.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Scales the vertical offset, so the words cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":98}}
   attribution={{"path":"registry/components/shared-axis-y","tags":["motion-primitive","typography"]}}
@@ -133,7 +137,9 @@ That writes one file: `compositions/components/shared-axis-y.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -175,6 +181,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/shared-axis-z.mdx b/docs/catalog/components/shared-axis-z.mdx
index d0630bb615..485194ee3e 100644
--- a/docs/catalog/components/shared-axis-z.mdx
+++ b/docs/catalog/components/shared-axis-z.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Shared Axis Z</h1>
+  <p>Scale-based shared-axis transition for focus shifts and context depth.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/shared-axis-z.json"
   compositionId="shared-axis-z"
   compositionSrc="compositions/components/shared-axis-z.html"
   title="Shared Axis Z"
-  description="Scale-based shared-axis transition for focus shifts and context depth."
   variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which way the words travel along the z axis: in swells up from small, out settles down from large.","default":"in","options":[{"value":"in","label":"In"},{"value":"out","label":"Out"}]},{"id":"depth","type":"enum","role":"motion","label":"Depth","description":"Scales how far the words start from their final size, so the push covers a shorter or longer run in the same time.","default":"standard","options":[{"value":"shallow","label":"Shallow"},{"value":"standard","label":"Standard"},{"value":"deep","label":"Deep"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":97}}
   attribution={{"path":"registry/components/shared-axis-z","tags":["motion-primitive","typography"]}}
@@ -132,7 +136,9 @@ That writes one file: `compositions/components/shared-axis-z.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -174,6 +180,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/sheet-spring-up.mdx b/docs/catalog/components/sheet-spring-up.mdx
index e1c56095a7..1eab2c94b0 100644
--- a/docs/catalog/components/sheet-spring-up.mdx
+++ b/docs/catalog/components/sheet-spring-up.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Sheet Spring-Up</h1>
+  <p>A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/sheet-spring-up.json"
   compositionId="sheet-spring-up"
   compositionSrc="compositions/components/sheet-spring-up.html"
   title="Sheet Spring-Up"
-  description="A bottom sheet rushes up from below the frame on a real spring sampled frame by frame from reference footage, overshooting its resting place and settling back without an approximated ease"
   variables={[{"id":"width","type":"number","role":"style","label":"Width","description":"Sheet width in pixels.","default":668,"min":400,"max":900,"step":4,"unit":"px"},{"id":"radius","type":"number","role":"style","label":"Radius","description":"Sheet corner radius.","default":34,"min":16,"max":48,"step":1,"unit":"px"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Light is the reference near-white sheet; dark is the raised surface token.","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":243}}
   attribution={{"author":"Miao Yang","path":"registry/components/sheet-spring-up","tags":["video-primitive","sheet","spring","mock-ui","overlay"]}}
@@ -278,7 +282,9 @@ That writes one file: `compositions/components/sheet-spring-up.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -322,6 +328,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index 35933b0a87..96edcc1170 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Shimmer Sweep</h1>
+  <p>Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/shimmer-sweep.json"
   compositionId="shimmer-sweep"
   compositionSrc="compositions/components/shimmer-sweep.html"
   title="Shimmer Sweep"
-  description="Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals"
   variables={[]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":66}}
   attribution={{"path":"registry/components/shimmer-sweep","tags":["text","shimmer","highlight","effect"]}}
@@ -101,7 +105,9 @@ That writes one file: `compositions/components/shimmer-sweep.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -121,6 +127,4 @@ Tagged `text` `shimmer` `highlight` `effect`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/shutter-slam.mdx b/docs/catalog/components/shutter-slam.mdx
index e621cab4ac..f4ad18fe65 100644
--- a/docs/catalog/components/shutter-slam.mdx
+++ b/docs/catalog/components/shutter-slam.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Shutter Slam</h1>
+  <p>One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/shutter-slam.json"
   compositionId="shutter-slam"
   compositionSrc="compositions/components/shutter-slam.html"
   title="Shutter Slam"
-  description="One word thrown through six single-property beats under integrated shutter blur — two translate slams, a scale punch, then a full turn about each axis — on the measured easing of the After Effects export the shutter model was fitted to"
   variables={[{"id":"text","type":"string","role":"content","label":"Word","description":"The word driven through the six beats.","default":"MOTION"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Word color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"blur","type":"enum","role":"motion","label":"Blur","description":"Integrate each frame over the shutter window, or capture one instant per frame.","default":"shutter","options":[{"value":"shutter","label":"Shutter"},{"value":"none","label":"None"}]},{"id":"cues","type":"string","role":"motion","label":"Cues","description":"Comma seconds from mount start for each of the six beats; empty keeps the authored rhythm.","default":""},{"id":"exit","type":"enum","role":"motion","label":"Exit","description":"How the word leaves.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":869}}
   attribution={{"path":"registry/components/shutter-slam","tags":["effect","motion-blur","shutter","after-effects","slam","animation"]}}
@@ -904,7 +908,9 @@ That writes one file: `compositions/components/shutter-slam.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -923,6 +929,4 @@ Tagged `effect` `motion-blur` `shutter` `after-effects` `slam` `animation`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/signup-flow.mdx b/docs/catalog/components/signup-flow.mdx
index 81553b38d1..8d958fcd1e 100644
--- a/docs/catalog/components/signup-flow.mdx
+++ b/docs/catalog/components/signup-flow.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Signup Flow</h1>
+  <p>A composed signup flow with social action, email field, password field, and submit button</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/signup-flow.json"
   compositionId="signup-flow"
   compositionSrc="compositions/components/signup-flow.html"
   title="Signup Flow"
-  description="A composed signup flow with social action, email field, password field, and submit button"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":80}}
   attribution={{"path":"registry/components/signup-flow","tags":["ui-flow","signup","form"]}}
@@ -115,7 +119,9 @@ That writes one file: `compositions/components/signup-flow.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -135,6 +141,4 @@ Tagged `ui-flow` `signup` `form`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/skeleton-reveal.mdx b/docs/catalog/components/skeleton-reveal.mdx
index ec378bed9c..838731dc11 100644
--- a/docs/catalog/components/skeleton-reveal.mdx
+++ b/docs/catalog/components/skeleton-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Skeleton Reveal</h1>
+  <p>A skeleton loader transition that pulses, then cross-fades into content</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/skeleton-reveal.json"
   compositionId="skeleton-reveal"
   compositionSrc="compositions/components/skeleton-reveal.html"
   title="Skeleton Reveal"
-  description="A skeleton loader transition that pulses, then cross-fades into content"
   variables={[{"id":"name","type":"string","role":"content","label":"Name","description":"Primary line revealed once the skeleton fades out.","default":"Jane Cooper"},{"id":"detail","type":"string","role":"content","label":"Detail","description":"Secondary line under the name, such as an email or a role.","default":"jane@example.com"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Card palette. Light is the paper card, dark is a near-black card with the matching skeleton bars and text.","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":130}}
   attribution={{"path":"registry/components/skeleton-reveal","tags":["video-primitive","transition-primitive","transitions-dev-port","skeleton","reveal"]}}
@@ -165,7 +169,9 @@ That writes one file: `compositions/components/skeleton-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -207,6 +213,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `skeleton
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/slit-scan-reveal.mdx b/docs/catalog/components/slit-scan-reveal.mdx
index aaedd07733..2a94349af2 100644
--- a/docs/catalog/components/slit-scan-reveal.mdx
+++ b/docs/catalog/components/slit-scan-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Slit Scan Reveal</h1>
+  <p>The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/slit-scan-reveal.json"
   compositionId="slit-scan-reveal"
   compositionSrc="compositions/components/slit-scan-reveal.html"
   title="Slit Scan Reveal"
-  description="The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent."
   variables={[{"id":"axis","type":"enum","role":"style","label":"Axis","description":"rows smears arrival across horizontal slices; cols across vertical slices.","default":"rows","options":[{"value":"rows","label":"Rows"},{"value":"cols","label":"Columns"}]},{"id":"spread","type":"number","role":"timing","label":"Spread","description":"Maximum sampling offset in seconds across the frame; larger smears further through time.","default":0.45},{"id":"resolve_at","type":"number","role":"timing","label":"Resolve at","description":"Seconds from mount start when the offsets start collapsing to zero. Clamped so the collapse and any exit stay inside the clip.","default":2.2},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Subject ring and orbit color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the resolved mark holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":332}}
   attribution={{"path":"registry/components/slit-scan-reveal","tags":["motion-primitive","time","slit-scan","canvas","deterministic","experiment"]}}
@@ -367,7 +371,9 @@ That writes one file: `compositions/components/slit-scan-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -410,6 +416,4 @@ Tagged `motion-primitive` `time` `slit-scan` `canvas` `deterministic` `experimen
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/slot-machine-roll.mdx b/docs/catalog/components/slot-machine-roll.mdx
index 11aacc4ee9..b64341a963 100644
--- a/docs/catalog/components/slot-machine-roll.mdx
+++ b/docs/catalog/components/slot-machine-roll.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Slot Machine Roll</h1>
+  <p>A vertical reel scrolls characters from one value to another.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/slot-machine-roll.json"
   compositionId="slot-machine-roll"
   compositionSrc="compositions/components/slot-machine-roll.html"
   title="Slot Machine Roll"
-  description="A vertical reel scrolls characters from one value to another."
   variables={[{"id":"result","type":"string","role":"content","label":"Result","description":"Characters the reels land on, one reel column per character. Whitespace is stripped and every reel starts on a zero.","default":"A7K"},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which way the reels roll: up lifts the zero out through the top, down drops it out through the bottom.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"size","type":"enum","role":"layout","label":"Size","description":"Reel height and type size. The roll distance scales with it so the reel always lands exactly one row on.","default":"standard","options":[{"value":"small","label":"Small"},{"value":"standard","label":"Standard"},{"value":"large","label":"Large"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Character colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":136}}
   attribution={{"path":"registry/components/slot-machine-roll","tags":["video-primitive","motion-primitive","typography"]}}
@@ -171,7 +175,9 @@ That writes one file: `compositions/components/slot-machine-roll.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -214,6 +220,4 @@ Tagged `video-primitive` `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/social-proof-card.mdx b/docs/catalog/components/social-proof-card.mdx
index ecc7137cc1..4cebeace3d 100644
--- a/docs/catalog/components/social-proof-card.mdx
+++ b/docs/catalog/components/social-proof-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Social Proof Card</h1>
+  <p>The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/social-proof-card.json"
   compositionId="social-proof-card"
   compositionSrc="compositions/components/social-proof-card.html"
   title="Social Proof Card"
-  description="The app-store close as one mountable scene: wordmark, five stars, a proof line, three feature icons and a CTA capsule build in a quiet stagger and hold - measured from reference ad footage. For an animated star sweep use star-rating-fill; for a quote card use testimonial-proof-card; for a bare lockup use cta-lockup"
   variables={[{"id":"brand","type":"string","role":"content","label":"Brand","description":"Wordmark at the top of the card.","default":"HyperFrames"},{"id":"proof","type":"string","role":"content","label":"Proof line","description":"Social-proof line under the stars.","default":"12,000+ creators"},{"id":"cta","type":"string","role":"content","label":"CTA","description":"Label on the closing capsule.","default":"Start rendering free"},{"id":"f1","type":"string","role":"content","label":"Feature 1","description":"First feature, | breaks the line.","default":"Write|plain HTML"},{"id":"f2","type":"string","role":"content","label":"Feature 2","description":"Second feature, | breaks the line.","default":"Render|pixel-perfect"},{"id":"f3","type":"string","role":"content","label":"Feature 3","description":"Third feature, | breaks the line.","default":"Own|every line"}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":230}}
   attribution={{"author":"Miao Yang","path":"registry/components/social-proof-card","tags":["motion-primitive","social-proof","end-card","cta","vertical"]}}
@@ -265,7 +269,9 @@ That writes one file: `compositions/components/social-proof-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -311,6 +317,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/soft-blob-touch.mdx b/docs/catalog/components/soft-blob-touch.mdx
index ff6166a0a9..aabca86be4 100644
--- a/docs/catalog/components/soft-blob-touch.mdx
+++ b/docs/catalog/components/soft-blob-touch.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Soft Blob Touch</h1>
+  <p>A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/soft-blob-touch.json"
   compositionId="soft-blob-touch"
   compositionSrc="compositions/components/soft-blob-touch.html"
   title="Soft Blob Touch"
-  description="A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere."
   variables={[{"id":"touch_x","type":"number","role":"layout","label":"Touch X","description":"Touch point, percent of host width.","default":66,"min":8,"max":92,"step":1,"unit":"%"},{"id":"touch_y","type":"number","role":"layout","label":"Touch Y","description":"Touch point, percent of host height.","default":38,"min":8,"max":92,"step":1,"unit":"%"},{"id":"touch_at","type":"number","role":"timing","label":"Touch at","description":"Seconds from mount start when the dot makes contact.","default":1.6,"min":0.9,"max":10,"step":0.1,"unit":"s"},{"id":"grain","type":"enum","role":"style","label":"Grain","description":"Speck register for the granular body.","default":"fine","options":[{"value":"fine","label":"Fine"},{"value":"coarse","label":"Coarse"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Body tint: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled blob holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":515}}
   attribution={{"path":"registry/components/soft-blob-touch","tags":["motion-primitive","product-demo","material","blob","touch","grain"]}}
@@ -550,7 +554,9 @@ That writes one file: `compositions/components/soft-blob-touch.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -594,6 +600,4 @@ Tagged `motion-primitive` `product-demo` `material` `blob` `touch` `grain`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/soft-blur-in.mdx b/docs/catalog/components/soft-blur-in.mdx
index 8637910135..485418ae41 100644
--- a/docs/catalog/components/soft-blur-in.mdx
+++ b/docs/catalog/components/soft-blur-in.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Soft Blur In</h1>
+  <p>A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/soft-blur-in.json"
   compositionId="soft-blur-in"
   compositionSrc="compositions/components/soft-blur-in.html"
   title="Soft Blur In"
-  description="A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts"
   variables={[{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"How far the element is offset before it slides home: 14px, 28px or 52px.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"up starts the element below its resting place so it rises in, down starts it above so it drops in.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"blur","type":"enum","role":"style","label":"Blur","description":"Starting blur radius, from a light haze to a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":83}}
   attribution={{"path":"registry/components/soft-blur-in","tags":["motion-primitive","text","reveal","blur"]}}
@@ -118,7 +122,9 @@ That writes one file: `compositions/components/soft-blur-in.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -160,6 +166,4 @@ Tagged `motion-primitive` `text` `reveal` `blur`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/split-tilt-cards.mdx b/docs/catalog/components/split-tilt-cards.mdx
index 0c46f1940f..df112c9e15 100644
--- a/docs/catalog/components/split-tilt-cards.mdx
+++ b/docs/catalog/components/split-tilt-cards.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Split Tilt Cards</h1>
+  <p>Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/split-tilt-cards.json"
   compositionId="split-tilt-cards"
   compositionSrc="compositions/components/split-tilt-cards.html"
   title="Split Tilt Cards"
-  description="Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults."
   variables={[{"id":"label_a","type":"string","role":"content","label":"Left label","description":"Mono header on the left card. Blank hides it.","default":"Before"},{"id":"label_b","type":"string","role":"content","label":"Right label","description":"Mono header on the right card. Blank hides it.","default":"After"},{"id":"badge_a","type":"string","role":"content","label":"Left badge","description":"Pill badge that spring-pops at the left card inner edge. Blank disables it.","default":"v1"},{"id":"badge_b","type":"string","role":"content","label":"Right badge","description":"Pill badge that spring-pops at the right card inner edge. Blank disables it.","default":"v2"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Right-card tint, right badge, and right ambient glow color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the final spread.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":571}}
   attribution={{"path":"registry/components/split-tilt-cards","tags":["motion-primitive","layout","compare","holdable","book-open","tilt","slots"]}}
@@ -606,7 +610,9 @@ That writes one file: `compositions/components/split-tilt-cards.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -650,6 +656,4 @@ Tagged `motion-primitive` `layout` `compare` `holdable` `book-open` `tilt` `slot
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/spotlight-card.mdx b/docs/catalog/components/spotlight-card.mdx
index 238c2f0d0e..cab4b71b15 100644
--- a/docs/catalog/components/spotlight-card.mdx
+++ b/docs/catalog/components/spotlight-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Spotlight Card</h1>
+  <p>A card with a scripted cursor spotlight and lit border.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/spotlight-card.json"
   compositionId="spotlight-card"
   compositionSrc="compositions/components/spotlight-card.html"
   title="Spotlight Card"
-  description="A card with a scripted cursor spotlight and lit border."
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":105}}
   attribution={{"path":"registry/components/spotlight-card","tags":["effect"]}}
@@ -140,7 +144,9 @@ That writes one file: `compositions/components/spotlight-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -160,6 +166,4 @@ Tagged `effect`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/spring-pop.mdx b/docs/catalog/components/spring-pop.mdx
index aa759cb91b..79a35919f8 100644
--- a/docs/catalog/components/spring-pop.mdx
+++ b/docs/catalog/components/spring-pop.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Spring Pop</h1>
+  <p>A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/spring-pop.json"
   compositionId="spring-pop"
   compositionSrc="compositions/components/spring-pop.html"
   title="Spring Pop"
-  description="A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly."
   variables={[{"id":"overshoot","type":"number","role":"timing","label":"Overshoot","description":"Strength passed to the back.out entrance curve.","default":1.7,"min":1.1,"max":2,"step":0.1},{"id":"fromScale","type":"number","role":"timing","label":"Starting scale","description":"Scale at the start of the entrance.","default":0.9,"min":0.8,"max":0.97,"step":0.01},{"id":"text","type":"string","role":"content","label":"Label","description":"Text displayed inside the badge.","default":"New"}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":195}}
   attribution={{"path":"registry/components/spring-pop","tags":["motion-primitive","effects","spring","overshoot","pop","reveal"]}}
@@ -230,7 +234,9 @@ That writes one file: `compositions/components/spring-pop.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -271,6 +277,4 @@ Tagged `motion-primitive` `effects` `spring` `overshoot` `pop` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/spring-stack-shuffle.mdx b/docs/catalog/components/spring-stack-shuffle.mdx
index 10284fa80b..6a7e91295f 100644
--- a/docs/catalog/components/spring-stack-shuffle.mdx
+++ b/docs/catalog/components/spring-stack-shuffle.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Spring Stack Shuffle</h1>
+  <p>A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/spring-stack-shuffle.json"
   compositionId="spring-stack-shuffle"
   compositionSrc="compositions/components/spring-stack-shuffle.html"
   title="Spring Stack Shuffle"
-  description="A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved."
   variables={[{"id":"cards","type":"number","role":"content","label":"Cards","description":"Number of cards in the stack, 3 to 5.","default":4,"min":3,"max":5,"step":1},{"id":"cues","type":"string","role":"timing","label":"Shuffle cues","description":"Comma-separated seconds from mount start; each cue throws the back card to the front. Cues inside a running throw redirect it mid-flight, velocity preserved. Empty keeps the default rhythm.","default":"0.9, 1.7, 1.95"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Active-card ring color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled stack holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":607}}
   attribution={{"path":"registry/components/spring-stack-shuffle","tags":["motion-primitive","product-demo","physics","stack","interruptible-spring"]}}
@@ -642,7 +646,9 @@ That writes one file: `compositions/components/spring-stack-shuffle.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -684,6 +690,4 @@ Tagged `motion-primitive` `product-demo` `physics` `stack` `interruptible-spring
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/stagger-cascade.mdx b/docs/catalog/components/stagger-cascade.mdx
index 02ff437cf1..964396aae3 100644
--- a/docs/catalog/components/stagger-cascade.mdx
+++ b/docs/catalog/components/stagger-cascade.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Stagger Cascade</h1>
+  <p>A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/stagger-cascade.json"
   compositionId="stagger-cascade"
   compositionSrc="compositions/components/stagger-cascade.html"
   title="Stagger Cascade"
-  description="A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic."
   variables={[{"id":"itemCount","type":"number","role":"layout","label":"Item count","description":"Number of tiles in the responsive grid.","default":6,"min":3,"max":12,"step":1},{"id":"stagger","type":"number","role":"motion","label":"Stagger","description":"Delay between consecutive tile entrances.","default":60,"min":20,"max":150,"step":1,"unit":"ms"},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Direction each tile travels into its resting position.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"},{"value":"left","label":"Left"},{"value":"right","label":"Right"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":258}}
   attribution={{"path":"registry/components/stagger-cascade","tags":["effects","grid","stagger","entrance","exhibit"]}}
@@ -293,7 +297,9 @@ That writes one file: `compositions/components/stagger-cascade.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -334,6 +340,4 @@ Tagged `effects` `grid` `stagger` `entrance` `exhibit`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/stagger-lattice.mdx b/docs/catalog/components/stagger-lattice.mdx
index 046b970ec1..7fa857de2b 100644
--- a/docs/catalog/components/stagger-lattice.mdx
+++ b/docs/catalog/components/stagger-lattice.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Stagger Lattice</h1>
+  <p>A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/stagger-lattice.json"
   compositionId="stagger-lattice"
   compositionSrc="compositions/components/stagger-lattice.html"
   title="Stagger Lattice"
-  description="A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames."
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":95}}
   attribution={{"path":"registry/components/stagger-lattice","tags":["advanced-motion","anime-inspired","hyperframes-native"]}}
@@ -130,7 +134,9 @@ That writes one file: `compositions/components/stagger-lattice.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -150,6 +156,4 @@ Tagged `advanced-motion` `anime-inspired` `hyperframes-native`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/staggered-fade-up.mdx b/docs/catalog/components/staggered-fade-up.mdx
index 77a3684473..1aad9d5392 100644
--- a/docs/catalog/components/staggered-fade-up.mdx
+++ b/docs/catalog/components/staggered-fade-up.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Staggered Fade Up</h1>
+  <p>Words fade in and slide up one after another with configurable delay.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/staggered-fade-up.json"
   compositionId="staggered-fade-up"
   compositionSrc="compositions/components/staggered-fade-up.html"
   title="Staggered Fade Up"
-  description="Words fade in and slide up one after another with configurable delay."
   variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Where the offset the timeline drives points.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"},{"value":"left","label":"Left"},{"value":"right","label":"Right"}]},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Scales the travel offset, so the words cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"words","type":"string","role":"content","label":"Words","description":"The words themselves, split on spaces, one span and one stagger step each.","default":"Staggered fade up"}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":120}}
   attribution={{"path":"registry/components/staggered-fade-up","tags":["video-primitive","motion-primitive","typography"]}}
@@ -155,7 +159,9 @@ That writes one file: `compositions/components/staggered-fade-up.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -198,6 +204,4 @@ Tagged `video-primitive` `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/star-rating-fill.mdx b/docs/catalog/components/star-rating-fill.mdx
index 9068eee140..893c9411e6 100644
--- a/docs/catalog/components/star-rating-fill.mdx
+++ b/docs/catalog/components/star-rating-fill.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Star Rating Fill</h1>
+  <p>A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/star-rating-fill.json"
   compositionId="star-rating-fill"
   compositionSrc="compositions/components/star-rating-fill.html"
   title="Star Rating Fill"
-  description="A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync."
   variables={[{"id":"rating","type":"number","role":"content","label":"Rating","description":"Target rating in star units from 0 to 5.","default":4.8,"min":0,"max":5,"step":0.1},{"id":"starCount","type":"number","role":"layout","label":"Star count","description":"Number of stars shown in the row.","default":5,"min":1,"max":10,"step":1},{"id":"showValue","type":"enum","role":"content","label":"Show value","description":"Show or hide the synchronized numeric rating.","default":"yes","options":[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]}]}
   meta={{"category":"Data","badge":"Stable","codeLines":298}}
   attribution={{"path":"registry/components/star-rating-fill","tags":["data","rating","stars","fractional","fill","prove"]}}
@@ -333,7 +337,9 @@ That writes one file: `compositions/components/star-rating-fill.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -374,6 +380,4 @@ Tagged `data` `rating` `stars` `fractional` `fill` `prove`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/state-chip-rail.mdx b/docs/catalog/components/state-chip-rail.mdx
index dea39f8bd1..7f86d48def 100644
--- a/docs/catalog/components/state-chip-rail.mdx
+++ b/docs/catalog/components/state-chip-rail.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>State Chip Rail</h1>
+  <p>A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/state-chip-rail.json"
   compositionId="state-chip-rail"
   compositionSrc="compositions/components/state-chip-rail.html"
   title="State Chip Rail"
-  description="A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state."
   variables={[{"id":"states","type":"string","role":"content","label":"States","description":"Comma-separated chip labels in machine order (2 to 8 states).","default":"Queued,Reading,Drafting,Done"},{"id":"times","type":"string","role":"timing","label":"Times","description":"Comma-separated activation times in seconds, one per advance (state 1 onward). Blank entries use the default even rhythm.","default":""},{"id":"badge_state","type":"number","role":"content","label":"Badge state","description":"Index of the state the badges pop beside.","default":1,"min":0,"max":7,"step":1},{"id":"badges","type":"string","role":"content","label":"Badges","description":"Comma-separated badge labels shown beside the badge state. Empty disables.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the active chip.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"How the rail leaves the frame. Default none: the hold ends the film.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":363}}
   attribution={{"path":"registry/components/state-chip-rail","tags":["motion-primitive","product-demo","state-machine","status","chips","rail"]}}
@@ -398,7 +402,9 @@ That writes one file: `compositions/components/state-chip-rail.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -442,6 +448,4 @@ Tagged `motion-primitive` `product-demo` `state-machine` `status` `chips` `rail`
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/sticky-mock-swap.mdx b/docs/catalog/components/sticky-mock-swap.mdx
index f8292cd192..7e35f06896 100644
--- a/docs/catalog/components/sticky-mock-swap.mdx
+++ b/docs/catalog/components/sticky-mock-swap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Sticky Mock Swap</h1>
+  <p>A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/sticky-mock-swap.json"
   compositionId="sticky-mock-swap"
   compositionSrc="compositions/components/sticky-mock-swap.html"
   title="Sticky Mock Swap"
-  description="A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it."
   variables={[{"id":"captions","type":"string","role":"content","label":"Captions","description":"Comma-separated feature captions shown beside the pinned mock.","default":"Instant previews,Zero config,Ship on Friday"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent tint used across the mock states.","default":"violet","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":465}}
   attribution={{"path":"registry/components/sticky-mock-swap","tags":["motion-primitive","product-demo","sticky","mock","crossfade","feature-tour"]}}
@@ -500,7 +504,9 @@ That writes one file: `compositions/components/sticky-mock-swap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -540,6 +546,4 @@ Tagged `motion-primitive` `product-demo` `sticky` `mock` `crossfade` `feature-to
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/stitched-text-draw.mdx b/docs/catalog/components/stitched-text-draw.mdx
index 7abac7de9b..ddd0e66d78 100644
--- a/docs/catalog/components/stitched-text-draw.mdx
+++ b/docs/catalog/components/stitched-text-draw.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Stitched Text Draw</h1>
+  <p>Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/stitched-text-draw.json"
   compositionId="stitched-text-draw"
   compositionSrc="compositions/components/stitched-text-draw.html"
   title="Stitched Text Draw"
-  description="Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Uppercased A-Z 0-9 and space, clamped to 12 characters.","default":"STITCH"},{"id":"stitch","type":"enum","role":"style","label":"Stitch","description":"Dash/gap scale, thread width, and jitter amplitude.","default":"fine","options":[{"value":"fine","label":"Fine"},{"value":"coarse","label":"Coarse"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Thread color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the stitched word holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":865}}
   attribution={{"path":"registry/components/stitched-text-draw","tags":["motion-primitive","experiment","type","craft","stitch","deterministic"]}}
@@ -900,7 +904,9 @@ That writes one file: `compositions/components/stitched-text-draw.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -942,6 +948,4 @@ Tagged `motion-primitive` `experiment` `type` `craft` `stitch` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/stop-motion-cadence.mdx b/docs/catalog/components/stop-motion-cadence.mdx
index d41060de92..58ee481a71 100644
--- a/docs/catalog/components/stop-motion-cadence.mdx
+++ b/docs/catalog/components/stop-motion-cadence.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Stop Motion Cadence</h1>
+  <p>The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/stop-motion-cadence.json"
   compositionId="stop-motion-cadence"
   compositionSrc="compositions/components/stop-motion-cadence.html"
   title="Stop Motion Cadence"
-  description="The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames."
   variables={[{"id":"fps","type":"enum","role":"timing","label":"Cadence","description":"Stepped-time cadence in frames per second.","default":"10","options":[{"value":"8","label":"8 fps"},{"value":"10","label":"10 fps"},{"value":"12","label":"12 fps"}]},{"id":"boil","type":"enum","role":"style","label":"Boil","description":"2-frame edge jitter, seeded per step. Off holds dead still.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Lead shape color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled collage holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":467}}
   attribution={{"path":"registry/components/stop-motion-cadence","tags":["motion-primitive","time-law","stop-motion","stepped","boil","deterministic","experiment"]}}
@@ -502,7 +506,9 @@ That writes one file: `compositions/components/stop-motion-cadence.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -544,6 +550,4 @@ Tagged `motion-primitive` `time-law` `stop-motion` `stepped` `boil` `determinist
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/store-badge-lockup.mdx b/docs/catalog/components/store-badge-lockup.mdx
index bc7919ee0b..bb7b1ce74f 100644
--- a/docs/catalog/components/store-badge-lockup.mdx
+++ b/docs/catalog/components/store-badge-lockup.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Store Badge Lockup</h1>
+  <p>Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/store-badge-lockup.json"
   compositionId="store-badge-lockup"
   compositionSrc="compositions/components/store-badge-lockup.html"
   title="Store Badge Lockup"
-  description="Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action."
   variables={[{"id":"headline","type":"string","role":"content","label":"Headline","description":"Short action line shown above the store badges.","default":"Get the app"},{"id":"showApple","type":"enum","role":"content","label":"Show App Store","description":"Show or hide the App Store badge.","default":"yes","options":[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]},{"id":"showGoogle","type":"enum","role":"content","label":"Show Google Play","description":"Show or hide the Google Play badge.","default":"yes","options":[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":305}}
   attribution={{"path":"registry/components/store-badge-lockup","tags":["prop","ui-props","mobile","store-badges","cta","ask"]}}
@@ -340,7 +344,9 @@ That writes one file: `compositions/components/store-badge-lockup.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -381,6 +387,4 @@ Tagged `prop` `ui-props` `mobile` `store-badges` `cta` `ask`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/streaming-text.mdx b/docs/catalog/components/streaming-text.mdx
index cee9c9589c..d2105f7cca 100644
--- a/docs/catalog/components/streaming-text.mdx
+++ b/docs/catalog/components/streaming-text.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Streaming Text</h1>
+  <p>Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/streaming-text.json"
   compositionId="streaming-text"
   compositionSrc="compositions/components/streaming-text.html"
   title="Streaming Text"
-  description="Words arrive the way an AI answer streams - in uneven bursts on a measured token rhythm, each word landing grey and inking to full colour - rather than the even tick of a typewriter"
   variables={[{"id":"size","type":"number","role":"style","label":"Size","description":"Type size of the streamed words.","default":27,"min":18,"max":64,"step":1,"unit":"px"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Ink pair: dark words on a light ground, or light words on a dark ground.","default":"dark-on-light","options":[{"value":"dark-on-light","label":"Dark on light"},{"value":"light-on-dark","label":"Light on dark"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":255}}
   attribution={{"author":"Miao Yang","path":"registry/components/streaming-text","tags":["video-primitive","text-effect","ai","chat"]}}
@@ -290,7 +294,9 @@ That writes one file: `compositions/components/streaming-text.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -333,6 +339,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/strikethrough-replace.mdx b/docs/catalog/components/strikethrough-replace.mdx
index db271fa72f..96bd0750e1 100644
--- a/docs/catalog/components/strikethrough-replace.mdx
+++ b/docs/catalog/components/strikethrough-replace.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Strikethrough Replace</h1>
+  <p>Draw a strike line across old text, then reveal the replacement.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/strikethrough-replace.json"
   compositionId="strikethrough-replace"
   compositionSrc="compositions/components/strikethrough-replace.html"
   title="Strikethrough Replace"
-  description="Draw a strike line across old text, then reveal the replacement."
   variables={[{"id":"origin","type":"enum","role":"motion","label":"Origin","description":"Edge the strike grows out of as the timeline runs its scale from 0 to 1.","default":"left","options":[{"value":"left","label":"Left"},{"value":"center","label":"Center"},{"value":"right","label":"Right"}]},{"id":"thickness","type":"enum","role":"style","label":"Thickness","description":"Height of the strike line, from a hairline rule to a heavy bar.","default":"standard","options":[{"value":"thin","label":"Thin"},{"value":"standard","label":"Standard"},{"value":"thick","label":"Thick"}]},{"id":"tint","type":"enum","role":"style","label":"Tint","description":"Strike colour. Blue and violet ride --accent and --accent-2.","default":"red","options":[{"value":"red","label":"Red"},{"value":"amber","label":"Amber"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of both words: ink for light frames, paper for dark ones.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":113}}
   attribution={{"path":"registry/components/strikethrough-replace","tags":["motion-primitive","typography"]}}
@@ -148,7 +152,9 @@ That writes one file: `compositions/components/strikethrough-replace.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -191,6 +197,4 @@ Tagged `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/success-check.mdx b/docs/catalog/components/success-check.mdx
index 3f921159d8..7eae9ac19a 100644
--- a/docs/catalog/components/success-check.mdx
+++ b/docs/catalog/components/success-check.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Success Check</h1>
+  <p>A success check primitive with ring pop, path draw, and subtle rotate blur</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/success-check.json"
   compositionId="success-check"
   compositionSrc="compositions/components/success-check.html"
   title="Success Check"
-  description="A success check primitive with ring pop, path draw, and subtle rotate blur"
   variables={[{"id":"tint","type":"enum","role":"style","label":"Tint","description":"Colour pair, a pale halo behind a saturated mark. green and amber are literal state colours; blue and violet ride the composition theme tokens.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"},{"value":"amber","label":"Amber"}]},{"id":"size","type":"enum","role":"layout","label":"Size","description":"Diameter of the halo and of the mark inside it.","default":"standard","options":[{"value":"small","label":"Small"},{"value":"standard","label":"Standard"},{"value":"large","label":"Large"}]},{"id":"ring","type":"enum","role":"style","label":"Ring","description":"Opacity of the circle the tick sits in.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]},{"id":"spin","type":"enum","role":"motion","label":"Spin","description":"Multiplies the rotation the timeline drives, so the mark swings less or more into place.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":135}}
   attribution={{"path":"registry/components/success-check","tags":["video-primitive","transition-primitive","transitions-dev-port","success","check"]}}
@@ -170,7 +174,9 @@ That writes one file: `compositions/components/success-check.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -213,6 +219,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `success`
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/svg-line-draw-loader.mdx b/docs/catalog/components/svg-line-draw-loader.mdx
index 1794d78640..213c82fd32 100644
--- a/docs/catalog/components/svg-line-draw-loader.mdx
+++ b/docs/catalog/components/svg-line-draw-loader.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>SVG Line Draw Loader</h1>
+  <p>An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/svg-line-draw-loader.json"
   compositionId="svg-line-draw-loader"
   compositionSrc="compositions/components/svg-line-draw-loader.html"
   title="SVG Line Draw Loader"
-  description="An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline."
   variables={[]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":75}}
   attribution={{"path":"registry/components/svg-line-draw-loader","tags":["video-primitive","advanced-motion","anime-inspired","hyperframes-native"]}}
@@ -110,7 +114,9 @@ That writes one file: `compositions/components/svg-line-draw-loader.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -130,6 +136,4 @@ Tagged `video-primitive` `advanced-motion` `anime-inspired` `hyperframes-native`
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/svg-mask-reveal.mdx b/docs/catalog/components/svg-mask-reveal.mdx
index c6bc3f4740..71bc39ebcf 100644
--- a/docs/catalog/components/svg-mask-reveal.mdx
+++ b/docs/catalog/components/svg-mask-reveal.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>SVG Mask Reveal</h1>
+  <p>A soft token-colored sweep reveals media only through an editable SVG wordmark mask.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/svg-mask-reveal.json"
   compositionId="svg-mask-reveal"
   compositionSrc="compositions/components/svg-mask-reveal.html"
   title="SVG Mask Reveal"
-  description="A soft token-colored sweep reveals media only through an editable SVG wordmark mask."
   variables={[{"id":"text","type":"string","role":"content","label":"Wordmark","description":"Text used as the SVG mask window.","default":"REVEAL","maxLength":16},{"id":"revealProgress","type":"number","role":"content","label":"Reveal progress","description":"Final revealed width of the wordmark.","default":100,"min":0,"max":100,"step":1,"unit":"%"},{"id":"featherPx","type":"number","role":"style","label":"Edge feather","description":"Softness of the traveling reveal edge.","default":24,"min":0,"max":120,"step":1,"unit":"px"}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":316}}
   attribution={{"path":"registry/components/svg-mask-reveal","tags":["effect","svg","mask","wordmark","reveal","exhibit"]}}
@@ -351,7 +355,9 @@ That writes one file: `compositions/components/svg-mask-reveal.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -392,6 +398,4 @@ Tagged `effect` `svg` `mask` `wordmark` `reveal` `exhibit`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/svg-stroke-trace.mdx b/docs/catalog/components/svg-stroke-trace.mdx
index cb660169a8..1113318fe7 100644
--- a/docs/catalog/components/svg-stroke-trace.mdx
+++ b/docs/catalog/components/svg-stroke-trace.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>SVG Stroke Trace</h1>
+  <p>An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/svg-stroke-trace.json"
   compositionId="svg-stroke-trace"
   compositionSrc="compositions/components/svg-stroke-trace.html"
   title="SVG Stroke Trace"
-  description="An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed."
   variables={[{"id":"path","type":"string","role":"content","label":"Path","description":"SVG path data for the authored mark.","default":"M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194"},{"id":"stroke_width","type":"number","role":"style","label":"Stroke width","description":"Width of the traced stroke in SVG viewBox units.","default":12,"min":2,"max":32,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the trace and optional fill.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the finished mark holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":229}}
   attribution={{"path":"registry/components/svg-stroke-trace","tags":["motion-primitive","intro","reveal","svg","stroke","line-draw"]}}
@@ -264,7 +268,9 @@ That writes one file: `compositions/components/svg-stroke-trace.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -306,6 +312,4 @@ Tagged `motion-primitive` `intro` `reveal` `svg` `stroke` `line-draw`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/swipe-rail.mdx b/docs/catalog/components/swipe-rail.mdx
index cc7660e3de..eeff120788 100644
--- a/docs/catalog/components/swipe-rail.mdx
+++ b/docs/catalog/components/swipe-rail.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Swipe Rail</h1>
+  <p>A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/swipe-rail.json"
   compositionId="swipe-rail"
   compositionSrc="compositions/components/swipe-rail.html"
   title="Swipe Rail"
-  description="A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card."
   variables={[{"id":"card_count","type":"number","role":"content","label":"Card count","description":"Number of cards rendered in the rail.","default":4,"min":3,"max":5,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Active color used by the focused card and contact circle.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"card_label_prefix","type":"string","role":"content","label":"Card label prefix","description":"Text placed before each card number.","default":"Feature"}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":358}}
   attribution={{"path":"registry/components/swipe-rail","tags":["motion-primitive","interaction","gesture","swipe","cards","rail"]}}
@@ -393,7 +397,9 @@ That writes one file: `compositions/components/swipe-rail.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -434,6 +440,4 @@ Tagged `motion-primitive` `interaction` `gesture` `swipe` `cards` `rail`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/tabs-slide-indicator.mdx b/docs/catalog/components/tabs-slide-indicator.mdx
index 4591229810..90cecee5db 100644
--- a/docs/catalog/components/tabs-slide-indicator.mdx
+++ b/docs/catalog/components/tabs-slide-indicator.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Tabs Slide Indicator</h1>
+  <p>A pill indicator transition that slides between active tabs</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/tabs-slide-indicator.json"
   compositionId="tabs-slide-indicator"
   compositionSrc="compositions/components/tabs-slide-indicator.html"
   title="Tabs Slide Indicator"
-  description="A pill indicator transition that slides between active tabs"
   variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Fill of the sliding pill. ink is literal; the rest ride the composition theme tokens.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"width","type":"enum","role":"layout","label":"Tab width","description":"Width of one tab. The slide the timeline drives is scaled to match, so the pill still lands on the next tab.","default":"standard","options":[{"value":"compact","label":"Compact"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"shape","type":"enum","role":"style","label":"Shape","description":"Corner radius of the track and the pill.","default":"pill","options":[{"value":"pill","label":"Pill"},{"value":"rounded","label":"Rounded"},{"value":"square","label":"Square"}]},{"id":"labels","type":"string","role":"content","label":"Labels","description":"The tab names, separated by commas. Two or more names rebuild the row.","default":"Plan,Debug,Ask"}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":169}}
   attribution={{"path":"registry/components/tabs-slide-indicator","tags":["transition-primitive","transitions-dev-port","tabs","indicator"]}}
@@ -204,7 +208,9 @@ That writes one file: `compositions/components/tabs-slide-indicator.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -247,6 +253,4 @@ Tagged `transition-primitive` `transitions-dev-port` `tabs` `indicator`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/telemetry-hud.mdx b/docs/catalog/components/telemetry-hud.mdx
index cc4531c810..7155cfc2fc 100644
--- a/docs/catalog/components/telemetry-hud.mdx
+++ b/docs/catalog/components/telemetry-hud.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Telemetry HUD</h1>
+  <p>Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/telemetry-hud.json"
   compositionId="telemetry-hud"
   compositionSrc="compositions/components/telemetry-hud.html"
   title="Telemetry HUD"
-  description="Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero."
   variables={[{"id":"readouts","type":"string","role":"content","label":"Readouts","description":"Comma-separated label:value pairs, up to 8. The first colon splits label from value.","default":"fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB"},{"id":"emphasize","type":"number","role":"style","label":"Emphasize","description":"Index of the readout rendered in the accent color. -1 disables.","default":0,"min":-1,"max":7,"step":1},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds relative to mount start; cue N starts readout N value tick. Empty uses the authored rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color of the emphasized readout.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. Frame roots own transitions; none holds the end frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":553}}
   attribution={{"path":"registry/components/telemetry-hud","tags":["motion-primitive","product-demo","hud","telemetry","deterministic"]}}
@@ -588,7 +592,9 @@ That writes one file: `compositions/components/telemetry-hud.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -631,6 +637,4 @@ Tagged `motion-primitive` `product-demo` `hud` `telemetry` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/terminal-simulator.mdx b/docs/catalog/components/terminal-simulator.mdx
index a74865ec82..ac680ddf04 100644
--- a/docs/catalog/components/terminal-simulator.mdx
+++ b/docs/catalog/components/terminal-simulator.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Terminal Simulator</h1>
+  <p>A terminal window types commands and streams log output.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/terminal-simulator.json"
   compositionId="terminal-simulator"
   compositionSrc="compositions/components/terminal-simulator.html"
   title="Terminal Simulator"
-  description="A terminal window types commands and streams log output."
   variables={[]}
   meta={{"category":"Code Animations","badge":"Stable","codeLines":92}}
   attribution={{"path":"registry/components/terminal-simulator","tags":["code-animation"]}}
@@ -127,7 +131,9 @@ That writes one file: `compositions/components/terminal-simulator.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -147,6 +153,4 @@ Tagged `code-animation`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/testimonial-card.mdx b/docs/catalog/components/testimonial-card.mdx
index 7ea00f73a9..f57871fd56 100644
--- a/docs/catalog/components/testimonial-card.mdx
+++ b/docs/catalog/components/testimonial-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Testimonial Card</h1>
+  <p>Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/testimonial-card.json"
   compositionId="testimonial-card"
   compositionSrc="compositions/components/testimonial-card.html"
   title="Testimonial Card"
-  description="Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat."
   variables={[{"id":"quote","type":"string","role":"content","label":"Quote","description":"Customer testimonial copy revealed at reading pace.","default":"This changed how we ship."},{"id":"author","type":"string","role":"content","label":"Author","description":"Name attributed to the testimonial.","default":"Ken Tanaka"},{"id":"handle","type":"string","role":"content","label":"Handle","description":"Role or social handle shown beneath the author name.","default":"@ken"},{"id":"rating","type":"number","role":"content","label":"Rating","description":"Visible customer rating from zero to five stars.","default":5,"min":0,"max":5,"step":0.1}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":329}}
   attribution={{"path":"registry/components/testimonial-card","tags":["prop","ui-props","testimonial","social-proof","quote","prove"]}}
@@ -364,7 +368,9 @@ That writes one file: `compositions/components/testimonial-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -406,6 +412,4 @@ Tagged `prop` `ui-props` `testimonial` `social-proof` `quote` `prove`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/testimonial-proof-card.mdx b/docs/catalog/components/testimonial-proof-card.mdx
index c8f99c0d00..4cb3c2edba 100644
--- a/docs/catalog/components/testimonial-proof-card.mdx
+++ b/docs/catalog/components/testimonial-proof-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Testimonial Proof Card</h1>
+  <p>A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/testimonial-proof-card.json"
   compositionId="testimonial-proof-card"
   compositionSrc="compositions/components/testimonial-proof-card.html"
   title="Testimonial Proof Card"
-  description="A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands."
   variables={[{"id":"quote","type":"string","role":"content","label":"Quote","description":"The testimonial line. Wraps inside the card; each rendered line reveals through its own mask.","default":"We shipped our launch video in a single afternoon"},{"id":"name","type":"string","role":"content","label":"Name","description":"Attribution name in mono. Also seeds the avatar initials.","default":"Maya Chen"},{"id":"role","type":"string","role":"content","label":"Role","description":"Attribution role in muted mono. Empty hides the line.","default":"Head of Product"},{"id":"company","type":"string","role":"content","label":"Company","description":"Company mark as wide-tracked mono text at the byline end. Empty hides it.","default":"NORTHWIND"},{"id":"emphasis","type":"string","role":"content","label":"Emphasis","description":"First case-insensitive substring match in quote, expanded to whole words, gets the accent underline. Empty disables the draw.","default":"single afternoon"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Underline and glyph ink from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the card holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":495}}
   attribution={{"path":"registry/components/testimonial-proof-card","tags":["motion-primitive","proof","testimonial","quote","social-proof","deterministic"]}}
@@ -530,7 +534,9 @@ That writes one file: `compositions/components/testimonial-proof-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -575,6 +581,4 @@ Tagged `motion-primitive` `proof` `testimonial` `quote` `social-proof` `determin
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/text-match-cut.mdx b/docs/catalog/components/text-match-cut.mdx
index 6e265ad89c..ec48e037b4 100644
--- a/docs/catalog/components/text-match-cut.mdx
+++ b/docs/catalog/components/text-match-cut.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text Match Cut</h1>
+  <p>One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/text-match-cut.json"
   compositionId="text-match-cut"
   compositionSrc="compositions/components/text-match-cut.html"
   title="Text Match Cut"
-  description="One line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or a same-direction slide."
   variables={[{"id":"text_a","type":"string","role":"content","label":"Outgoing text","description":"The line on screen before the cut.","default":"Basic Interface Behavior"},{"id":"text_b","type":"string","role":"content","label":"Incoming text","description":"The line that continues the move after the cut.","default":"Thoughtful Experience Design"},{"id":"mode","type":"enum","role":"style","label":"Move","description":"Which property carries the cut. Both texts ride the same curve.","default":"scale-down","options":[{"value":"scale-down","label":"Scale down (tutorial)"},{"value":"scale-up","label":"Scale up"},{"value":"tracking-in","label":"Tracking in"},{"value":"slide-left","label":"Slide left"},{"value":"slide-right","label":"Slide right"},{"value":"slide-up","label":"Slide up"},{"value":"slide-down","label":"Slide down"}]},{"id":"sweep","type":"enum","role":"style","label":"Gradient sweep","description":"Cyan-to-blue bar sweeping through the glyphs around the cut.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"background","type":"enum","role":"style","label":"Background","description":"The tutorial navy glow, or transparent so the host shows through.","default":"navy","options":[{"value":"navy","label":"Navy glow"},{"value":"transparent","label":"Transparent"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":324}}
   attribution={{"path":"registry/components/text-match-cut","tags":["motion-primitive","transition","typography","match-cut","hard-cut","continuity"]}}
@@ -359,7 +363,9 @@ That writes one file: `compositions/components/text-match-cut.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -402,6 +408,4 @@ Tagged `motion-primitive` `transition` `typography` `match-cut` `hard-cut` `cont
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/text-shimmer.mdx b/docs/catalog/components/text-shimmer.mdx
index 6819223dfd..7513fb392b 100644
--- a/docs/catalog/components/text-shimmer.mdx
+++ b/docs/catalog/components/text-shimmer.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text Shimmer</h1>
+  <p>A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/text-shimmer.json"
   compositionId="text-shimmer"
   compositionSrc="compositions/components/text-shimmer.html"
   title="Text Shimmer"
-  description="A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color."
   variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text receiving the single shimmer pass.","default":"Effortless"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Hue of the specular shimmer band.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"sweep_at","type":"number","role":"timing","label":"Sweep start","description":"Requested start time for the shimmer sweep.","default":1.2,"min":0.2,"max":2,"step":0.1,"unit":"s"}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":178}}
   attribution={{"path":"registry/components/text-shimmer","tags":["motion-primitive","text-effects","shimmer","specular","emphasis"]}}
@@ -213,7 +217,9 @@ That writes one file: `compositions/components/text-shimmer.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -254,6 +260,4 @@ Tagged `motion-primitive` `text-effects` `shimmer` `specular` `emphasis`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/text-stagger.mdx b/docs/catalog/components/text-stagger.mdx
index 732de4ac93..91b65a9fe0 100644
--- a/docs/catalog/components/text-stagger.mdx
+++ b/docs/catalog/components/text-stagger.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text Stagger</h1>
+  <p>A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/text-stagger.json"
   compositionId="text-stagger"
   compositionSrc="compositions/components/text-stagger.html"
   title="Text Stagger"
-  description="A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words"
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Headline copy. Every whitespace-separated word becomes one staggered span.","default":"Build motion systems fast"},{"id":"size","type":"number","role":"layout","label":"Size","description":"Type size of every word in pixels, clamped to 24-160. Line height stays proportional.","default":74,"min":24,"max":160,"step":1,"unit":"px"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Base word colour: ink for light frames, paper for dark ones.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour of the shimmer the second timeline step sweeps across the words.","default":"blue","options":[{"value":"blue","label":"Blue"},{"value":"green","label":"Green"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":132}}
   attribution={{"path":"registry/components/text-stagger","tags":["video-primitive","transition-primitive","transitions-dev-port","text","stagger"]}}
@@ -167,7 +171,9 @@ That writes one file: `compositions/components/text-stagger.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -210,6 +216,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `text` `s
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/text-state-swap.mdx b/docs/catalog/components/text-state-swap.mdx
index fc5d77d233..70b81edd37 100644
--- a/docs/catalog/components/text-state-swap.mdx
+++ b/docs/catalog/components/text-state-swap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Text State Swap</h1>
+  <p>A text state swap primitive with outgoing blur and incoming lift</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/text-state-swap.json"
   compositionId="text-state-swap"
   compositionSrc="compositions/components/text-state-swap.html"
   title="Text State Swap"
-  description="A text state swap primitive with outgoing blur and incoming lift"
   variables={[{"id":"from-text","type":"string","role":"content","label":"From text","description":"The outgoing label, on screen before the swap.","default":"Saving draft"},{"id":"to-text","type":"string","role":"content","label":"To text","description":"The incoming label, on screen after the swap. It rests hidden until the timeline reveals it.","default":"Saved"},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Scales the vertical offset the timeline drives, so each label covers a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Label colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":113}}
   attribution={{"path":"registry/components/text-state-swap","tags":["video-primitive","transition-primitive","transitions-dev-port","text","swap"]}}
@@ -148,7 +152,9 @@ That writes one file: `compositions/components/text-state-swap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -191,6 +197,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `text` `s
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/texture-mask-text.mdx b/docs/catalog/components/texture-mask-text.mdx
index 06e959aae9..698df252c2 100644
--- a/docs/catalog/components/texture-mask-text.mdx
+++ b/docs/catalog/components/texture-mask-text.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Texture Mask Text</h1>
+  <p>CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/texture-mask-text.json"
   compositionId="texture-mask-text"
   compositionSrc="compositions/components/texture-mask-text/texture-mask-text.html"
   title="Texture Mask Text"
-  description="CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps"
   variables={[]}
   meta={{"category":"Texture","badge":"Stable","codeLines":379}}
   attribution={{"path":"registry/components/texture-mask-text","tags":["text","text-effect","effect","texture","mask"]}}
@@ -414,7 +418,9 @@ That writes `compositions/components/texture-mask-text/texture-mask-text.html`,
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -895,6 +901,4 @@ Tagged `text` `text-effect` `effect` `texture` `mask`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/three-orbiting-cards.mdx b/docs/catalog/components/three-orbiting-cards.mdx
index cc904b7f2d..8bd9c88b5d 100644
--- a/docs/catalog/components/three-orbiting-cards.mdx
+++ b/docs/catalog/components/three-orbiting-cards.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Three Orbiting Cards</h1>
+  <p>A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/three-orbiting-cards.json"
   compositionId="three-orbiting-cards"
   compositionSrc="compositions/components/three-orbiting-cards.html"
   title="Three Orbiting Cards"
-  description="A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders."
   variables={[]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":117}}
   attribution={{"path":"registry/components/three-orbiting-cards","tags":["video-primitive","three-js","webgl","hyperframes-native"]}}
@@ -152,7 +156,9 @@ That writes one file: `compositions/components/three-orbiting-cards.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -172,6 +178,4 @@ Tagged `video-primitive` `three-js` `webgl` `hyperframes-native`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/ticker-takeover.mdx b/docs/catalog/components/ticker-takeover.mdx
index 821e8dc2b0..13bde0052e 100644
--- a/docs/catalog/components/ticker-takeover.mdx
+++ b/docs/catalog/components/ticker-takeover.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Ticker Takeover</h1>
+  <p>A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/ticker-takeover.json"
   compositionId="ticker-takeover"
   compositionSrc="compositions/components/ticker-takeover.html"
   title="Ticker Takeover"
-  description="A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline."
   variables={[{"id":"options","type":"string","role":"content","label":"Options","description":"Comma-separated words shown by the ticker.","default":"faster,smarter,together,everywhere"},{"id":"final_word","type":"string","role":"content","label":"Final word","description":"Word the ticker locks on and promotes.","default":"together"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used for the lock flash and promoted word.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":321}}
   attribution={{"path":"registry/components/ticker-takeover","tags":["motion-primitive","typography","ticker","slot-machine","headline","reveal"]}}
@@ -356,7 +360,9 @@ That writes one file: `compositions/components/ticker-takeover.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -397,6 +403,4 @@ Tagged `motion-primitive` `typography` `ticker` `slot-machine` `headline` `revea
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/tilt-card.mdx b/docs/catalog/components/tilt-card.mdx
index 04ff09e6c6..3524436cf4 100644
--- a/docs/catalog/components/tilt-card.mdx
+++ b/docs/catalog/components/tilt-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Tilt Card</h1>
+  <p>A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/tilt-card.json"
   compositionId="tilt-card"
   compositionSrc="compositions/components/tilt-card.html"
   title="Tilt Card"
-  description="A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax"
   variables={[{"id":"eyebrow","type":"string","role":"content","label":"Eyebrow","description":"Small uppercase kicker above the headline.","default":"Primitive"},{"id":"headline","type":"string","role":"content","label":"Headline","description":"Large card headline.","default":"Agent-ready motion"},{"id":"glow","type":"enum","role":"motion","label":"Glow","description":"How far the corner glow reaches past the card edges, which sets both its spread at rest and how far the timeline drift carries it.","default":"standard","options":[{"value":"tight","label":"Tight"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour family of the card gradient, corner glow, eyebrow and drop shadow.","default":"indigo","options":[{"value":"indigo","label":"Indigo"},{"value":"emerald","label":"Emerald"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":156}}
   attribution={{"path":"registry/components/tilt-card","tags":["video-primitive","transition-primitive","transitions-dev-port","card","tilt"]}}
@@ -191,7 +195,9 @@ That writes one file: `compositions/components/tilt-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -234,6 +240,4 @@ Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `card` `t
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/titlecard-calm.mdx b/docs/catalog/components/titlecard-calm.mdx
index 3e31fed1d4..6808519c76 100644
--- a/docs/catalog/components/titlecard-calm.mdx
+++ b/docs/catalog/components/titlecard-calm.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Titlecard Calm</h1>
+  <p>A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/titlecard-calm.json"
   compositionId="titlecard-calm"
   compositionSrc="compositions/components/titlecard-calm.html"
   title="Titlecard Calm"
-  description="A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly."
   variables={[{"id":"headline","type":"string","role":"content","label":"Headline","description":"Primary title displayed in the card.","default":"Less, but better"},{"id":"kicker","type":"string","role":"content","label":"Kicker","description":"Small uppercase label displayed above the headline.","default":"DESIGN PRINCIPLE"}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":188}}
   attribution={{"path":"registry/components/titlecard-calm","tags":["motion-primitive","typography","title-card","calm","orient"]}}
@@ -223,7 +227,9 @@ That writes one file: `compositions/components/titlecard-calm.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -263,6 +269,4 @@ Tagged `motion-primitive` `typography` `title-card` `calm` `orient`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/titlecard-lockup.mdx b/docs/catalog/components/titlecard-lockup.mdx
index 29656fcb22..3ad3d65644 100644
--- a/docs/catalog/components/titlecard-lockup.mdx
+++ b/docs/catalog/components/titlecard-lockup.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Titlecard Lockup</h1>
+  <p>The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/titlecard-lockup.json"
   compositionId="titlecard-lockup"
   compositionSrc="compositions/components/titlecard-lockup.html"
   title="Titlecard Lockup"
-  description="The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still."
   variables={[{"id":"wordmark","type":"string","role":"content","label":"Wordmark","description":"Display wordmark that settles dead-center.","default":"HYPERFRAMES"},{"id":"label","type":"string","role":"content","label":"Label","description":"Mono caption under the rule. Empty hides it.","default":"WRITE HTML. RENDER VIDEO."},{"id":"kicker","type":"string","role":"content","label":"Kicker","description":"Small mono label above the wordmark. Empty hides it.","default":"INTRODUCING"},{"id":"rule","type":"enum","role":"style","label":"Rule","description":"Hairline rule drawn left to right under the wordmark.","default":"show","options":[{"value":"show","label":"Show"},{"value":"hide","label":"Hide"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color carried by the hairline rule.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. Frame roots own transitions, so none is the default.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":321}}
   attribution={{"path":"registry/components/titlecard-lockup","tags":["motion-primitive","typography","title-card","lockup","breather","orient"]}}
@@ -356,7 +360,9 @@ That writes one file: `compositions/components/titlecard-lockup.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -400,6 +406,4 @@ Tagged `motion-primitive` `typography` `title-card` `lockup` `breather` `orient`
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/toggle-flip.mdx b/docs/catalog/components/toggle-flip.mdx
index 7f6185b8f5..c3ea395552 100644
--- a/docs/catalog/components/toggle-flip.mdx
+++ b/docs/catalog/components/toggle-flip.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Toggle Flip</h1>
+  <p>An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/toggle-flip.json"
   compositionId="toggle-flip"
   compositionSrc="compositions/components/toggle-flip.html"
   title="Toggle Flip"
-  description="An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family."
   variables={[{"id":"direction","type":"enum","role":"content","label":"Flip direction","description":"Target end state the flip lands on.","default":"on","options":[{"value":"on","label":"Off → On"},{"value":"off","label":"On → Off"}]},{"id":"label","type":"string","role":"content","label":"Caption","description":"Optional caption under the toggle. Blank hides the line.","default":"Auto-save"},{"id":"size","type":"number","role":"layout","label":"Size","description":"Toggle width as a percent of the host box width.","default":40,"min":20,"max":70,"step":1,"unit":"%"}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":424}}
   attribution={{"path":"registry/components/toggle-flip","tags":["prop","ui-props","toggle","interaction","reference-prop","demonstrate"]}}
@@ -459,7 +463,9 @@ That writes one file: `compositions/components/toggle-flip.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -500,6 +506,4 @@ Tagged `prop` `ui-props` `toggle` `interaction` `reference-prop` `demonstrate`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/top-down-letters.mdx b/docs/catalog/components/top-down-letters.mdx
index 647a62d691..301ccb8812 100644
--- a/docs/catalog/components/top-down-letters.mdx
+++ b/docs/catalog/components/top-down-letters.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Top-Down Letters</h1>
+  <p>Letters descend from above in a pronounced staircase with zero blur.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/top-down-letters.json"
   compositionId="top-down-letters"
   compositionSrc="compositions/components/top-down-letters.html"
   title="Top-Down Letters"
-  description="Letters descend from above in a pronounced staircase with zero blur."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Word that cascades in. Every character becomes one letter span, in source order.","default":"CASCADE"},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Multiplies the drop the timeline drives, so the letters cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Letter colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":112}}
   attribution={{"path":"registry/components/top-down-letters","tags":["video-primitive","motion-primitive","typography"]}}
@@ -147,7 +151,9 @@ That writes one file: `compositions/components/top-down-letters.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -189,6 +195,4 @@ Tagged `video-primitive` `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/torn-paper-rip.mdx b/docs/catalog/components/torn-paper-rip.mdx
index c0d4040216..59132328e4 100644
--- a/docs/catalog/components/torn-paper-rip.mdx
+++ b/docs/catalog/components/torn-paper-rip.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Torn Paper Rip</h1>
+  <p>A fibrous paper tear runs across the frame: the torn sheet shows its white paper core along the edge and lifts away on a soft shadow, leaving the next scene standing.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/torn-paper-rip.json"
   compositionId="torn-paper-rip"
   compositionSrc="compositions/components/torn-paper-rip.html"
   title="Torn Paper Rip"
-  description="A fibrous paper tear runs across the frame: the torn sheet shows its white paper core along the edge and lifts away on a soft shadow, leaving the next scene standing."
   variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which way the tear travels across the frame.","default":"left-to-right","options":[{"value":"left-to-right","label":"Left to right"},{"value":"right-to-left","label":"Right to left"}]},{"id":"tone","type":"enum","role":"style","label":"Paper tone","description":"Color of the exposed paper cross-section riding the tear.","default":"cream","options":[{"value":"cream","label":"Cream"},{"value":"kraft","label":"Kraft"},{"value":"white","label":"White"}]},{"id":"roughness","type":"number","role":"style","label":"Roughness","description":"How jagged and fibrous the tear edge is. Low is a clean deckle edge, high is roughly torn.","default":55,"min":20,"max":90,"step":1}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":412}}
   attribution={{"path":"registry/components/torn-paper-rip","tags":["torn paper","paper rip","paper tear","transition","texture","motion-primitive"]}}
@@ -447,7 +451,9 @@ That writes one file: `compositions/components/torn-paper-rip.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -488,6 +494,4 @@ Tagged `torn paper` `paper rip` `paper tear` `transition` `texture` `motion-prim
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/touch-indicator.mdx b/docs/catalog/components/touch-indicator.mdx
index 6a713848d1..6b3cdff29b 100644
--- a/docs/catalog/components/touch-indicator.mdx
+++ b/docs/catalog/components/touch-indicator.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Touch Indicator</h1>
+  <p>A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass on the frame the host target responds, then lifts. Tap or swipe, picked by variable.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/touch-indicator.json"
   compositionId="touch-indicator"
   compositionSrc="compositions/components/touch-indicator.html"
   title="Touch Indicator"
-  description="A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass on the frame the host target responds, then lifts. Tap or swipe, picked by variable."
   variables={[{"id":"gesture","type":"enum","label":"Gesture","default":"tap","options":[{"value":"tap","label":"Tap"},{"value":"swipe","label":"Swipe"}]},{"id":"polarity","type":"enum","label":"Polarity","default":"light","options":[{"value":"light","label":"Light (on dark UI)"},{"value":"dark","label":"Dark (on light UI)"}]},{"id":"targetX","type":"number","label":"Target X","default":50,"min":0,"max":100,"unit":"%"},{"id":"targetY","type":"number","label":"Target Y","default":55,"min":0,"max":100,"unit":"%"}]}
   meta={{"category":"Cursors","badge":"Stable","codeLines":250}}
   attribution={{"path":"registry/components/touch-indicator","tags":["cursor","motion-primitive","mobile","gesture","touch","pointer"]}}
@@ -285,7 +289,9 @@ That writes one file: `compositions/components/touch-indicator.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -327,6 +333,4 @@ Tagged `cursor` `motion-primitive` `mobile` `gesture` `touch` `pointer`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/tracing-beam.mdx b/docs/catalog/components/tracing-beam.mdx
index 2780b393eb..5d6be308fa 100644
--- a/docs/catalog/components/tracing-beam.mdx
+++ b/docs/catalog/components/tracing-beam.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Tracing Beam</h1>
+  <p>A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/tracing-beam.json"
   compositionId="tracing-beam"
   compositionSrc="compositions/components/tracing-beam.html"
   title="Tracing Beam"
-  description="A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence."
   variables={[{"id":"labels","type":"string","role":"content","label":"Labels","description":"Three comma-separated labels shown in path order.","default":"Search,Preview,Export"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Beam and active-element color.","default":"cyan","options":[{"value":"cyan","label":"Cyan"},{"value":"violet","label":"Violet"},{"value":"amber","label":"Amber"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":399}}
   attribution={{"path":"registry/components/tracing-beam","tags":["motion-primitive","product-demo","attention","beam","path","spotlight"]}}
@@ -434,7 +438,9 @@ That writes one file: `compositions/components/tracing-beam.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -474,6 +480,4 @@ Tagged `motion-primitive` `product-demo` `attention` `beam` `path` `spotlight`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/tracking-in.mdx b/docs/catalog/components/tracking-in.mdx
index 96eda05185..eaa4974c8e 100644
--- a/docs/catalog/components/tracking-in.mdx
+++ b/docs/catalog/components/tracking-in.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Tracking In</h1>
+  <p>A precise letter-spacing reveal for premium headings and interface labels</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/tracking-in.json"
   compositionId="tracking-in"
   compositionSrc="compositions/components/tracking-in.html"
   title="Tracking In"
-  description="A precise letter-spacing reveal for premium headings and interface labels"
   variables={[{"id":"tracking","type":"enum","role":"style","label":"Tracking","description":"Multiplies the letter-spacing the timeline drives, so the reveal starts and settles proportionally wider or tighter.","default":"standard","options":[{"value":"tight","label":"Tight"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"rise","type":"enum","role":"motion","label":"Rise","description":"Vertical offset the text starts from, which the timeline reads as the start of its travel and eases to zero.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Text colour: inherit keeps the surrounding page colour, ink suits light frames, paper dark ones, accent rides --brand.","default":"inherit","options":[{"value":"inherit","label":"Inherit"},{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":95}}
   attribution={{"path":"registry/components/tracking-in","tags":["motion-primitive","text","reveal","typography"]}}
@@ -130,7 +134,9 @@ That writes one file: `compositions/components/tracking-in.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -172,6 +178,4 @@ Tagged `motion-primitive` `text` `reveal` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/trust-strip.mdx b/docs/catalog/components/trust-strip.mdx
index f2313cb9c3..dcda99e918 100644
--- a/docs/catalog/components/trust-strip.mdx
+++ b/docs/catalog/components/trust-strip.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Trust Strip</h1>
+  <p>A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/trust-strip.json"
   compositionId="trust-strip"
   compositionSrc="compositions/components/trust-strip.html"
   title="Trust Strip"
-  description="A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still."
   variables={[{"id":"marks","type":"string","role":"content","label":"Marks","description":"Comma-separated wordmark texts (3 to 7 recommended).","default":"Northwind, Acme Corp, Globex, Initech, Umbra"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Mark color: quiet muted or full-contrast ink.","default":"muted","options":[{"value":"muted","label":"Muted"},{"value":"ink","label":"Ink"}]},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated reveal starts in seconds from mount start. Empty uses the authored 0.15s stagger.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Faint palette tint mixed into the mark color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"End-of-clip behavior. None holds to the last frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":226}}
   attribution={{"path":"registry/components/trust-strip","tags":["motion-primitive","proof","trust","logo-strip","wordmarks"]}}
@@ -261,7 +265,9 @@ That writes one file: `compositions/components/trust-strip.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -304,6 +310,4 @@ Tagged `motion-primitive` `proof` `trust` `logo-strip` `wordmarks`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/type-match-cut.mdx b/docs/catalog/components/type-match-cut.mdx
index 6cd4f108bd..f95237792e 100644
--- a/docs/catalog/components/type-match-cut.mdx
+++ b/docs/catalog/components/type-match-cut.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Type Match Cut</h1>
+  <p>A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/type-match-cut.json"
   compositionId="type-match-cut"
   compositionSrc="compositions/components/type-match-cut.html"
   title="Type Match Cut"
-  description="A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges."
   variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text split around the incoming panel.","default":"Meet the new editor"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent color used by the incoming editor scene.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":407}}
   attribution={{"path":"registry/components/type-match-cut","tags":["motion-primitive","transition","typography","match-cut","continuity"]}}
@@ -442,7 +446,9 @@ That writes one file: `compositions/components/type-match-cut.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -482,6 +488,4 @@ Tagged `motion-primitive` `transition` `typography` `match-cut` `continuity`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/typed-prompt.mdx b/docs/catalog/components/typed-prompt.mdx
index 867baf38fc..d8e4e52708 100644
--- a/docs/catalog/components/typed-prompt.mdx
+++ b/docs/catalog/components/typed-prompt.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Typed Prompt</h1>
+  <p>A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/typed-prompt.json"
   compositionId="typed-prompt"
   compositionSrc="compositions/components/typed-prompt.html"
   title="Typed Prompt"
-  description="A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The prompt that gets typed.","default":"Generate a product launch video"},{"id":"prompt_glyph","type":"string","role":"style","label":"Prompt glyph","description":"Leading glyph before the typed line. Empty string hides it.","default":">"},{"id":"cadence","type":"enum","role":"timing","label":"Cadence","description":"Keystroke rhythm: uniform fixed steps or seeded human chunks.","default":"human","options":[{"value":"uniform","label":"Uniform"},{"value":"human","label":"Human"}]},{"id":"caret","type":"enum","role":"style","label":"Caret","description":"Blink runs integer sine cycles during typing then goes solid.","default":"blink","options":[{"value":"blink","label":"Blink"},{"value":"solid","label":"Solid"}]},{"id":"correction","type":"string","role":"content","label":"Correction","description":"Mistyped word typed in place of the final word, then backspaced and corrected. Empty disables.","default":""},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds relative to mount start; cue N anchors the start of word N. Empty uses the authored rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color of the prompt glyph and caret.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. Frame roots own transitions; none holds the end frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":384}}
   attribution={{"path":"registry/components/typed-prompt","tags":["motion-primitive","product-demo","typing","prompt","deterministic"]}}
@@ -419,7 +423,9 @@ That writes one file: `compositions/components/typed-prompt.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -465,6 +471,4 @@ Tagged `motion-primitive` `product-demo` `typing` `prompt` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/typewriter.mdx b/docs/catalog/components/typewriter.mdx
index 1bb34d6b6f..5bd20de163 100644
--- a/docs/catalog/components/typewriter.mdx
+++ b/docs/catalog/components/typewriter.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Typewriter</h1>
+  <p>Character-by-character text reveal with a deterministic blinking cursor.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/typewriter.json"
   compositionId="typewriter"
   compositionSrc="compositions/components/typewriter.html"
   title="Typewriter"
-  description="Character-by-character text reveal with a deterministic blinking cursor."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Line that types itself out character by character.","default":"hyperframes add typewriter"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of the text and the caret: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"caret","type":"enum","role":"style","label":"Caret","description":"Caret shape: a thin rule, a terminal-style block, or no caret at all.","default":"line","options":[{"value":"line","label":"Line"},{"value":"block","label":"Block"},{"value":"none","label":"None"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":121}}
   attribution={{"path":"registry/components/typewriter","tags":["video-primitive","motion-primitive","typography"]}}
@@ -156,7 +160,9 @@ That writes one file: `compositions/components/typewriter.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -198,6 +204,4 @@ Tagged `video-primitive` `motion-primitive` `typography`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/typing-indicator.mdx b/docs/catalog/components/typing-indicator.mdx
index 9c9517bc24..e330ed7222 100644
--- a/docs/catalog/components/typing-indicator.mdx
+++ b/docs/catalog/components/typing-indicator.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Typing Indicator</h1>
+  <p>The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/typing-indicator.json"
   compositionId="typing-indicator"
   compositionSrc="compositions/components/typing-indicator.html"
   title="Typing Indicator"
-  description="The three-dot chat bubble that says someone is writing: it pops in at the thread's edge exactly as messaging apps do, holds while the reply is coming, and vanishes when the message lands"
   variables={[{"id":"size","type":"number","role":"style","label":"Size","description":"Bubble width in pixels; dots and tail scale with it.","default":124,"min":80,"max":220,"step":2,"unit":"px"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Dark is the reference iOS bubble; light suits bright chat grounds.","default":"dark","options":[{"value":"dark","label":"Dark"},{"value":"light","label":"Light"}]},{"id":"tail","type":"enum","role":"style","label":"Tail","description":"The two shrinking circles anchoring the bubble to the sender side.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]}]}
   meta={{"category":"Motion Primitives","badge":"Stable","codeLines":290}}
   attribution={{"author":"Miao Yang","path":"registry/components/typing-indicator","tags":["video-primitive","chat","mock-ui","overlay"]}}
@@ -325,7 +329,9 @@ That writes one file: `compositions/components/typing-indicator.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -369,6 +375,4 @@ Created by Miao Yang.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/ui-focus-zoom.mdx b/docs/catalog/components/ui-focus-zoom.mdx
index 6a36531966..c9ce7c9ac2 100644
--- a/docs/catalog/components/ui-focus-zoom.mdx
+++ b/docs/catalog/components/ui-focus-zoom.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>UI Focus Zoom</h1>
+  <p>A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/ui-focus-zoom.json"
   compositionId="ui-focus-zoom"
   compositionSrc="compositions/components/ui-focus-zoom.html"
   title="UI Focus Zoom"
-  description="A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default."
   variables={[{"id":"anchor_x","type":"number","role":"content","label":"Anchor X","description":"Focus anchor, percent from the left edge of the surface.","default":64,"min":0,"max":100,"step":1,"unit":"%"},{"id":"anchor_y","type":"number","role":"content","label":"Anchor Y","description":"Focus anchor, percent from the top edge of the surface.","default":36,"min":0,"max":100,"step":1,"unit":"%"},{"id":"zoom","type":"number","role":"content","label":"Zoom","description":"Camera scale at the focused state.","default":1.6,"min":1,"max":3,"step":0.05},{"id":"zoom_at","type":"number","role":"timing","label":"Zoom at","description":"Seconds from mount start when the camera departs for the anchor. Clamped inside the hold.","default":1.4,"min":0,"max":30,"step":0.1,"unit":"s"},{"id":"halo","type":"enum","role":"style","label":"Halo","description":"Soft accent bloom at the anchor as the camera arrives.","default":"show","options":[{"value":"show","label":"Show"},{"value":"hide","label":"Hide"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Token the halo and skeleton accent elements ride.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. None holds the final frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":564}}
   attribution={{"path":"registry/components/ui-focus-zoom","tags":["camera","product-demo","zoom","focus","pan","slot","servo"]}}
@@ -599,7 +603,9 @@ That writes one file: `compositions/components/ui-focus-zoom.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -644,6 +650,4 @@ Tagged `camera` `product-demo` `zoom` `focus` `pan` `slot` `servo`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/variable-axis-type.mdx b/docs/catalog/components/variable-axis-type.mdx
index abaa28b9f1..224fcb6486 100644
--- a/docs/catalog/components/variable-axis-type.mdx
+++ b/docs/catalog/components/variable-axis-type.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Variable Axis Type</h1>
+  <p>A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/variable-axis-type.json"
   compositionId="variable-axis-type"
   compositionSrc="compositions/components/variable-axis-type.html"
   title="Variable Axis Type"
-  description="A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Word or short headline to emphasize.","default":"IMPACT"},{"id":"axis","type":"enum","role":"motion","label":"Axis","description":"Variable-font axis used for the emphasis morph.","default":"wght","options":[{"value":"wght","label":"Weight"},{"value":"wdth","label":"Width"}]},{"id":"fromValue","type":"number","role":"motion","label":"From value","description":"Starting coordinate on the selected font axis.","default":200,"min":25,"max":1000,"step":1},{"id":"toValue","type":"number","role":"motion","label":"To value","description":"Ending coordinate on the selected font axis.","default":900,"min":25,"max":1000,"step":1}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":192}}
   attribution={{"path":"registry/components/variable-axis-type","tags":["typography","variable-font","kinetic-type","axis","emphasize"]}}
@@ -227,7 +231,9 @@ That writes one file: `compositions/components/variable-axis-type.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -269,6 +275,4 @@ Tagged `typography` `variable-font` `kinetic-type` `axis` `emphasize`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/variable-font-flex.mdx b/docs/catalog/components/variable-font-flex.mdx
index a5649ab308..2e388232c6 100644
--- a/docs/catalog/components/variable-font-flex.mdx
+++ b/docs/catalog/components/variable-font-flex.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Variable Font Flex</h1>
+  <p>A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/variable-font-flex.json"
   compositionId="variable-font-flex"
   compositionSrc="compositions/components/variable-font-flex.html"
   title="Variable Font Flex"
-  description="A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The word whose variable-font axes flex.","default":"FLEX"},{"id":"axis","type":"enum","role":"style","label":"Axis","description":"Which variable-font axes animate: weight, width, or both.","default":"both","options":[{"value":"weight","label":"Weight"},{"value":"width","label":"Width"},{"value":"both","label":"Both"}]},{"id":"stagger","type":"number","role":"timing","label":"Stagger","description":"Seconds between per-character flex starts, clamped 0 to 0.25.","default":0.06},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Word color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the carved word holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":304}}
   attribution={{"path":"registry/components/variable-font-flex","tags":["motion-primitive","experiment","type","variable-font","deterministic"]}}
@@ -339,7 +343,9 @@ That writes one file: `compositions/components/variable-font-flex.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -382,6 +388,4 @@ Tagged `motion-primitive` `experiment` `type` `variable-font` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/vector-editor-rig.mdx b/docs/catalog/components/vector-editor-rig.mdx
index 5bf2624ea1..4d37dfd15b 100644
--- a/docs/catalog/components/vector-editor-rig.mdx
+++ b/docs/catalog/components/vector-editor-rig.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vector Editor Rig</h1>
+  <p>A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/vector-editor-rig.json"
   compositionId="vector-editor-rig"
   compositionSrc="compositions/components/vector-editor-rig.html"
   title="Vector Editor Rig"
-  description="A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents."
   variables={[{"id":"tool","type":"enum","role":"content","label":"Active tool","description":"Tool highlighted in the editor toolbar.","default":"pen","options":[{"value":"pen","label":"Pen"},{"value":"shape","label":"Shape"},{"value":"type","label":"Type"}]},{"id":"pathLabel","type":"string","role":"content","label":"Path label","description":"Name shown for the active vector path.","default":"Logo"}]}
   meta={{"category":"Product Demo","badge":"Stable","codeLines":795}}
   attribution={{"path":"registry/components/vector-editor-rig","tags":["prop","ui-props","demonstrate","vector","design-tool","pen-tool","bezier","app-chrome"]}}
@@ -830,7 +834,9 @@ That writes one file: `compositions/components/vector-editor-rig.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -870,6 +876,4 @@ Tagged `prop` `ui-props` `demonstrate` `vector` `design-tool` `pen-tool` `bezier
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/velocity-throw-snap.mdx b/docs/catalog/components/velocity-throw-snap.mdx
index fac5512309..f0e5bb8352 100644
--- a/docs/catalog/components/velocity-throw-snap.mdx
+++ b/docs/catalog/components/velocity-throw-snap.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Velocity Throw Snap</h1>
+  <p>A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/velocity-throw-snap.json"
   compositionId="velocity-throw-snap"
   compositionSrc="compositions/components/velocity-throw-snap.html"
   title="Velocity Throw Snap"
-  description="A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center."
   variables={[{"id":"hero_index","type":"number","role":"content","label":"Hero index","description":"Zero-based index of the shot centered at the settle.","default":2,"min":0,"max":4,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color used by the hero shot.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"card_label_prefix","type":"string","role":"content","label":"Card label prefix","description":"Text placed before each shot number.","default":"Shot"}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":484}}
   attribution={{"path":"registry/components/velocity-throw-snap","tags":["motion-primitive","feature-tour","rail","velocity","throw","snap","physics"]}}
@@ -519,7 +523,9 @@ That writes one file: `compositions/components/velocity-throw-snap.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -560,6 +566,4 @@ Tagged `motion-primitive` `feature-tour` `rail` `velocity` `throw` `snap` `physi
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/vignette.mdx b/docs/catalog/components/vignette.mdx
index d15ed5d18e..b5ce0fce22 100644
--- a/docs/catalog/components/vignette.mdx
+++ b/docs/catalog/components/vignette.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vignette</h1>
+  <p>Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/vignette.json"
   compositionId="vignette"
   compositionSrc="compositions/components/vignette.html"
   title="Vignette"
-  description="Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":51}}
   attribution={{"path":"registry/components/vignette","tags":["vignette","overlay","cinematic","effect"]}}
@@ -86,7 +90,9 @@ That writes one file: `compositions/components/vignette.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -106,6 +112,4 @@ Tagged `vignette` `overlay` `cinematic` `effect`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/vox-annotate.mdx b/docs/catalog/components/vox-annotate.mdx
index 0fb4ecd340..9c236245a8 100644
--- a/docs/catalog/components/vox-annotate.mdx
+++ b/docs/catalog/components/vox-annotate.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Vox Annotate</h1>
+  <p>The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/vox-annotate.json"
   compositionId="vox-annotate"
   compositionSrc="compositions/components/vox-annotate.html"
   title="Vox Annotate"
-  description="The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue."
   variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Full line of display text.","default":"Ship the story, not the spec"},{"id":"keyword","type":"string","role":"content","label":"Keyword","description":"First case-insensitive substring match in text receives the marker and annotation. Empty or unmatched draws nothing.","default":"story"},{"id":"note","type":"string","role":"content","label":"Note","description":"Mono callout label at the end of the connector. Empty draws the marker only.","default":"the annotate beat"},{"id":"style","type":"enum","role":"style","label":"Marker style","description":"Shape of the hand-drawn marker stroke.","default":"highlight","options":[{"value":"highlight","label":"Highlight"},{"value":"circle","label":"Circle"},{"value":"underline","label":"Underline"},{"value":"scribble","label":"Scribble"}]},{"id":"draw_at","type":"number","role":"timing","label":"Draw at","description":"Second (from mount start) the annotate gesture starts. Clamped so the gesture completes before any exit.","default":0.9,"min":0,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Annotation ink color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":477}}
   attribution={{"path":"registry/components/vox-annotate","tags":["motion-primitive","typography","annotation","marker","deterministic"]}}
@@ -512,7 +516,9 @@ That writes one file: `compositions/components/vox-annotate.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -557,6 +563,4 @@ Tagged `motion-primitive` `typography` `annotation` `marker` `deterministic`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/whip-pan-cut.mdx b/docs/catalog/components/whip-pan-cut.mdx
index b78b392e2c..94b9105004 100644
--- a/docs/catalog/components/whip-pan-cut.mdx
+++ b/docs/catalog/components/whip-pan-cut.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Whip Pan Cut</h1>
+  <p>A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/whip-pan-cut.json"
   compositionId="whip-pan-cut"
   compositionSrc="compositions/components/whip-pan-cut.html"
   title="Whip Pan Cut"
-  description="A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty."
   variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Shared travel direction for the outgoing and incoming scenes.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"}]},{"id":"whip_at","type":"number","role":"timing","label":"Whip start","description":"Seconds after mount start when the whip begins.","default":0.25,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Seam hairline and default after art tint.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure of the landed scene. Default none: it rests until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":487}}
   attribution={{"path":"registry/components/whip-pan-cut","tags":["transition","whip-pan","motion-blur","velocity-match","speed-ramp","bridge","slots"]}}
@@ -522,7 +526,9 @@ That writes one file: `compositions/components/whip-pan-cut.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -564,6 +570,4 @@ Tagged `transition` `whip-pan` `motion-blur` `velocity-match` `speed-ramp` `brid
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/whiteboard-ink.mdx b/docs/catalog/components/whiteboard-ink.mdx
index 96c7ef9b80..f41b1175d1 100644
--- a/docs/catalog/components/whiteboard-ink.mdx
+++ b/docs/catalog/components/whiteboard-ink.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Whiteboard Ink</h1>
+  <p>A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/whiteboard-ink.json"
   compositionId="whiteboard-ink"
   compositionSrc="compositions/components/whiteboard-ink.html"
   title="Whiteboard Ink"
-  description="A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token."
   variables={[{"id":"sketch","type":"enum","role":"content","label":"Sketch","description":"Authored preset sketch to draw. Ignored when the strokes slot holds custom paths.","default":"bulb","options":[{"value":"bulb","label":"Bulb"},{"value":"flow","label":"Flow"},{"value":"rocket","label":"Rocket"}]},{"id":"caption","type":"string","role":"content","label":"Caption","description":"Short line shown after the sketch completes.","default":"Draw the idea"},{"id":"pen","type":"enum","role":"style","label":"Pen","description":"Show or hide the pen nib actor.","default":"show","options":[{"value":"show","label":"Show"},{"value":"hide","label":"Hide"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by strokes marked data-ink=accent (one highlight stroke in each preset).","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"How the completed lockup leaves. none holds the final frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
   meta={{"category":"Motion Scenes","badge":"Stable","codeLines":540}}
   attribution={{"path":"registry/components/whiteboard-ink","tags":["motion-primitive","intro","reveal","svg","whiteboard","line-draw","slot"]}}
@@ -575,7 +579,9 @@ That writes one file: `compositions/components/whiteboard-ink.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -618,6 +624,4 @@ Tagged `motion-primitive` `intro` `reveal` `svg` `whiteboard` `line-draw` `slot`
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/wordmark-tiles.mdx b/docs/catalog/components/wordmark-tiles.mdx
index d5a357a1c9..38ff14719a 100644
--- a/docs/catalog/components/wordmark-tiles.mdx
+++ b/docs/catalog/components/wordmark-tiles.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Wordmark Tiles</h1>
+  <p>A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/wordmark-tiles.json"
   compositionId="wordmark-tiles"
   compositionSrc="compositions/components/wordmark-tiles.html"
   title="Wordmark Tiles"
-  description="A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave."
   variables={[{"id":"text","type":"string","role":"content","label":"Wordmark","description":"Text resolved by the tile wave.","default":"LAUNCH","maxLength":12},{"id":"columns","type":"number","role":"layout","label":"Columns","description":"Number of columns in the wordmark tile grid.","default":12,"min":8,"max":14,"step":1},{"id":"waveStagger","type":"number","role":"motion","label":"Wave stagger","description":"Delay between tile reveals in spatial wave order.","default":40,"min":15,"max":50,"step":1,"unit":"ms"}]}
   meta={{"category":"Typography & Text","badge":"Stable","codeLines":360}}
   attribution={{"path":"registry/components/wordmark-tiles","tags":["typography","wordmark","tiles","raster","reveal"]}}
@@ -395,7 +399,9 @@ That writes one file: `compositions/components/wordmark-tiles.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -436,6 +442,4 @@ Tagged `typography` `wordmark` `tiles` `raster` `reveal`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/x-follow-card.mdx b/docs/catalog/components/x-follow-card.mdx
index bf6e382da5..75d2593054 100644
--- a/docs/catalog/components/x-follow-card.mdx
+++ b/docs/catalog/components/x-follow-card.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>X Follow Card</h1>
+  <p>A social follow card with avatar, handle, and follower motion.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/x-follow-card.json"
   compositionId="x-follow-card"
   compositionSrc="compositions/components/x-follow-card.html"
   title="X Follow Card"
-  description="A social follow card with avatar, handle, and follower motion."
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":89}}
   attribution={{"path":"registry/components/x-follow-card","tags":["social-overlay"]}}
@@ -124,7 +128,9 @@ That writes one file: `compositions/components/x-follow-card.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -144,6 +150,4 @@ Tagged `social-overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/yt-camera-move.mdx b/docs/catalog/components/yt-camera-move.mdx
index 9c1c8750c5..100d99a1e6 100644
--- a/docs/catalog/components/yt-camera-move.mdx
+++ b/docs/catalog/components/yt-camera-move.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Camera Punch-In</h1>
+  <p>Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/yt-camera-move.json"
   compositionId="yt-camera-move"
   compositionSrc="compositions/components/yt-camera-move.html"
   title="Camera Punch-In"
-  description="Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay"
   variables={[]}
   meta={{"category":"Camera","badge":"Stable","codeLines":175}}
   attribution={{"path":"registry/components/yt-camera-move","tags":["camera","zoom","effect","creator"]}}
@@ -210,7 +214,9 @@ That writes one file: `compositions/components/yt-camera-move.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -229,6 +235,4 @@ Tagged `camera` `zoom` `effect` `creator`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/yt-circle-pointer.mdx b/docs/catalog/components/yt-circle-pointer.mdx
index a562ba8860..d8f9bed38b 100644
--- a/docs/catalog/components/yt-circle-pointer.mdx
+++ b/docs/catalog/components/yt-circle-pointer.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Pointer Circle + Countdown</h1>
+  <p>Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/yt-circle-pointer.json"
   compositionId="yt-circle-pointer"
   compositionSrc="compositions/components/yt-circle-pointer.html"
   title="Pointer Circle + Countdown"
-  description="Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":168}}
   attribution={{"path":"registry/components/yt-circle-pointer","tags":["annotation","countdown","overlay"]}}
@@ -203,7 +207,9 @@ That writes one file: `compositions/components/yt-circle-pointer.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -222,6 +228,4 @@ Tagged `annotation` `countdown` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/yt-feather-highlight.mdx b/docs/catalog/components/yt-feather-highlight.mdx
index 6fe157f07a..8ccebc29ec 100644
--- a/docs/catalog/components/yt-feather-highlight.mdx
+++ b/docs/catalog/components/yt-feather-highlight.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Feathered Spotlight</h1>
+  <p>Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/yt-feather-highlight.json"
   compositionId="yt-feather-highlight"
   compositionSrc="compositions/components/yt-feather-highlight.html"
   title="Feathered Spotlight"
-  description="Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets"
   variables={[]}
   meta={{"category":"Effects","badge":"Stable","codeLines":145}}
   attribution={{"path":"registry/components/yt-feather-highlight","tags":["highlight","spotlight","effect","overlay"]}}
@@ -180,7 +184,9 @@ That writes one file: `compositions/components/yt-feather-highlight.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -199,6 +205,4 @@ Tagged `highlight` `spotlight` `effect` `overlay`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/yt-screen-warp.mdx b/docs/catalog/components/yt-screen-warp.mdx
index ca54586a40..480bf8b49c 100644
--- a/docs/catalog/components/yt-screen-warp.mdx
+++ b/docs/catalog/components/yt-screen-warp.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>On-Screen Display Effect</h1>
+  <p>Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/yt-screen-warp.json"
   compositionId="yt-screen-warp"
   compositionSrc="compositions/components/yt-screen-warp.html"
   title="On-Screen Display Effect"
-  description="Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display"
   variables={[]}
   meta={{"category":"Texture","badge":"Stable","codeLines":123}}
   attribution={{"path":"registry/components/yt-screen-warp","tags":["effect","overlay","texture"]}}
@@ -158,7 +162,9 @@ That writes one file: `compositions/components/yt-screen-warp.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -177,6 +183,4 @@ Tagged `effect` `overlay` `texture`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/catalog/components/zoom-through-transition.mdx b/docs/catalog/components/zoom-through-transition.mdx
index 3d155ac633..32ceddabc0 100644
--- a/docs/catalog/components/zoom-through-transition.mdx
+++ b/docs/catalog/components/zoom-through-transition.mdx
@@ -7,12 +7,16 @@ mode: "frame"
 import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+<div className="hf-ve-static-head not-prose">
+  <h1>Zoom Through Transition</h1>
+  <p>A transition that zooms through a focal card into the next scene.</p>
+</div>
+
 <CatalogDetail
   previewSrc="/public/catalog/components/zoom-through-transition.json"
   compositionId="zoom-through-transition"
   compositionSrc="compositions/components/zoom-through-transition.html"
   title="Zoom Through Transition"
-  description="A transition that zooms through a focal card into the next scene."
   variables={[{"id":"from-label","type":"string","role":"content","label":"Outgoing label","description":"Caption on the outgoing scene, the one on screen when the transition starts.","default":"Before"},{"id":"to-label","type":"string","role":"content","label":"Incoming label","description":"Caption on the incoming scene, the one the timeline wipes into frame.","default":"Zoom Through Transition"},{"id":"depth","type":"enum","role":"motion","label":"Depth","description":"Multiplies how far both scenes travel and how hard the outgoing one blurs, so the push covers a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Theme token for the ring marking the incoming scene. Blue rides --accent, green --brand, violet --accent-2; each falls back to a neutral hairline.","default":"blue","options":[{"value":"blue","label":"Blue"},{"value":"green","label":"Green"},{"value":"violet","label":"Violet"}]}]}
   meta={{"category":"Effects","badge":"Stable","codeLines":284}}
   attribution={{"path":"registry/components/zoom-through-transition","tags":["transition-primitive"]}}
@@ -319,7 +323,9 @@ That writes one file: `compositions/components/zoom-through-transition.html`.
 
 </CatalogSlot>
 
-<CatalogSlot slot="docs">
+</CatalogDetail>
+
+<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">
 
 ## Paste it into your composition
 
@@ -361,6 +367,4 @@ Tagged `transition-primitive`.
 - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks)
 - [Put blocks together into one video](/concepts/compositions)
 
-</CatalogSlot>
-
-</CatalogDetail>
+</div>
diff --git a/docs/custom.css b/docs/custom.css
index 3f807eee76..d0b79fdfba 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -1831,3 +1831,16 @@ pre.shiki {
 .hf-remix-credit, .hf-remix-help { color: var(--hf-text-secondary); }
 .hf-remix-credit a { color: inherit; }
 .hf-remix-btn { background: var(--hf-heading); color: var(--hf-background); }
+
+/* Catalog item pages: the title, the standfirst and the Docs tab are written into the page itself
+   (scripts/generate-catalog-pages.ts), because Mintlify renders snippet components in the browser only and
+   search engines read the server HTML. CatalogDetail adds the player, tabs and tools around them. */
+.hf-ve-static-head { margin: 8px 0 28px; }
+.hf-ve-static-head h1 { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--hf-text); }
+.hf-ve-static-head p { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--hf-text-secondary); max-width: 70ch; }
+html.dark .hf-ve-static-head h1 { color: #f5f3f1; }
+html.dark .hf-ve-static-head p { color: #b8b6b4; }
+@media (max-width: 640px) { .hf-ve-static-head h1 { font-size: 32px; } }
+/* The Docs tab's text sits after the component and shows only while that tab is open, as the tab's own slot did. */
+[data-static-slot] { display: none; }
+body:has(.hf-ve-slots[data-tab="docs"]) [data-static-slot="docs"] { display: block; }
diff --git a/docs/snippets/catalog-detail.jsx b/docs/snippets/catalog-detail.jsx
index 38dc85fea5..02e476047c 100644
--- a/docs/snippets/catalog-detail.jsx
+++ b/docs/snippets/catalog-detail.jsx
@@ -68,7 +68,6 @@ export const CatalogDetail = ({
   compositionSrc,
   variables = [],
   title,
-  description,
   meta = {},
   about,
   attribution,
@@ -585,10 +584,6 @@ export const CatalogDetail = ({
     color 100ms ease;
 }
 
-.hf-ve-head-title { margin: 8px 0 28px; }
-.hf-ve-head-title h1 { margin: 0; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--ve-fg); }
-.hf-ve-head-title p { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--ve-muted); max-width: 70ch; }
-@media (max-width: 640px) { .hf-ve-head-title h1 { font-size: 32px; } }
 /* Item page anatomy: bar, stage beside Tune, tabs, tab body. */
 .hf-ve-bar {
   display: flex;
@@ -2085,13 +2080,6 @@ export const CatalogDetail = ({
     <div className="hf-ve my-4">
       <style dangerouslySetInnerHTML={{ __html: CSS }} />
 
-      <div className="not-prose">
-        <header className="hf-ve-head-title">
-          <h1>{title}</h1>
-          {description && <p>{description}</p>}
-        </header>
-      </div>
-
       {installSlot && (
         <div className="hf-ve-install">
           <h2 className="hf-ve-install-title">Install</h2>
diff --git a/scripts/catalog-detail.test.ts b/scripts/catalog-detail.test.ts
index f50623b605..b99cd257d4 100644
--- a/scripts/catalog-detail.test.ts
+++ b/scripts/catalog-detail.test.ts
@@ -517,13 +517,12 @@ async function renderDetail(slots: string[], wrapped = false): Promise<string> {
 }
 
 for (const wrapped of [false, true]) {
-  test(`the install block renders once, between the description and the preview stage (${wrapped ? "as Mintlify wraps children" : "bare slots"})`, async () => {
+  test(`the install block renders once, above the preview stage, under the page's own title (${wrapped ? "as Mintlify wraps children" : "bare slots"})`, async () => {
     const html = await renderDetail(["code", "install", "docs"], wrapped);
     const at = (needle: string) => html.indexOf(needle);
-    assert.ok(
-      at("X title") !== -1 && at("MARK-install") !== -1 && at('class="hf-ve-stage"') !== -1,
-    );
-    assert.ok(at("X title") < at("MARK-install"), "install comes after the title");
+    assert.ok(at("MARK-install") !== -1 && at('class="hf-ve-stage"') !== -1);
+    // The page writes the H1 and standfirst itself, so the server HTML has them (generate-catalog-pages.ts).
+    assert.ok(!html.includes("<h1"), "the component draws no title of its own");
     assert.ok(at("MARK-install") < at('class="hf-ve-stage"'), "install comes before the stage");
     assert.equal(html.split("MARK-install").length - 1, 1, "install is rendered once");
     assert.ok(at("MARK-docs") > at('class="hf-ve-stage"'), "the other slots stay below the stage");
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 11adec40c6..8ca6fb8f91 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -58,6 +58,19 @@ export function mdxStringAttribute(name: string, value: string): string {
   return `${name}="${escaped}"`;
 }
 
+/**
+ * Text as the plain child of an HTML element in MDX, escaped through character
+ * references like mdxStringAttribute: `<`, `{` and `}` would otherwise open
+ * markup or an expression, and `&` goes first so its own references survive.
+ */
+export function mdxText(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/\{/g, "&#123;")
+    .replace(/\}/g, "&#125;");
+}
+
 function payloadPath(kind: ItemKind, name: string): string {
   return join(payloadRoot, typeDir(kind), `${name}.json`);
 }
@@ -1050,7 +1063,6 @@ function detailOpening(
     `  compositionId="${manifest.name}"`,
     `  compositionSrc="${target}"`,
     `  title=${JSON.stringify(manifest.title)}`,
-    `  description=${JSON.stringify(manifest.description)}`,
     `  variables={${JSON.stringify(variables)}}`,
     `  meta={${JSON.stringify(meta)}}`,
     `  attribution={${JSON.stringify(detailAttribution(kind, manifest))}}`,
@@ -1077,8 +1089,10 @@ function generateItemMdx(
   const file = primarySource(kind, manifest);
 
   // `mode: frame` gives the page the full content width the stage and the Tune
-  // panel need side by side. Mintlify still renders `title` as the H1 and
-  // `description` as the standfirst, so neither is repeated in the body.
+  // panel need side by side. A frame page shows no title of its own, and Mintlify
+  // renders snippet components (CatalogDetail) in the browser only, so the H1, the
+  // standfirst and the Docs tab's text are written into the page here: that is the
+  // HTML search engines read. A `<header>` element is dropped by Mintlify; a div keeps it.
   const lines: string[] = [
     "---",
     `title: ${yamlString(manifest.title)}`,
@@ -1089,6 +1103,11 @@ function generateItemMdx(
     'import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";',
     'import { InstallCommand } from "/snippets/install-command.jsx";',
     "",
+    '<div className="hf-ve-static-head not-prose">',
+    `  <h1>${mdxText(manifest.title)}</h1>`,
+    `  <p>${mdxText(manifest.description)}</p>`,
+    "</div>",
+    "",
     ...detailOpening(kind, manifest, primaryTarget, live, Boolean(file)),
   ];
 
@@ -1116,7 +1135,10 @@ function generateItemMdx(
     "",
     "</CatalogSlot>",
     "",
-    '<CatalogSlot slot="docs">',
+    "</CatalogDetail>",
+    "",
+    // The Docs tab: shown while that tab is open (docs/custom.css), and in the server HTML always.
+    '<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">',
     "",
   );
 
@@ -1156,7 +1178,7 @@ function generateItemMdx(
   // Generated tail: provenance, then the required `## Related topics` so the
   // page ends with it per docs/AGENTS.md. The marker delimits what is generated.
   lines.push(FOOTER_MARKER, "", ...footerSection(manifest, tags, source), ...RELATED_TOPICS);
-  lines.push("</CatalogSlot>", "", "</CatalogDetail>", "");
+  lines.push("</div>", "");
 
   return lines.join("\n");
 }