feat(registry): mk / yt / hw theme families — 29 items

docs/catalog/blocks/camcorder-hud.mdx

@@ -0,0 +1,44 @@
+---
+title: "Camcorder HUD"
+description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
+---
+
+# Camcorder HUD
+
+Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments
+
+`camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-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/camcorder-hud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add camcorder-hud
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `camcorder-hud.html` | `compositions/camcorder-hud.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="camcorder-hud" data-composition-src="compositions/camcorder-hud.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/editorial-flash-overlay.mdx

@@ -0,0 +1,44 @@
+---
+title: "Editorial Flash Overlay"
+description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
+---
+
+# Editorial Flash Overlay
+
+Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal
+
+`flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-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/editorial-flash-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add editorial-flash-overlay
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `editorial-flash-overlay.html` | `compositions/editorial-flash-overlay.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="editorial-flash-overlay" data-composition-src="compositions/editorial-flash-overlay.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/freeze-frame-dressing.mdx

@@ -0,0 +1,44 @@
+---
+title: "Freeze-Frame Dressing"
+description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
+---
+
+# Freeze-Frame Dressing
+
+Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject
+
+`freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-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/freeze-frame-dressing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add freeze-frame-dressing
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `freeze-frame-dressing.html` | `compositions/freeze-frame-dressing.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="freeze-frame-dressing" data-composition-src="compositions/freeze-frame-dressing.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/hw-frame.mdx

@@ -0,0 +1,45 @@
+---
+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)"
+---
+
+# Sketched Frame
+
+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)
+
+`handwritten` `frame` `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/hw-frame.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-frame
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `hw-frame.html` | `compositions/hw-frame.html` | hyperframes:composition |
+| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="hw-frame" data-composition-src="compositions/hw-frame.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/hw-path-text.mdx

@@ -0,0 +1,45 @@
+---
+title: "Text Along a Path"
+description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
+---
+
+# Text Along a Path
+
+Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input
+
+`handwritten` `typography` `path` `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/hw-path-text.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-path-text
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `hw-path-text.html` | `compositions/hw-path-text.html` | hyperframes:composition |
+| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="hw-path-text" data-composition-src="compositions/hw-path-text.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/hw-pipeline.mdx

@@ -0,0 +1,45 @@
+---
+title: "Hand-Drawn Flowchart"
+description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
+---
+
+# Hand-Drawn Flowchart
+
+Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list
+
+`handwritten` `diagram` `data-viz` `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/hw-pipeline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-pipeline
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `hw-pipeline.html` | `compositions/hw-pipeline.html` | hyperframes:composition |
+| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="hw-pipeline" data-composition-src="compositions/hw-pipeline.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/hw-scribble-transition.mdx

@@ -0,0 +1,44 @@
+---
+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"
+---
+
+# Scribble Transition
+
+Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears
+
+`handwritten` `transition` `wipe`
+
+<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/hw-scribble-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-scribble-transition
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 2.2s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `hw-scribble-transition.html` | `compositions/hw-scribble-transition.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="hw-scribble-transition" data-composition-src="compositions/hw-scribble-transition.html" data-start="0" data-duration="2.2" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/hw-text-cloud.mdx

@@ -0,0 +1,45 @@
+---
+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"
+---
+
+# Speech Bubble
+
+Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils
+
+`handwritten` `speech-bubble` `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/hw-text-cloud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-text-cloud
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `hw-text-cloud.html` | `compositions/hw-text-cloud.html` | hyperframes:composition |
+| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="hw-text-cloud" data-composition-src="compositions/hw-text-cloud.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```