docs(catalog): put each item page's title, description and Docs text in the server HTML

Mintlify renders snippet components in the browser only, so everything inside CatalogDetail (title, standfirst, the Docs tab) was missing from the HTML search engines read: 448 catalog pages served Googlebot no body text. The generator now writes the H1 and standfirst as page markup above the component and the Docs tab as page markup after it, shown with that tab (docs/custom.css). The component no longer draws its own title. Pages patched structurally only; registry drift on 14 pages is left for a regeneration of its own.
2026-10-30 09:16:55 +00:00 · 2026-10-28 23:42:59 -04:00
parent 4fa5f54519
commit e5bcae07ec
452 changed files with 4076 additions and 2262 deletions
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
@@ -7,12 +7,16 @@ mode: "frame"
 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>
--- a/Show More
+++ b/Show More