feat(registry): add five video primitives

docs/catalog/blocks/cosmic-orb.mdx

@@ -0,0 +1,57 @@
+---
+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."
+---
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cosmic-orb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cosmic-orb.png" autoPlay muted loop playsInline />
+
+## Install
+
+```bash Terminal
+npx hyperframes add cosmic-orb
+```
+
+That writes one file: `compositions/cosmic-orb.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="cosmic-orb"
+  data-composition-src="compositions/cosmic-orb.html"
+  data-start="0"
+  data-duration="10"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+Move it in time with `data-start`. Put it on a different timeline row with
+`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--hue` — Nebula hue. Defaults to `268`.
+- `--accent` — Accent hue. Defaults to `196`.
+- `--spin` — Spin rate (turns per second). Defaults to `0.035`.
+- `--stars` — Star density. Defaults to `1`.
+- `--glow` — Glow intensity. Defaults to `1`.
+- `--size` — Orb size (fraction of frame height). Defaults to `0.86`.
+- `--pulse` — Beat pulse (0-1, flat value when no envelope is set). Defaults to `0`.
+- `--pulseenvelope` — Beat pulse envelope: comma-separated 0-1 samples spread evenly across the clip. Defaults to ``.
+- `--backdrop` — Backdrop. Defaults to `#04040a`.
+
+{/* hf:generated-footer */}
+
+Tagged `webgl` `shader` `background` `showcase` `3d`.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)

docs/catalog/blocks/gallery-tunnel.mdx

@@ -0,0 +1,58 @@
+---
+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."
+---
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gallery-tunnel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gallery-tunnel.png" autoPlay muted loop playsInline />
+
+## Install
+
+```bash Terminal
+npx hyperframes add gallery-tunnel
+```
+
+That writes one file: `compositions/gallery-tunnel.html`.
+
+## Add it to your video
+
+It runs for 12 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="gallery-tunnel"
+  data-composition-src="compositions/gallery-tunnel.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+Move it in time with `data-start`. Put it on a different timeline row with
+`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--images` — Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png). Defaults to ``.
+- `--imagemix` — Image share of filled slots (0 = all colour, 1 = all images). Defaults to `0.5`.
+- `--speed` — Flight speed (segments per second). Defaults to `3`.
+- `--palette` — Slab palette: comma-separated hex colours. Defaults to `#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200`.
+- `--grid` — Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment). Defaults to `2`.
+- `--fill` — Slot fill rate. Defaults to `0.5`.
+- `--fog` — Fog distance in segments: depth at which the corridor reaches pure backdrop. Defaults to `14.25`.
+- `--edgecolor` — Edge line colour. Defaults to `#B0B0B0`.
+- `--edgeopacity` — Edge line opacity. Defaults to `0.5`.
+- `--backdrop` — Backdrop and fog colour. Defaults to `#000000`.
+
+{/* hf:generated-footer */}
+
+Tagged `webgl` `3d` `background` `showcase` `depth` `loop`.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)

docs/catalog/blocks/halftone-field.mdx

@@ -0,0 +1,59 @@
+---
+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."
+---
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/halftone-field.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/halftone-field.png" autoPlay muted loop playsInline />
+
+## Install
+
+```bash Terminal
+npx hyperframes add halftone-field
+```
+
+That writes one file: `compositions/halftone-field.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="halftone-field"
+  data-composition-src="compositions/halftone-field.html"
+  data-start="0"
+  data-duration="10"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+Move it in time with `data-start`. Put it on a different timeline row with
+`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--frequency` — Field frequency (1 = broad swells, 10 = fine mottle). Defaults to `2`.
+- `--speed` — Flow speed (0 freezes the field). Defaults to `5`.
+- `--cellsize` — Cell size (dot pitch, 1 = 6px, 100 = 60px). Defaults to `54`.
+- `--gamma` — Gamma: midtone crush, the whole look. Low values flatten it to an even grey dot field. Defaults to `12`.
+- `--palettebias` — Palette bias: floor under every dot's size and palette position. 0 lets the darks go fully black. Defaults to `2`.
+- `--palette1` — Palette stop 1 (lows). Defaults to `#00AAFF`.
+- `--palette2` — Palette stop 2. Defaults to `#C2FF67`.
+- `--palette3` — Palette stop 3. Defaults to `#6600FF`.
+- `--palette4` — Palette stop 4 (crests). Defaults to `#000000`.
+- `--background` — Background. Defaults to `#000000`.
+- `--quantize` — Quantise to 30fps for a stepped LED-wall look. Defaults to `false`. Options: `false`, `true`.
+
+{/* hf:generated-footer */}
+
+Tagged `webgl` `shader` `background` `texture` `halftone`.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)

