feat(registry): yt-* family — 11 retro-broadcast creator items (6 blocks, 5 components)

docs/catalog/blocks/yt-comment-card.mdx

@@ -0,0 +1,44 @@
+---
+title: "Comment Cards"
+description: "Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips"
+---
+
+# Comment Cards
+
+Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips
+
+`social` `comments` `creator` `overlay`
+
+<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/yt-comment-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-comment-card
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-comment-card.html` | `compositions/yt-comment-card.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="yt-comment-card" data-composition-src="compositions/yt-comment-card.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/yt-doc-lower-third.mdx

@@ -0,0 +1,44 @@
+---
+title: "Documentary Lower Third"
+description: "Name and role lower third: accent bar draws down, text slides in, hairline rule grows; overlay and light schemes"
+---
+
+# Documentary Lower Third
+
+Name and role lower third: accent bar draws down, text slides in, hairline rule grows; overlay and light schemes
+
+`lower-third` `title` `creator`
+
+<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/yt-doc-lower-third.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-doc-lower-third.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-doc-lower-third
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-doc-lower-third.html` | `compositions/yt-doc-lower-third.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="yt-doc-lower-third" data-composition-src="compositions/yt-doc-lower-third.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/yt-lcd-background.mdx

@@ -0,0 +1,44 @@
+---
+title: "Scanline Board Background"
+description: "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title"
+---
+
+# Scanline Board Background
+
+Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title
+
+`background` `texture` `creator`
+
+<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/yt-lcd-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-lcd-background
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 10s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-lcd-background.html` | `compositions/yt-lcd-background.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="yt-lcd-background" data-composition-src="compositions/yt-lcd-background.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/yt-logo-intro.mdx

@@ -0,0 +1,44 @@
+---
+title: "Logo Intro Sequence"
+description: "Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion"
+---
+
+# Logo Intro Sequence
+
+Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion
+
+`logo` `intro` `creator`
+
+<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/yt-logo-intro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-logo-intro
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-logo-intro.html` | `compositions/yt-logo-intro.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="yt-logo-intro" data-composition-src="compositions/yt-logo-intro.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/yt-prism-title.mdx

@@ -0,0 +1,44 @@
+---
+title: "Chromatic Fringe Title"
+description: "Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift"
+---
+
+# Chromatic Fringe Title
+
+Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift
+
+`typography` `title-card` `creator`
+
+<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/yt-prism-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-prism-title
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-prism-title.html` | `compositions/yt-prism-title.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="yt-prism-title" data-composition-src="compositions/yt-prism-title.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/yt-vertical-fill.mdx

@@ -0,0 +1,44 @@
+---
+title: "Vertical Media Filler"
+description: "Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)"
+---
+
+# Vertical Media Filler
+
+Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)
+
+`placeholder` `vertical` `media`
+
+<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/yt-vertical-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-vertical-fill
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-vertical-fill.html` | `compositions/yt-vertical-fill.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="yt-vertical-fill" data-composition-src="compositions/yt-vertical-fill.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/components/yt-avatar-pip.mdx

@@ -0,0 +1,38 @@
+---
+title: "Circle PiP Window"
+description: "Circular or rounded-rect masked picture-in-picture window with ring and shadow for a second video or image; pop in/out helpers"
+---
+
+# Circle PiP Window
+
+Circular or rounded-rect masked picture-in-picture window with ring and shadow for a second video or image; pop in/out helpers
+
+`pip` `overlay` `creator`
+
+<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/components/yt-avatar-pip.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-avatar-pip.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-avatar-pip
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-avatar-pip.html` | `compositions/components/yt-avatar-pip.html` | hyperframes:snippet |
+
+## Usage
+
+Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.

docs/catalog/components/yt-camera-move.mdx

@@ -0,0 +1,38 @@
+---
+title: "Camera Punch-In"
+description: "Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay"
+---
+
+# Camera Punch-In
+
+Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay
+
+`camera` `zoom` `effect` `creator`
+
+<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/components/yt-camera-move.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-camera-move
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-camera-move.html` | `compositions/components/yt-camera-move.html` | hyperframes:snippet |
+
+## Usage
+
+Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.

docs/catalog/components/yt-circle-pointer.mdx

@@ -0,0 +1,38 @@
+---
+title: "Pointer Circle + Countdown"
+description: "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick"
+---
+
+# Pointer Circle + Countdown
+
+Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick
+
+`annotation` `countdown` `overlay`
+
+<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/components/yt-circle-pointer.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-circle-pointer
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-circle-pointer.html` | `compositions/components/yt-circle-pointer.html` | hyperframes:snippet |
+
+## Usage
+
+Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.