chore: import upstream snapshot with attribution

2026-07-13 12:58:35 +08:00
commit 85453da49f
4031 changed files with 710987 additions and 0 deletions
@@ -0,0 +1,38 @@
+---
+title: "Blend Difference"
+description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
+---
+
+# Blend Difference
+
+Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background
+
+`text` `effect` `blend-mode` `contrast` `inversion`
+
+<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/caption-blend-difference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-blend-difference
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-blend-difference.html` | `compositions/components/caption-blend-difference.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-blend-difference.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Clip Wipe"
+description: "Left-to-right clip-path wipe reveal per word"
+---
+
+# Clip Wipe
+
+Left-to-right clip-path wipe reveal per word
+
+`captions` `caption-style` `wipe` `clip-path` `reveal`
+
+<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/caption-clip-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-clip-wipe
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-clip-wipe.html` | `compositions/components/caption-clip-wipe.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-clip-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Editorial Emphasis"
+description: "Dual-font system with dramatic size contrast for emphasis words"
+---
+
+# Editorial Emphasis
+
+Dual-font system with dramatic size contrast for emphasis words
+
+`captions` `caption-style` `editorial` `typography` `emphasis`
+
+<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/caption-editorial-emphasis.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-editorial-emphasis
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-editorial-emphasis.html` | `compositions/components/caption-editorial-emphasis.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-editorial-emphasis.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Emoji Pop"
+description: "Emoji integration with stroked text and horizontal squeeze entrance"
+---
+
+# Emoji Pop
+
+Emoji integration with stroked text and horizontal squeeze entrance
+
+`captions` `caption-style` `emoji` `social`
+
+<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/caption-emoji-pop.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-emoji-pop
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-emoji-pop.html` | `compositions/components/caption-emoji-pop.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-emoji-pop.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Glitch RGB"
+description: "RGB chromatic aberration with CRT scanline overlay"
+---
+
+# Glitch RGB
+
+RGB chromatic aberration with CRT scanline overlay
+
+`captions` `caption-style` `glitch` `cyber` `tech`
+
+<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/caption-glitch-rgb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-glitch-rgb
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-glitch-rgb.html` | `compositions/components/caption-glitch-rgb.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-glitch-rgb.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Gradient Fill"
+description: "Gradient-clipped text with elastic bounce entrance"
+---
+
+# Gradient Fill
+
+Gradient-clipped text with elastic bounce entrance
+
+`captions` `caption-style` `gradient` `colorful`
+
+<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/caption-gradient-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-gradient-fill
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-gradient-fill.html` | `compositions/components/caption-gradient-fill.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-gradient-fill.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Highlight"
+description: "Red background sweep behind each active word, TikTok-style"
+---
+
+# Highlight
+
+Red background sweep behind each active word, TikTok-style
+
+`captions` `caption-style` `highlight` `social` `tiktok`
+
+<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/caption-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-highlight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-highlight.html` | `compositions/components/caption-highlight.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Kinetic Slam"
+description: "Full-screen single-word display with alternating entrance directions"
+---
+
+# Kinetic Slam
+
+Full-screen single-word display with alternating entrance directions
+
+`captions` `caption-style` `kinetic` `typography` `slam`
+
+<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/caption-kinetic-slam.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-kinetic-slam
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-kinetic-slam.html` | `compositions/components/caption-kinetic-slam.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-kinetic-slam.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Matrix Decode"
+description: "Character scramble animation before text reveal"
+---
+
+# Matrix Decode
+
+Character scramble animation before text reveal
+
+`captions` `caption-style` `matrix` `scramble` `decode`
+
+<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/caption-matrix-decode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-matrix-decode
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-matrix-decode.html` | `compositions/components/caption-matrix-decode.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-matrix-decode.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Neon Accent"
+description: "Multi-color neon glow accents with wiggle drift animation"
+---
+
+# Neon Accent
+
+Multi-color neon glow accents with wiggle drift animation
+
+`captions` `caption-style` `neon` `glow` `accent`
+
+<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/caption-neon-accent.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-neon-accent
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-neon-accent.html` | `compositions/components/caption-neon-accent.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-neon-accent.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Neon Glow"
+description: "Cyan and magenta neon glow with keyword accent colors"
+---
+
+# Neon Glow
+
+Cyan and magenta neon glow with keyword accent colors
+
+`captions` `caption-style` `neon` `glow` `gaming`
+
+<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/caption-neon-glow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-neon-glow
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-neon-glow.html` | `compositions/components/caption-neon-glow.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-neon-glow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Parallax Layers"
+description: "Behind-subject 3D text layering with vertical stretch effect"
+---
+
+# Parallax Layers
+
+Behind-subject 3D text layering with vertical stretch effect
+
+`captions` `caption-style` `parallax` `3d` `depth`
+
+<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/caption-parallax-layers.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-parallax-layers
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-parallax-layers.html` | `compositions/components/caption-parallax-layers.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Particle Burst"
+description: "Keyword words trigger colored particle explosions"
+---
+
+# Particle Burst
+
+Keyword words trigger colored particle explosions
+
+`captions` `caption-style` `particles` `burst` `effects`
+
+<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/caption-particle-burst.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-particle-burst
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-particle-burst.html` | `compositions/components/caption-particle-burst.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-particle-burst.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Pill Karaoke"
+description: "Pill-shaped container with per-word karaoke color highlight"
+---
+
+# Pill Karaoke
+
+Pill-shaped container with per-word karaoke color highlight
+
+`captions` `caption-style` `karaoke` `pill`
+
+<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/caption-pill-karaoke.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-pill-karaoke
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-pill-karaoke.html` | `compositions/components/caption-pill-karaoke.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-pill-karaoke.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,44 @@
+---
+title: "Texture"
+description: "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable"
+---
+
+# Texture
+
+Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable
+
+`captions` `caption-style` `texture` `mask`
+
+<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/caption-texture.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-texture
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-texture.html` | `compositions/components/caption-texture.html` | hyperframes:snippet |
+| `lava.png` | `compositions/components/lava.png` | hyperframes:asset |
+| `marble-012.png` | `compositions/components/marble-012.png` | hyperframes:asset |
+| `metal-046-b.png` | `compositions/components/metal-046-b.png` | hyperframes:asset |
+| `wood-066.png` | `compositions/components/wood-066.png` | hyperframes:asset |
+| `concrete-042-a.png` | `compositions/components/concrete-042-a.png` | hyperframes:asset |
+| `rock-058.png` | `compositions/components/rock-058.png` | hyperframes:asset |
+
+## Usage
+
+Open `compositions/components/caption-texture.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Weight Shift"
+description: "Elegant font-weight transition between caption lines"
+---
+
+# Weight Shift
+
+Elegant font-weight transition between caption lines
+
+`captions` `caption-style` `minimal` `typography`
+
+<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/caption-weight-shift.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-weight-shift
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-weight-shift.html` | `compositions/components/caption-weight-shift.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-weight-shift.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Grain Overlay"
+description: "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition"
+---
+
+# Grain Overlay
+
+Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition
+
+`texture` `grain` `overlay` `film`
+
+<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/grain-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add grain-overlay
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `grain-overlay.html` | `compositions/components/grain-overlay.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/grain-overlay.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Grid Pixelate Wipe"
+description: "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes"
+---
+
+# Grid Pixelate Wipe
+
+Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes
+
+`transition` `wipe` `grid` `pixelate`
+
+<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/grid-pixelate-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add grid-pixelate-wipe
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `grid-pixelate-wipe.html` | `compositions/components/grid-pixelate-wipe.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/grid-pixelate-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,40 @@
+---
+title: "Morph Text"
+description: "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect"
+---
+
+# Morph Text
+
+Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect
+
+`text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`
+
+<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/morph-text.mp4" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add morph-text
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `morph-text.html` | `compositions/components/morph-text.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/morph-text.html` and paste its contents into your composition.
+
+Edit the `<ol id="morph-words">` list to change the statements that cycle through. Each `<li>` accepts `data-font` (CSS font-family) and `data-color` (hex) attributes. Adjust `data-morph-speed` (seconds per transition) and `data-morph-pause` (hold time) on the root element.
@@ -0,0 +1,70 @@
+---
+title: "Motion Blur"
+description: "Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed"
+---
+
+# Motion Blur
+
+Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed.
+
+`effect` `motion-blur` `velocity` `animation` `physics`
+
+<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/motion-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add motion-blur
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `motion-blur.html` | `compositions/components/motion-blur.html` | hyperframes:snippet |
+
+## Usage
+
+Paste the snippet into your composition, then call `attachMotionBlur()` after your GSAP tweens and before registering `window.__timelines`.
+
+```html
+<!-- Extend the timeline to data-duration before calling attachMotionBlur -->
+tl.set(document.body, {}, DATA_DURATION);
+
+attachMotionBlur("#my-box", tl, {
+  axis: "x",      // "x" | "y" | "both"
+  blurMax: 40,    // max blur radius in px (default 20)
+});
+
+window.__timelines = window.__timelines || {};
+window.__timelines["my-composition"] = tl;
+```
+
+## How it works
+
+Each target element gets its own SVG filter. On every timeline seek, `attachMotionBlur` samples the element's GSAP `x`/`y` position, computes velocity, and drives three SVG filter primitives:
+
+1. **Ghost copies** — three faded, blurred copies of the element placed behind it at increasing offsets proportional to speed. Inherently one-sided: no forward blur.
+2. **Top blur** — a small symmetric Gaussian at the current position so the element looks in-motion rather than crisp on top of the trail.
+
+Blur scales linearly with velocity up to `blurMax`. Both the ghost trail and top blur clear automatically when the element decelerates to rest.
+
+## Options
+
+| Option | Default | Description |
+| --- | --- | --- |
+| `axis` | `"both"` | Motion axis — `"x"`, `"y"`, or `"both"` |
+| `blurScale` | `0.008` | Blur per px/s of velocity |
+| `blurMax` | `20` | Max blur radius on the motion axis (px) |
+| `stretchScale` | `0.0002` | scaleX/Y added per px/s (requires `stretchMax > 0`) |
+| `stretchMax` | `0` | Max stretch above 1.0 — disabled by default |
@@ -0,0 +1,38 @@
+---
+title: "Parallax Unzoom"
+description: "Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)"
+---
+
+# Parallax Unzoom
+
+Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)
+
+`transition` `reveal` `unzoom` `parallax` `grid` `hero`
+
+<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/parallax-unzoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add parallax-unzoom
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `parallax-unzoom.html` | `compositions/components/parallax-unzoom.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/parallax-unzoom.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Parallax Zoom"
+description: "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition"
+---
+
+# Parallax Zoom
+
+Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition
+
+`transition` `zoom` `parallax` `grid` `hero`
+
+<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/parallax-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add parallax-zoom
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `parallax-zoom.html` | `compositions/components/parallax-zoom.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/parallax-zoom.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,38 @@
+---
+title: "Shimmer Sweep"
+description: "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals"
+---
+
+# Shimmer Sweep
+
+Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals
+
+`text` `shimmer` `highlight` `effect`
+
+<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/shimmer-sweep.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add shimmer-sweep
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `shimmer-sweep.html` | `compositions/components/shimmer-sweep.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/shimmer-sweep.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
@@ -0,0 +1,487 @@
+---
+title: "Texture Mask Text"
+---
+
+`text` `texture` `mask` `effect`
+
+<div className="hf-texture-preview-panel">
+  <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/brick.png')" }}>
+    <div className="hf-texture-preview-label">Brick</div>
+    <div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">BRICK</div></div>
+  </div>
+  <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/rock.png')" }}>
+    <div className="hf-texture-preview-label">Rock</div>
+    <div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">ROCK</div></div>
+  </div>
+  <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-103.png')" }}>
+    <div className="hf-texture-preview-label">Ground 103</div>
+    <div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">GROUND</div></div>
+  </div>
+  <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood.png')" }}>
+    <div className="hf-texture-preview-label">Wood</div>
+    <div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">WOOD</div></div>
+  </div>
+  <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal.png')" }}>
+    <div className="hf-texture-preview-label">Metal</div>
+    <div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">METAL</div></div>
+  </div>
+  <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/lava.png')" }}>
+    <div className="hf-texture-preview-label">Lava</div>
+    <div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">LAVA</div></div>
+  </div>
+</div>
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add texture-mask-text
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Agent Usage
+
+Use this wording when asking an agent to apply a texture:
+
+```text
+Use the Texture Mask Text catalog component.
+
+1. From the project root, run:
+   npx hyperframes add texture-mask-text
+2. That command creates this installed snippet:
+   compositions/components/texture-mask-text/texture-mask-text.html
+3. Open that file and paste the real <style> block
+   near the bottom into the composition once. That CSS defines
+   hf-texture-text and every hf-texture-* class.
+4. Apply this class to the target text:
+   class="hf-texture-text hf-texture-brick"
+5. For another material, copy one hf-texture-* class
+   from the Texture Examples cards.
+6. This is the proper way to apply drop shadow
+   to textured text: wrap the text and put
+   filter on the wrapper, not on the text.
+   Use this markup:
+   <div style="filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.48))">
+     <div class="hf-texture-text hf-texture-brick">TEXT</div>
+   </div>
+```
+
+After install, the snippet lives at `compositions/components/texture-mask-text/texture-mask-text.html` inside the project where you ran `npx hyperframes add texture-mask-text`. The part to paste is the real `<style>` element near the bottom of that file; the texture PNGs install to `assets/texture-mask-text/masks/` and are referenced by project-root URLs in that CSS.
+
+Swap `hf-texture-brick` for the class shown on any texture card below. The base class `hf-texture-text` is always required.
+
+## Animated Texture
+
+Animate the texture by moving the mask position on the text element. Keep drop shadow on a wrapper so the shadow follows the textured contour.
+
+<div className="hf-texture-animate-demo" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/lava.png')" }}>
+  <div className="hf-texture-animate-meta">
+    <div className="hf-texture-animate-label">Animated mask position</div>
+    <code className="hf-texture-animate-class">hf-texture-text hf-texture-lava</code>
+  </div>
+  <div className="hf-texture-animate-shadow">
+    <div className="hf-texture-animate-word">MOTION</div>
+  </div>
+</div>
+
+```html
+<div class="texture-shadow">
+  <div class="hf-texture-text hf-texture-lava animated-texture">MOTION</div>
+</div>
+```
+
+```css
+.animated-texture {
+  --mask-size: 180% 180%;
+  --mask-position: 0% 50%;
+}
+```
+
+```js
+const tl = gsap.timeline({ paused: true });
+tl.to(".animated-texture", {
+  "--mask-position": "100% 50%",
+  duration: 1.2,
+  ease: "sine.inOut",
+  yoyo: true,
+  repeat: 1,
+}, 0);
+window.__timelines["my-composition"] = tl;
+```
+
+## Texture Examples
+
+<div className="hf-texture-example-groups">
+  <div>
+    <h3 className="hf-texture-example-title">Masonry</h3>
+    <div className="hf-texture-example-grid">
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/brick.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Brick</div><code className="hf-texture-example-class">hf-texture-brick</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-brick</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bricks-104.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bricks 104</div><code className="hf-texture-example-class">hf-texture-bricks-104</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bricks-104</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bricks-102.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bricks 102</div><code className="hf-texture-example-class">hf-texture-bricks-102</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bricks-102</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bricks-101.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bricks 101</div><code className="hf-texture-example-class">hf-texture-bricks-101</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bricks-101</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bricks-075-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bricks 075 A</div><code className="hf-texture-example-class">hf-texture-bricks-075-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bricks-075-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete</div><code className="hf-texture-example-class">hf-texture-concrete</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete-034.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete 034</div><code className="hf-texture-example-class">hf-texture-concrete-034</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete-034</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete-047-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete 047 A</div><code className="hf-texture-example-class">hf-texture-concrete-047-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete-047-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete-046.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete 046</div><code className="hf-texture-example-class">hf-texture-concrete-046</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete-046</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete-042-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete 042 A</div><code className="hf-texture-example-class">hf-texture-concrete-042-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete-042-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/plaster-001.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Plaster 001</div><code className="hf-texture-example-class">hf-texture-plaster-001</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">PLASTER</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-plaster-001</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/painted-plaster-017.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Painted Plaster 017</div><code className="hf-texture-example-class">hf-texture-painted-plaster-017</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">PLASTER</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-painted-plaster-017</code></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 className="hf-texture-example-title">Stone</h3>
+    <div className="hf-texture-example-grid">
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/rock.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Rock</div><code className="hf-texture-example-class">hf-texture-rock</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROCK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-rock</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/rock-063.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Rock 063</div><code className="hf-texture-example-class">hf-texture-rock-063</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROCK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-rock-063</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/rock-058.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Rock 058</div><code className="hf-texture-example-class">hf-texture-rock-058</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROCK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-rock-058</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/onyx.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Onyx</div><code className="hf-texture-example-class">hf-texture-onyx</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ONYX</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-onyx</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/marble-012.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Marble 012</div><code className="hf-texture-example-class">hf-texture-marble-012</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">MARBLE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-marble-012</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/marble-016.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Marble 016</div><code className="hf-texture-example-class">hf-texture-marble-016</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">MARBLE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-marble-016</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/travertine-009.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Travertine 009</div><code className="hf-texture-example-class">hf-texture-travertine-009</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">STONE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-travertine-009</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/paving-stones-150.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Paving Stones 150</div><code className="hf-texture-example-class">hf-texture-paving-stones-150</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">STONE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-paving-stones-150</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/paving-stones-138.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Paving Stones 138</div><code className="hf-texture-example-class">hf-texture-paving-stones-138</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">STONE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-paving-stones-138</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/tiles-138.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Tiles 138</div><code className="hf-texture-example-class">hf-texture-tiles-138</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">TILE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-tiles-138</code></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 className="hf-texture-example-title">Ground / Road</h3>
+    <div className="hf-texture-example-grid">
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-103.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 103</div><code className="hf-texture-example-class">hf-texture-ground-103</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-103</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-037.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 037</div><code className="hf-texture-example-class">hf-texture-ground-037</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-037</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-054.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 054</div><code className="hf-texture-example-class">hf-texture-ground-054</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-054</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-104.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 104</div><code className="hf-texture-example-class">hf-texture-ground-104</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-104</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-068.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 068</div><code className="hf-texture-example-class">hf-texture-ground-068</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-068</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-080.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 080</div><code className="hf-texture-example-class">hf-texture-ground-080</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-080</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-012-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 012 A</div><code className="hf-texture-example-class">hf-texture-road-012-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-012-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-008-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 008 A</div><code className="hf-texture-example-class">hf-texture-road-008-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-008-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-007.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 007</div><code className="hf-texture-example-class">hf-texture-road-007</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-007</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-013-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 013 A</div><code className="hf-texture-example-class">hf-texture-road-013-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-013-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-012-b.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 012 B</div><code className="hf-texture-example-class">hf-texture-road-012-b</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-012-b</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-009-c.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 009 C</div><code className="hf-texture-example-class">hf-texture-road-009-c</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-009-c</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/asphalt-031.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Asphalt 031</div><code className="hf-texture-example-class">hf-texture-asphalt-031</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ASPHALT</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-asphalt-031</code></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 className="hf-texture-example-title">Wood</h3>
+    <div className="hf-texture-example-grid">
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood</div><code className="hf-texture-example-class">hf-texture-wood</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-094.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 094</div><code className="hf-texture-example-class">hf-texture-wood-094</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-094</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-092.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 092</div><code className="hf-texture-example-class">hf-texture-wood-092</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-092</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-051.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 051</div><code className="hf-texture-example-class">hf-texture-wood-051</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-051</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-066.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 066</div><code className="hf-texture-example-class">hf-texture-wood-066</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-066</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-049.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 049</div><code className="hf-texture-example-class">hf-texture-wood-049</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-049</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-058.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 058</div><code className="hf-texture-example-class">hf-texture-wood-058</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-058</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-floor-051.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood Floor 051</div><code className="hf-texture-example-class">hf-texture-wood-floor-051</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FLOOR</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-floor-051</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-floor-064.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood Floor 064</div><code className="hf-texture-example-class">hf-texture-wood-floor-064</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FLOOR</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-floor-064</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-floor-070.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood Floor 070</div><code className="hf-texture-example-class">hf-texture-wood-floor-070</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FLOOR</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-floor-070</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bark-014.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bark 014</div><code className="hf-texture-example-class">hf-texture-bark-014</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BARK</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bark-014</code></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 className="hf-texture-example-title">Metal</h3>
+    <div className="hf-texture-example-grid">
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal</div><code className="hf-texture-example-class">hf-texture-metal</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-049-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 049 A</div><code className="hf-texture-example-class">hf-texture-metal-049-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-049-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-055-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 055 A</div><code className="hf-texture-example-class">hf-texture-metal-055-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-055-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-046-b.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 046 B</div><code className="hf-texture-example-class">hf-texture-metal-046-b</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-046-b</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-061-b.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 061 B</div><code className="hf-texture-example-class">hf-texture-metal-061-b</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-061-b</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-048-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 048 A</div><code className="hf-texture-example-class">hf-texture-metal-048-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-048-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-032.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 032</div><code className="hf-texture-example-class">hf-texture-metal-032</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-032</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-041-a.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 041 A</div><code className="hf-texture-example-class">hf-texture-metal-041-a</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-041-a</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-038.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 038</div><code className="hf-texture-example-class">hf-texture-metal-038</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-038</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/diamond-plate-009.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Diamond Plate 009</div><code className="hf-texture-example-class">hf-texture-diamond-plate-009</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">PLATE</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-diamond-plate-009</code></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h3 className="hf-texture-example-title">Organic / Soft</h3>
+    <div className="hf-texture-example-grid">
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/lava.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Lava</div><code className="hf-texture-example-class">hf-texture-lava</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">LAVA</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-lava</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/grass-005.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Grass 005</div><code className="hf-texture-example-class">hf-texture-grass-005</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GRASS</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-grass-005</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/grass-001.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Grass 001</div><code className="hf-texture-example-class">hf-texture-grass-001</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GRASS</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-grass-001</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/grass-004.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Grass 004</div><code className="hf-texture-example-class">hf-texture-grass-004</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GRASS</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-grass-004</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/carpet.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Carpet</div><code className="hf-texture-example-class">hf-texture-carpet</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOVEN</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-carpet</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/fabric-083.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Fabric 083</div><code className="hf-texture-example-class">hf-texture-fabric-083</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FABRIC</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-fabric-083</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/snow.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Snow</div><code className="hf-texture-example-class">hf-texture-snow</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">SNOW</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-snow</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/snow-015.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Snow 015</div><code className="hf-texture-example-class">hf-texture-snow-015</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">SNOW</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-snow-015</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/leather-037.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Leather 037</div><code className="hf-texture-example-class">hf-texture-leather-037</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">LEATHER</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-leather-037</code></div>
+      </div>
+      <div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/fabric-080.png')" }}>
+        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Fabric 080</div><code className="hf-texture-example-class">hf-texture-fabric-080</code></div>
+        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FABRIC</div></div>
+        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-fabric-080</code></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+## Usage
+
+After `npx hyperframes add texture-mask-text`, the installed snippet lives at `compositions/components/texture-mask-text/texture-mask-text.html` inside your current HyperFrames project. Open that file and paste the real `<style>` element near the bottom into your composition once; it defines `hf-texture-text` and every `hf-texture-*` class used by the examples above. Keep the installed texture PNGs in `assets/texture-mask-text/masks/`; the CSS references them with project-root URLs.
@@ -0,0 +1,38 @@
+---
+title: "Vignette"
+description: "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center"
+---
+
+# Vignette
+
+Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center
+
+`vignette` `overlay` `cinematic` `effect`
+
+<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/vignette.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vignette
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vignette.html` | `compositions/components/vignette.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/vignette.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.