docs/catalog/blocks/lt-neon-border.mdx

@@ -0,0 +1,57 @@
+---
+title: "Neon Border"
+description: "Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role."
+---
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-neon-border.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-neon-border.png" autoPlay muted loop playsInline />
+
+## Install
+
+```bash Terminal
+npx hyperframes add lt-neon-border
+```
+
+That writes one file: `compositions/lt-neon-border.html`.
+
+## Add it to your video
+
+It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="lt-neon-border"
+  data-composition-src="compositions/lt-neon-border.html"
+  data-start="0"
+  data-duration="4.8"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+Move it in time with `data-start`. Put it on a different timeline row with
+`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `undefined` — Name. Defaults to `Dr. Maya Chen`.
+- `undefined` — Role. Defaults to `Host · Neuroscientist`.
+- `undefined` — Accent. Defaults to `#cc9149`.
+- `undefined` — Movement. Defaults to `step`. Options: `step`, `glide`.
+- `undefined` — Speed. Defaults to `1.6`.
+- `undefined` — Corner radius. Defaults to `26`.
+- `undefined` — Thickness. Defaults to `5`.
+- `undefined` — Arc length. Defaults to `22`.
+- `undefined` — Glow. Defaults to `1`.
+
+{/* hf:generated-footer */}
+
+Tagged `lower-third` `glow` `loop` `video-primitive`.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)

docs/catalog/blocks/weight-wave.mdx

@@ -0,0 +1,43 @@
+---
+title: "Weight Wave"
+description: "A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms."
+---
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/weight-wave.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/weight-wave.png" autoPlay muted loop playsInline />
+
+## Install
+
+```bash Terminal
+npx hyperframes add weight-wave
+```
+
+That writes `compositions/weight-wave.html`, plus 2 supporting files under `compositions/assets/fonts/`.
+
+## Add it to your video
+
+It runs for 6 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="weight-wave"
+  data-composition-src="compositions/weight-wave.html"
+  data-start="0"
+  data-duration="6"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+Move it in time with `data-start`. Put it on a different timeline row with
+`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
+
+{/* hf:generated-footer */}
+
+Tagged `typography` `kinetic-type` `title` `variable-font` `text`.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)

docs/docs.json

@@ -328,6 +328,7 @@
               "catalog/blocks/lt-dark-card",
               "catalog/blocks/lt-kicker-name",
               "catalog/blocks/lt-mask-reveal",
+              "catalog/blocks/lt-neon-border",
               "catalog/blocks/lt-side-rule",
               "catalog/blocks/lt-soft-pill",
               "catalog/blocks/lt-stack-bars",
@@ -405,6 +406,8 @@
               "catalog/blocks/code-snippet-solarized-light",
               "catalog/blocks/code-snippet-visual-studio-dark",
               "catalog/blocks/code-snippet-visual-studio-light",
+              "catalog/blocks/cosmic-orb",
+              "catalog/blocks/gallery-tunnel",
               "catalog/blocks/north-korea-locked-down",
               "catalog/blocks/nyc-paris-flight",
               "catalog/blocks/ui-3d-reveal",
@@ -456,6 +459,7 @@
               "catalog/blocks/camcorder-hud",
               "catalog/blocks/flowchart",
               "catalog/blocks/flowchart-vertical",
+              "catalog/blocks/halftone-field",
               "catalog/blocks/hw-frame",
               "catalog/blocks/hw-path-text",
               "catalog/blocks/hw-pipeline",
@@ -466,6 +470,7 @@
               "catalog/blocks/mk-placeholder-grid",
               "catalog/blocks/mk-progress-stat",
               "catalog/blocks/mk-specs-list",
+              "catalog/blocks/weight-wave",
               "catalog/blocks/yt-lcd-background",
               "catalog/blocks/yt-logo-intro",
               "catalog/blocks/yt-prism-title",