diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
new file mode 100644
index 000000000..3257f64b6
--- /dev/null
+++ b/docs/catalog/components/motion-blur.mdx
@@ -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 |
diff --git a/docs/docs.json b/docs/docs.json
index 3982833c1..6f6b382c3 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -226,6 +226,7 @@
             "pages": [
               "catalog/components/grain-overlay",
               "catalog/components/grid-pixelate-wipe",
+              "catalog/components/motion-blur",
               "catalog/components/parallax-unzoom",
               "catalog/components/parallax-zoom",
               "catalog/components/shimmer-sweep",
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index a9bee9589..9262a03b4 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -1,1153 +1,1168 @@
 [
-  {
-    "name": "app-showcase",
-    "type": "block",
-    "title": "App Showcase",
-    "description": "Fitness app product showcase with three floating smartphone screens",
-    "tags": [
-      "showcase",
-      "app",
-      "3d"
-    ],
-    "href": "/catalog/blocks/app-showcase",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
-  },
-  {
-    "name": "apple-money-count",
-    "type": "block",
-    "title": "Apple Money Count",
-    "description": "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.",
-    "tags": [
-      "showcase",
-      "finance",
-      "kinetic",
-      "youtube",
-      "sfx"
-    ],
-    "href": "/catalog/blocks/apple-money-count",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
-  },
-  {
-    "name": "blue-sweater-intro-video",
-    "type": "block",
-    "title": "Blue Sweater Intro Video",
-    "description": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
-    "tags": [
-      "showcase",
-      "ai",
-      "creator",
-      "sfx"
-    ],
-    "href": "/catalog/blocks/blue-sweater-intro-video",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
-  },
-  {
-    "name": "caption-blend-difference",
-    "type": "component",
-    "title": "Blend Difference",
-    "description": "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background",
-    "tags": [
-      "text",
-      "effect",
-      "blend-mode",
-      "contrast",
-      "inversion"
-    ],
-    "href": "/catalog/components/caption-blend-difference",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png"
-  },
-  {
-    "name": "caption-clip-wipe",
-    "type": "component",
-    "title": "Clip Wipe",
-    "description": "Left-to-right clip-path wipe reveal per word",
-    "tags": [
-      "captions",
-      "caption-style",
-      "wipe",
-      "clip-path",
-      "reveal"
-    ],
-    "href": "/catalog/components/caption-clip-wipe",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png"
-  },
-  {
-    "name": "caption-editorial-emphasis",
-    "type": "component",
-    "title": "Editorial Emphasis",
-    "description": "Dual-font system with dramatic size contrast for emphasis words",
-    "tags": [
-      "captions",
-      "caption-style",
-      "editorial",
-      "typography",
-      "emphasis"
-    ],
-    "href": "/catalog/components/caption-editorial-emphasis",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png"
-  },
-  {
-    "name": "caption-emoji-pop",
-    "type": "component",
-    "title": "Emoji Pop",
-    "description": "Emoji integration with stroked text and horizontal squeeze entrance",
-    "tags": [
-      "captions",
-      "caption-style",
-      "emoji",
-      "social"
-    ],
-    "href": "/catalog/components/caption-emoji-pop",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png"
-  },
-  {
-    "name": "caption-glitch-rgb",
-    "type": "component",
-    "title": "Glitch RGB",
-    "description": "RGB chromatic aberration with CRT scanline overlay",
-    "tags": [
-      "captions",
-      "caption-style",
-      "glitch",
-      "cyber",
-      "tech"
-    ],
-    "href": "/catalog/components/caption-glitch-rgb",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png"
-  },
-  {
-    "name": "caption-gradient-fill",
-    "type": "component",
-    "title": "Gradient Fill",
-    "description": "Gradient-clipped text with elastic bounce entrance",
-    "tags": [
-      "captions",
-      "caption-style",
-      "gradient",
-      "colorful"
-    ],
-    "href": "/catalog/components/caption-gradient-fill",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
-  },
-  {
-    "name": "caption-highlight",
-    "type": "component",
-    "title": "Highlight",
-    "description": "Red background sweep behind each active word, TikTok-style",
-    "tags": [
-      "captions",
-      "caption-style",
-      "highlight",
-      "social",
-      "tiktok"
-    ],
-    "href": "/catalog/components/caption-highlight",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png"
-  },
-  {
-    "name": "caption-kinetic-slam",
-    "type": "component",
-    "title": "Kinetic Slam",
-    "description": "Full-screen single-word display with alternating entrance directions",
-    "tags": [
-      "captions",
-      "caption-style",
-      "kinetic",
-      "typography",
-      "slam"
-    ],
-    "href": "/catalog/components/caption-kinetic-slam",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png"
-  },
-  {
-    "name": "caption-matrix-decode",
-    "type": "component",
-    "title": "Matrix Decode",
-    "description": "Character scramble animation before text reveal",
-    "tags": [
-      "captions",
-      "caption-style",
-      "matrix",
-      "scramble",
-      "decode"
-    ],
-    "href": "/catalog/components/caption-matrix-decode",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png"
-  },
-  {
-    "name": "caption-neon-accent",
-    "type": "component",
-    "title": "Neon Accent",
-    "description": "Multi-color neon glow accents with wiggle drift animation",
-    "tags": [
-      "captions",
-      "caption-style",
-      "neon",
-      "glow",
-      "accent"
-    ],
-    "href": "/catalog/components/caption-neon-accent",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png"
-  },
-  {
-    "name": "caption-neon-glow",
-    "type": "component",
-    "title": "Neon Glow",
-    "description": "Cyan and magenta neon glow with keyword accent colors",
-    "tags": [
-      "captions",
-      "caption-style",
-      "neon",
-      "glow",
-      "gaming"
-    ],
-    "href": "/catalog/components/caption-neon-glow",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png"
-  },
-  {
-    "name": "caption-parallax-layers",
-    "type": "component",
-    "title": "Parallax Layers",
-    "description": "Behind-subject 3D text layering with vertical stretch effect",
-    "tags": [
-      "captions",
-      "caption-style",
-      "parallax",
-      "3d",
-      "depth"
-    ],
-    "href": "/catalog/components/caption-parallax-layers",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png"
-  },
-  {
-    "name": "caption-particle-burst",
-    "type": "component",
-    "title": "Particle Burst",
-    "description": "Keyword words trigger colored particle explosions",
-    "tags": [
-      "captions",
-      "caption-style",
-      "particles",
-      "burst",
-      "effects"
-    ],
-    "href": "/catalog/components/caption-particle-burst",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png"
-  },
-  {
-    "name": "caption-pill-karaoke",
-    "type": "component",
-    "title": "Pill Karaoke",
-    "description": "Pill-shaped container with per-word karaoke color highlight",
-    "tags": [
-      "captions",
-      "caption-style",
-      "karaoke",
-      "pill"
-    ],
-    "href": "/catalog/components/caption-pill-karaoke",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
-  },
-  {
-    "name": "caption-texture",
-    "type": "component",
-    "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",
-    "tags": [
-      "captions",
-      "caption-style",
-      "texture",
-      "mask"
-    ],
-    "href": "/catalog/components/caption-texture",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png"
-  },
-  {
-    "name": "caption-weight-shift",
-    "type": "component",
-    "title": "Weight Shift",
-    "description": "Elegant font-weight transition between caption lines",
-    "tags": [
-      "captions",
-      "caption-style",
-      "minimal",
-      "typography"
-    ],
-    "href": "/catalog/components/caption-weight-shift",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png"
-  },
-  {
-    "name": "chromatic-radial-split",
-    "type": "block",
-    "title": "Chromatic Radial Split",
-    "description": "Shader transition with chromatic aberration radial split",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/chromatic-radial-split",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
-  },
-  {
-    "name": "cinematic-zoom",
-    "type": "block",
-    "title": "Cinematic Zoom",
-    "description": "Shader transition with dramatic zoom blur",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/cinematic-zoom",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
-  },
-  {
-    "name": "cross-warp-morph",
-    "type": "block",
-    "title": "Cross Warp Morph",
-    "description": "Shader transition with cross-warped morphing",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/cross-warp-morph",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
-  },
-  {
-    "name": "data-chart",
-    "type": "block",
-    "title": "Data Chart",
-    "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
-    "tags": [
-      "data",
-      "chart",
-      "statistics"
-    ],
-    "href": "/catalog/blocks/data-chart",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
-  },
-  {
-    "name": "domain-warp-dissolve",
-    "type": "block",
-    "title": "Domain Warp Dissolve",
-    "description": "Shader transition with fractal noise domain warping",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/domain-warp-dissolve",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
-  },
-  {
-    "name": "flash-through-white",
-    "type": "block",
-    "title": "Flash Through White",
-    "description": "Shader transition with white flash crossfade",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/flash-through-white",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
-  },
-  {
-    "name": "flowchart",
-    "type": "block",
-    "title": "Flowchart",
-    "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
-    "tags": [
-      "diagram",
-      "flowchart",
-      "interactive"
-    ],
-    "href": "/catalog/blocks/flowchart",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
-  },
-  {
-    "name": "glitch",
-    "type": "block",
-    "title": "Glitch",
-    "description": "Shader transition with digital glitch artifacts",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/glitch",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
-  },
-  {
-    "name": "grain-overlay",
-    "type": "component",
-    "title": "Grain Overlay",
-    "description": "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition",
-    "tags": [
-      "texture",
-      "grain",
-      "overlay",
-      "film"
-    ],
-    "href": "/catalog/components/grain-overlay",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png"
-  },
-  {
-    "name": "gravitational-lens",
-    "type": "block",
-    "title": "Gravitational Lens",
-    "description": "Shader transition with gravitational lensing distortion",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/gravitational-lens",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
-  },
-  {
-    "name": "grid-pixelate-wipe",
-    "type": "component",
-    "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",
-    "tags": [
-      "transition",
-      "wipe",
-      "grid",
-      "pixelate"
-    ],
-    "href": "/catalog/components/grid-pixelate-wipe",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
-  },
-  {
-    "name": "instagram-follow",
-    "type": "block",
-    "title": "Instagram Follow",
-    "description": "Animated Instagram follow overlay with profile card and follow button",
-    "tags": [
-      "social",
-      "overlay",
-      "instagram"
-    ],
-    "href": "/catalog/blocks/instagram-follow",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
-  },
-  {
-    "name": "ios26-liquid-glass",
-    "type": "block",
-    "title": "iOS 26 Liquid Glass Home Screen",
-    "description": "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.",
-    "tags": [
-      "liquid-glass-html-in-canvas",
-      "webgpu",
-      "3d",
-      "iphone",
-      "ios26",
-      "notifications",
-      "gltf",
-      "html-in-canvas"
-    ],
-    "href": "/catalog/blocks/ios26-liquid-glass",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png"
-  },
-  {
-    "name": "light-leak",
-    "type": "block",
-    "title": "Light Leak",
-    "description": "Shader transition with cinematic light leak overlay",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/light-leak",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
-  },
-  {
-    "name": "liquid-glass-context-menu",
-    "type": "block",
-    "title": "Liquid Glass Context Menu",
-    "description": "Frosted glass context menu panel drifting over an aurora shader background",
-    "tags": [
-      "html-in-canvas",
-      "liquid-glass-html-in-canvas",
-      "webgpu"
-    ],
-    "href": "/catalog/blocks/liquid-glass-context-menu",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png"
-  },
-  {
-    "name": "liquid-glass-media-controls",
-    "type": "block",
-    "title": "Liquid Glass Media Controls",
-    "description": "Frosted glass media control panels spreading over an aurora shader background",
-    "tags": [
-      "html-in-canvas",
-      "liquid-glass-html-in-canvas",
-      "webgpu"
-    ],
-    "href": "/catalog/blocks/liquid-glass-media-controls",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png"
-  },
-  {
-    "name": "liquid-glass-notification",
-    "type": "block",
-    "title": "Liquid Glass Notification",
-    "description": "Frosted glass notification cards floating over an aurora shader background",
-    "tags": [
-      "html-in-canvas",
-      "liquid-glass-html-in-canvas",
-      "webgpu"
-    ],
-    "href": "/catalog/blocks/liquid-glass-notification",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png"
-  },
-  {
-    "name": "liquid-glass-widgets",
-    "type": "block",
-    "title": "Liquid Glass Widgets",
-    "description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
-    "tags": [
-      "html-in-canvas",
-      "liquid-glass-html-in-canvas",
-      "webgpu"
-    ],
-    "href": "/catalog/blocks/liquid-glass-widgets",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png"
-  },
-  {
-    "name": "logo-outro",
-    "type": "block",
-    "title": "Logo Outro",
-    "description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
-    "tags": [
-      "branding",
-      "outro",
-      "logo"
-    ],
-    "href": "/catalog/blocks/logo-outro",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
-  },
-  {
-    "name": "macos-notification",
-    "type": "block",
-    "title": "macOS Notification",
-    "description": "Animated macOS-style notification banner with app icon and message",
-    "tags": [
-      "social",
-      "overlay",
-      "notification"
-    ],
-    "href": "/catalog/blocks/macos-notification",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
-  },
-  {
-    "name": "macos-tahoe-liquid-glass",
-    "type": "block",
-    "title": "macOS Tahoe Liquid Glass Desktop",
-    "description": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
-    "tags": [
-      "html-in-canvas",
-      "3d",
-      "macos",
-      "tahoe",
-      "gltf"
-    ],
-    "href": "/catalog/blocks/macos-tahoe-liquid-glass",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
-  },
-  {
-    "name": "north-korea-locked-down",
-    "type": "block",
-    "title": "North Korea Locked Down",
-    "description": "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.",
-    "tags": [
-      "showcase",
-      "map",
-      "annotation",
-      "youtube",
-      "kinetic"
-    ],
-    "href": "/catalog/blocks/north-korea-locked-down",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
-  },
-  {
-    "name": "nyc-paris-flight",
-    "type": "block",
-    "title": "NYC Paris Flight",
-    "description": "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.",
-    "tags": [
-      "showcase",
-      "travel",
-      "map",
-      "youtube",
-      "sfx"
-    ],
-    "href": "/catalog/blocks/nyc-paris-flight",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
-  },
-  {
-    "name": "parallax-unzoom",
-    "type": "component",
-    "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)",
-    "tags": [
-      "transition",
-      "reveal",
-      "unzoom",
-      "parallax",
-      "grid",
-      "hero"
-    ],
-    "href": "/catalog/components/parallax-unzoom",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png"
-  },
-  {
-    "name": "parallax-zoom",
-    "type": "component",
-    "title": "Parallax Zoom",
-    "description": "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition",
-    "tags": [
-      "transition",
-      "zoom",
-      "parallax",
-      "grid",
-      "hero"
-    ],
-    "href": "/catalog/components/parallax-zoom",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png"
-  },
-  {
-    "name": "reddit-post",
-    "type": "block",
-    "title": "Reddit Post Card",
-    "description": "Animated Reddit post card overlay with upvotes and comments",
-    "tags": [
-      "social",
-      "overlay",
-      "reddit"
-    ],
-    "href": "/catalog/blocks/reddit-post",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
-  },
-  {
-    "name": "ridged-burn",
-    "type": "block",
-    "title": "Ridged Burn",
-    "description": "Shader transition with ridged turbulence burn effect",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/ridged-burn",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
-  },
-  {
-    "name": "ripple-waves",
-    "type": "block",
-    "title": "Ripple Waves",
-    "description": "Shader transition with concentric ripple wave distortion",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/ripple-waves",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
-  },
-  {
-    "name": "sdf-iris",
-    "type": "block",
-    "title": "SDF Iris",
-    "description": "Shader transition with signed distance field iris reveal",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/sdf-iris",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
-  },
-  {
-    "name": "shimmer-sweep",
-    "type": "component",
-    "title": "Shimmer Sweep",
-    "description": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
-    "tags": [
-      "text",
-      "shimmer",
-      "highlight",
-      "effect"
-    ],
-    "href": "/catalog/components/shimmer-sweep",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
-  },
-  {
-    "name": "spain-map",
-    "type": "block",
-    "title": "Spain Map",
-    "description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection",
-    "tags": [
-      "data",
-      "map",
-      "geography",
-      "spain",
-      "europe",
-      "choropleth"
-    ],
-    "href": "/catalog/blocks/spain-map",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png"
-  },
-  {
-    "name": "spotify-card",
-    "type": "block",
-    "title": "Spotify Now Playing",
-    "description": "Animated Spotify now-playing card with album art and progress bar",
-    "tags": [
-      "social",
-      "overlay",
-      "spotify"
-    ],
-    "href": "/catalog/blocks/spotify-card",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
-  },
-  {
-    "name": "swirl-vortex",
-    "type": "block",
-    "title": "Swirl Vortex",
-    "description": "Shader transition with swirling vortex distortion",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/swirl-vortex",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
-  },
-  {
-    "name": "texture-mask-text",
-    "type": "component",
-    "title": "Texture Mask Text",
-    "description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
-    "tags": [
-      "text",
-      "texture",
-      "mask",
-      "effect"
-    ],
-    "href": "/catalog/components/texture-mask-text",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png"
-  },
-  {
-    "name": "thermal-distortion",
-    "type": "block",
-    "title": "Thermal Distortion",
-    "description": "Shader transition with heat haze thermal distortion",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/thermal-distortion",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
-  },
-  {
-    "name": "tiktok-follow",
-    "type": "block",
-    "title": "TikTok Follow",
-    "description": "Animated TikTok follow overlay with profile card and follow button",
-    "tags": [
-      "social",
-      "overlay",
-      "tiktok"
-    ],
-    "href": "/catalog/blocks/tiktok-follow",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
-  },
-  {
-    "name": "transitions-3d",
-    "type": "block",
-    "title": "3D Transitions",
-    "description": "Showcase of 3D perspective flip and rotate transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-3d",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
-  },
-  {
-    "name": "transitions-blur",
-    "type": "block",
-    "title": "Blur Transitions",
-    "description": "Showcase of blur-based transitions between scenes",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-blur",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
-  },
-  {
-    "name": "transitions-cover",
-    "type": "block",
-    "title": "Cover Transitions",
-    "description": "Showcase of cover/uncover slide transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-cover",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
-  },
-  {
-    "name": "transitions-destruction",
-    "type": "block",
-    "title": "Destruction Transitions",
-    "description": "Showcase of destructive break-apart transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-destruction",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
-  },
-  {
-    "name": "transitions-dissolve",
-    "type": "block",
-    "title": "Dissolve Transitions",
-    "description": "Showcase of dissolve and fade transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-dissolve",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
-  },
-  {
-    "name": "transitions-distortion",
-    "type": "block",
-    "title": "Distortion Transitions",
-    "description": "Showcase of warp and distortion transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-distortion",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
-  },
-  {
-    "name": "transitions-grid",
-    "type": "block",
-    "title": "Grid Transitions",
-    "description": "Showcase of grid-based tile transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-grid",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
-  },
-  {
-    "name": "transitions-light",
-    "type": "block",
-    "title": "Light Transitions",
-    "description": "Showcase of light-based glow and flash transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-light",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
-  },
-  {
-    "name": "transitions-mechanical",
-    "type": "block",
-    "title": "Mechanical Transitions",
-    "description": "Showcase of mechanical shutter and iris transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-mechanical",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
-  },
-  {
-    "name": "transitions-other",
-    "type": "block",
-    "title": "Other Transitions",
-    "description": "Showcase of miscellaneous creative transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-other",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
-  },
-  {
-    "name": "transitions-push",
-    "type": "block",
-    "title": "Push Transitions",
-    "description": "Showcase of push and slide transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-push",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
-  },
-  {
-    "name": "transitions-radial",
-    "type": "block",
-    "title": "Radial Transitions",
-    "description": "Showcase of radial wipe and reveal transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-radial",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
-  },
-  {
-    "name": "transitions-scale",
-    "type": "block",
-    "title": "Scale Transitions",
-    "description": "Showcase of scale and zoom transitions",
-    "tags": [
-      "transition",
-      "showcase"
-    ],
-    "href": "/catalog/blocks/transitions-scale",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
-  },
-  {
-    "name": "ui-3d-reveal",
-    "type": "block",
-    "title": "3D UI Reveal",
-    "description": "Perspective 3D reveal animation for UI elements",
-    "tags": [
-      "showcase",
-      "3d",
-      "reveal"
-    ],
-    "href": "/catalog/blocks/ui-3d-reveal",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
-  },
-  {
-    "name": "us-map",
-    "type": "block",
-    "title": "US Map",
-    "description": "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP",
-    "tags": [
-      "data",
-      "map",
-      "geography",
-      "usa",
-      "choropleth"
-    ],
-    "href": "/catalog/blocks/us-map",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png"
-  },
-  {
-    "name": "us-map-bubble",
-    "type": "block",
-    "title": "US Bubble Map",
-    "description": "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map",
-    "tags": [
-      "data",
-      "map",
-      "geography",
-      "usa",
-      "bubble",
-      "cities"
-    ],
-    "href": "/catalog/blocks/us-map-bubble",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png"
-  },
-  {
-    "name": "us-map-flow",
-    "type": "block",
-    "title": "US Flow Map",
-    "description": "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization",
-    "tags": [
-      "data",
-      "map",
-      "geography",
-      "usa",
-      "flow",
-      "connections",
-      "arcs"
-    ],
-    "href": "/catalog/blocks/us-map-flow",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png"
-  },
-  {
-    "name": "us-map-hex",
-    "type": "block",
-    "title": "US Hex Grid Map",
-    "description": "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label",
-    "tags": [
-      "data",
-      "map",
-      "geography",
-      "usa",
-      "hexgrid",
-      "tilegrid"
-    ],
-    "href": "/catalog/blocks/us-map-hex",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png"
-  },
-  {
-    "name": "vfx-iphone-device",
-    "type": "block",
-    "title": "iPhone & MacBook 3D Showcase",
-    "description": "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.",
-    "tags": [
-      "html-in-canvas",
-      "3d",
-      "device",
-      "iphone",
-      "macbook",
-      "gltf"
-    ],
-    "href": "/catalog/blocks/vfx-iphone-device",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png"
-  },
-  {
-    "name": "vfx-liquid-background",
-    "type": "block",
-    "title": "Liquid Background",
-    "description": "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.",
-    "tags": [
-      "html-in-canvas",
-      "liquid",
-      "webgl",
-      "displacement",
-      "background"
-    ],
-    "href": "/catalog/blocks/vfx-liquid-background",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
-  },
-  {
-    "name": "vfx-magnetic",
-    "type": "block",
-    "title": "Magnetic",
-    "description": "VFX composition block",
-    "tags": [
-      "html-in-canvas",
-      "webgl"
-    ],
-    "href": "/catalog/blocks/vfx-magnetic",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png"
-  },
-  {
-    "name": "vfx-portal",
-    "type": "block",
-    "title": "Portal",
-    "description": "VFX composition block",
-    "tags": [
-      "html-in-canvas",
-      "webgl"
-    ],
-    "href": "/catalog/blocks/vfx-portal",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png"
-  },
-  {
-    "name": "vfx-shatter",
-    "type": "block",
-    "title": "Shatter",
-    "description": "VFX composition block",
-    "tags": [
-      "html-in-canvas",
-      "webgl"
-    ],
-    "href": "/catalog/blocks/vfx-shatter",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png"
-  },
-  {
-    "name": "vfx-text-cursor",
-    "type": "block",
-    "title": "VFX Text Cursor",
-    "description": "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.",
-    "tags": [
-      "html-in-canvas",
-      "text",
-      "shader",
-      "cursor",
-      "chromatic"
-    ],
-    "href": "/catalog/blocks/vfx-text-cursor",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
-  },
-  {
-    "name": "vignette",
-    "type": "component",
-    "title": "Vignette",
-    "description": "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center",
-    "tags": [
-      "vignette",
-      "overlay",
-      "cinematic",
-      "effect"
-    ],
-    "href": "/catalog/components/vignette",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png"
-  },
-  {
-    "name": "vpn-youtube-spot",
-    "type": "block",
-    "title": "VPN YouTube Spot",
-    "description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
-    "tags": [
-      "app",
-      "showcase",
-      "youtube",
-      "sfx"
-    ],
-    "href": "/catalog/blocks/vpn-youtube-spot",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
-  },
-  {
-    "name": "whip-pan",
-    "type": "block",
-    "title": "Whip Pan",
-    "description": "Shader transition simulating a fast camera whip pan",
-    "tags": [
-      "transition",
-      "shader"
-    ],
-    "href": "/catalog/blocks/whip-pan",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
-  },
-  {
-    "name": "world-map",
-    "type": "block",
-    "title": "World Map",
-    "description": "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection",
-    "tags": [
-      "data",
-      "map",
-      "geography",
-      "world",
-      "choropleth"
-    ],
-    "href": "/catalog/blocks/world-map",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png"
-  },
-  {
-    "name": "x-post",
-    "type": "block",
-    "title": "X Post Card",
-    "description": "Animated X/Twitter post card overlay with engagement metrics",
-    "tags": [
-      "social",
-      "overlay",
-      "twitter"
-    ],
-    "href": "/catalog/blocks/x-post",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
-  },
-  {
-    "name": "yt-lower-third",
-    "type": "block",
-    "title": "YouTube Lower Third",
-    "description": "Animated YouTube subscribe lower third with avatar and channel info",
-    "tags": [
-      "social",
-      "overlay",
-      "youtube"
-    ],
-    "href": "/catalog/blocks/yt-lower-third",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
-  }
+    {
+        "name": "app-showcase",
+        "type": "block",
+        "title": "App Showcase",
+        "description": "Fitness app product showcase with three floating smartphone screens",
+        "tags": [
+            "showcase",
+            "app",
+            "3d"
+        ],
+        "href": "/catalog/blocks/app-showcase",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
+    },
+    {
+        "name": "apple-money-count",
+        "type": "block",
+        "title": "Apple Money Count",
+        "description": "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.",
+        "tags": [
+            "showcase",
+            "finance",
+            "kinetic",
+            "youtube",
+            "sfx"
+        ],
+        "href": "/catalog/blocks/apple-money-count",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
+    },
+    {
+        "name": "blue-sweater-intro-video",
+        "type": "block",
+        "title": "Blue Sweater Intro Video",
+        "description": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
+        "tags": [
+            "showcase",
+            "ai",
+            "creator",
+            "sfx"
+        ],
+        "href": "/catalog/blocks/blue-sweater-intro-video",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
+    },
+    {
+        "name": "caption-blend-difference",
+        "type": "component",
+        "title": "Blend Difference",
+        "description": "Auto-inverting text using mix-blend-mode: difference \u2014 flips between white and black per-pixel against the background",
+        "tags": [
+            "text",
+            "effect",
+            "blend-mode",
+            "contrast",
+            "inversion"
+        ],
+        "href": "/catalog/components/caption-blend-difference",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png"
+    },
+    {
+        "name": "caption-clip-wipe",
+        "type": "component",
+        "title": "Clip Wipe",
+        "description": "Left-to-right clip-path wipe reveal per word",
+        "tags": [
+            "captions",
+            "caption-style",
+            "wipe",
+            "clip-path",
+            "reveal"
+        ],
+        "href": "/catalog/components/caption-clip-wipe",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png"
+    },
+    {
+        "name": "caption-editorial-emphasis",
+        "type": "component",
+        "title": "Editorial Emphasis",
+        "description": "Dual-font system with dramatic size contrast for emphasis words",
+        "tags": [
+            "captions",
+            "caption-style",
+            "editorial",
+            "typography",
+            "emphasis"
+        ],
+        "href": "/catalog/components/caption-editorial-emphasis",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png"
+    },
+    {
+        "name": "caption-emoji-pop",
+        "type": "component",
+        "title": "Emoji Pop",
+        "description": "Emoji integration with stroked text and horizontal squeeze entrance",
+        "tags": [
+            "captions",
+            "caption-style",
+            "emoji",
+            "social"
+        ],
+        "href": "/catalog/components/caption-emoji-pop",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png"
+    },
+    {
+        "name": "caption-glitch-rgb",
+        "type": "component",
+        "title": "Glitch RGB",
+        "description": "RGB chromatic aberration with CRT scanline overlay",
+        "tags": [
+            "captions",
+            "caption-style",
+            "glitch",
+            "cyber",
+            "tech"
+        ],
+        "href": "/catalog/components/caption-glitch-rgb",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png"
+    },
+    {
+        "name": "caption-gradient-fill",
+        "type": "component",
+        "title": "Gradient Fill",
+        "description": "Gradient-clipped text with elastic bounce entrance",
+        "tags": [
+            "captions",
+            "caption-style",
+            "gradient",
+            "colorful"
+        ],
+        "href": "/catalog/components/caption-gradient-fill",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
+    },
+    {
+        "name": "caption-highlight",
+        "type": "component",
+        "title": "Highlight",
+        "description": "Red background sweep behind each active word, TikTok-style",
+        "tags": [
+            "captions",
+            "caption-style",
+            "highlight",
+            "social",
+            "tiktok"
+        ],
+        "href": "/catalog/components/caption-highlight",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png"
+    },
+    {
+        "name": "caption-kinetic-slam",
+        "type": "component",
+        "title": "Kinetic Slam",
+        "description": "Full-screen single-word display with alternating entrance directions",
+        "tags": [
+            "captions",
+            "caption-style",
+            "kinetic",
+            "typography",
+            "slam"
+        ],
+        "href": "/catalog/components/caption-kinetic-slam",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png"
+    },
+    {
+        "name": "caption-matrix-decode",
+        "type": "component",
+        "title": "Matrix Decode",
+        "description": "Character scramble animation before text reveal",
+        "tags": [
+            "captions",
+            "caption-style",
+            "matrix",
+            "scramble",
+            "decode"
+        ],
+        "href": "/catalog/components/caption-matrix-decode",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png"
+    },
+    {
+        "name": "caption-neon-accent",
+        "type": "component",
+        "title": "Neon Accent",
+        "description": "Multi-color neon glow accents with wiggle drift animation",
+        "tags": [
+            "captions",
+            "caption-style",
+            "neon",
+            "glow",
+            "accent"
+        ],
+        "href": "/catalog/components/caption-neon-accent",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png"
+    },
+    {
+        "name": "caption-neon-glow",
+        "type": "component",
+        "title": "Neon Glow",
+        "description": "Cyan and magenta neon glow with keyword accent colors",
+        "tags": [
+            "captions",
+            "caption-style",
+            "neon",
+            "glow",
+            "gaming"
+        ],
+        "href": "/catalog/components/caption-neon-glow",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png"
+    },
+    {
+        "name": "caption-parallax-layers",
+        "type": "component",
+        "title": "Parallax Layers",
+        "description": "Behind-subject 3D text layering with vertical stretch effect",
+        "tags": [
+            "captions",
+            "caption-style",
+            "parallax",
+            "3d",
+            "depth"
+        ],
+        "href": "/catalog/components/caption-parallax-layers",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png"
+    },
+    {
+        "name": "caption-particle-burst",
+        "type": "component",
+        "title": "Particle Burst",
+        "description": "Keyword words trigger colored particle explosions",
+        "tags": [
+            "captions",
+            "caption-style",
+            "particles",
+            "burst",
+            "effects"
+        ],
+        "href": "/catalog/components/caption-particle-burst",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png"
+    },
+    {
+        "name": "caption-pill-karaoke",
+        "type": "component",
+        "title": "Pill Karaoke",
+        "description": "Pill-shaped container with per-word karaoke color highlight",
+        "tags": [
+            "captions",
+            "caption-style",
+            "karaoke",
+            "pill"
+        ],
+        "href": "/catalog/components/caption-pill-karaoke",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
+    },
+    {
+        "name": "caption-texture",
+        "type": "component",
+        "title": "Texture",
+        "description": "Flowing texture mask over large uppercase text \u2014 ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
+        "tags": [
+            "captions",
+            "caption-style",
+            "texture",
+            "mask"
+        ],
+        "href": "/catalog/components/caption-texture",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png"
+    },
+    {
+        "name": "caption-weight-shift",
+        "type": "component",
+        "title": "Weight Shift",
+        "description": "Elegant font-weight transition between caption lines",
+        "tags": [
+            "captions",
+            "caption-style",
+            "minimal",
+            "typography"
+        ],
+        "href": "/catalog/components/caption-weight-shift",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png"
+    },
+    {
+        "name": "chromatic-radial-split",
+        "type": "block",
+        "title": "Chromatic Radial Split",
+        "description": "Shader transition with chromatic aberration radial split",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/chromatic-radial-split",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
+    },
+    {
+        "name": "cinematic-zoom",
+        "type": "block",
+        "title": "Cinematic Zoom",
+        "description": "Shader transition with dramatic zoom blur",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/cinematic-zoom",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
+    },
+    {
+        "name": "cross-warp-morph",
+        "type": "block",
+        "title": "Cross Warp Morph",
+        "description": "Shader transition with cross-warped morphing",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/cross-warp-morph",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
+    },
+    {
+        "name": "data-chart",
+        "type": "block",
+        "title": "Data Chart",
+        "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
+        "tags": [
+            "data",
+            "chart",
+            "statistics"
+        ],
+        "href": "/catalog/blocks/data-chart",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
+    },
+    {
+        "name": "domain-warp-dissolve",
+        "type": "block",
+        "title": "Domain Warp Dissolve",
+        "description": "Shader transition with fractal noise domain warping",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/domain-warp-dissolve",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
+    },
+    {
+        "name": "flash-through-white",
+        "type": "block",
+        "title": "Flash Through White",
+        "description": "Shader transition with white flash crossfade",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/flash-through-white",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
+    },
+    {
+        "name": "flowchart",
+        "type": "block",
+        "title": "Flowchart",
+        "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+        "tags": [
+            "diagram",
+            "flowchart",
+            "interactive"
+        ],
+        "href": "/catalog/blocks/flowchart",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
+    },
+    {
+        "name": "glitch",
+        "type": "block",
+        "title": "Glitch",
+        "description": "Shader transition with digital glitch artifacts",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/glitch",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
+    },
+    {
+        "name": "grain-overlay",
+        "type": "component",
+        "title": "Grain Overlay",
+        "description": "Animated film grain texture overlay using CSS keyframes \u2014 adds warmth and analog character to any composition",
+        "tags": [
+            "texture",
+            "grain",
+            "overlay",
+            "film"
+        ],
+        "href": "/catalog/components/grain-overlay",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png"
+    },
+    {
+        "name": "gravitational-lens",
+        "type": "block",
+        "title": "Gravitational Lens",
+        "description": "Shader transition with gravitational lensing distortion",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/gravitational-lens",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
+    },
+    {
+        "name": "grid-pixelate-wipe",
+        "type": "component",
+        "title": "Grid Pixelate Wipe",
+        "description": "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing \u2014 use between scenes",
+        "tags": [
+            "transition",
+            "wipe",
+            "grid",
+            "pixelate"
+        ],
+        "href": "/catalog/components/grid-pixelate-wipe",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
+    },
+    {
+        "name": "motion-blur",
+        "type": "component",
+        "title": "Motion Blur",
+        "description": "Velocity-driven motion blur \u2014 samples element position each frame and scales CSS blur + horizontal stretch proportionally to speed",
+        "tags": [
+            "effect",
+            "motion-blur",
+            "velocity",
+            "animation",
+            "physics"
+        ],
+        "href": "/catalog/components/motion-blur",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png"
+    },
+    {
+        "name": "instagram-follow",
+        "type": "block",
+        "title": "Instagram Follow",
+        "description": "Animated Instagram follow overlay with profile card and follow button",
+        "tags": [
+            "social",
+            "overlay",
+            "instagram"
+        ],
+        "href": "/catalog/blocks/instagram-follow",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
+    },
+    {
+        "name": "ios26-liquid-glass",
+        "type": "block",
+        "title": "iOS 26 Liquid Glass Home Screen",
+        "description": "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.",
+        "tags": [
+            "liquid-glass-html-in-canvas",
+            "webgpu",
+            "3d",
+            "iphone",
+            "ios26",
+            "notifications",
+            "gltf",
+            "html-in-canvas"
+        ],
+        "href": "/catalog/blocks/ios26-liquid-glass",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png"
+    },
+    {
+        "name": "light-leak",
+        "type": "block",
+        "title": "Light Leak",
+        "description": "Shader transition with cinematic light leak overlay",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/light-leak",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
+    },
+    {
+        "name": "liquid-glass-context-menu",
+        "type": "block",
+        "title": "Liquid Glass Context Menu",
+        "description": "Frosted glass context menu panel drifting over an aurora shader background",
+        "tags": [
+            "html-in-canvas",
+            "liquid-glass-html-in-canvas",
+            "webgpu"
+        ],
+        "href": "/catalog/blocks/liquid-glass-context-menu",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png"
+    },
+    {
+        "name": "liquid-glass-media-controls",
+        "type": "block",
+        "title": "Liquid Glass Media Controls",
+        "description": "Frosted glass media control panels spreading over an aurora shader background",
+        "tags": [
+            "html-in-canvas",
+            "liquid-glass-html-in-canvas",
+            "webgpu"
+        ],
+        "href": "/catalog/blocks/liquid-glass-media-controls",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png"
+    },
+    {
+        "name": "liquid-glass-notification",
+        "type": "block",
+        "title": "Liquid Glass Notification",
+        "description": "Frosted glass notification cards floating over an aurora shader background",
+        "tags": [
+            "html-in-canvas",
+            "liquid-glass-html-in-canvas",
+            "webgpu"
+        ],
+        "href": "/catalog/blocks/liquid-glass-notification",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png"
+    },
+    {
+        "name": "liquid-glass-widgets",
+        "type": "block",
+        "title": "Liquid Glass Widgets",
+        "description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
+        "tags": [
+            "html-in-canvas",
+            "liquid-glass-html-in-canvas",
+            "webgpu"
+        ],
+        "href": "/catalog/blocks/liquid-glass-widgets",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png"
+    },
+    {
+        "name": "logo-outro",
+        "type": "block",
+        "title": "Logo Outro",
+        "description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
+        "tags": [
+            "branding",
+            "outro",
+            "logo"
+        ],
+        "href": "/catalog/blocks/logo-outro",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
+    },
+    {
+        "name": "macos-notification",
+        "type": "block",
+        "title": "macOS Notification",
+        "description": "Animated macOS-style notification banner with app icon and message",
+        "tags": [
+            "social",
+            "overlay",
+            "notification"
+        ],
+        "href": "/catalog/blocks/macos-notification",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
+    },
+    {
+        "name": "macos-tahoe-liquid-glass",
+        "type": "block",
+        "title": "macOS Tahoe Liquid Glass Desktop",
+        "description": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
+        "tags": [
+            "html-in-canvas",
+            "3d",
+            "macos",
+            "tahoe",
+            "gltf"
+        ],
+        "href": "/catalog/blocks/macos-tahoe-liquid-glass",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
+    },
+    {
+        "name": "north-korea-locked-down",
+        "type": "block",
+        "title": "North Korea Locked Down",
+        "description": "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.",
+        "tags": [
+            "showcase",
+            "map",
+            "annotation",
+            "youtube",
+            "kinetic"
+        ],
+        "href": "/catalog/blocks/north-korea-locked-down",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
+    },
+    {
+        "name": "nyc-paris-flight",
+        "type": "block",
+        "title": "NYC Paris Flight",
+        "description": "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.",
+        "tags": [
+            "showcase",
+            "travel",
+            "map",
+            "youtube",
+            "sfx"
+        ],
+        "href": "/catalog/blocks/nyc-paris-flight",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
+    },
+    {
+        "name": "parallax-unzoom",
+        "type": "component",
+        "title": "Parallax Unzoom",
+        "description": "Reveal transition \u2014 focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)",
+        "tags": [
+            "transition",
+            "reveal",
+            "unzoom",
+            "parallax",
+            "grid",
+            "hero"
+        ],
+        "href": "/catalog/components/parallax-unzoom",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png"
+    },
+    {
+        "name": "parallax-zoom",
+        "type": "component",
+        "title": "Parallax Zoom",
+        "description": "Center card scales up to fill the frame while siblings parallax outward \u2014 inspired by the eBay Playbook hero transition",
+        "tags": [
+            "transition",
+            "zoom",
+            "parallax",
+            "grid",
+            "hero"
+        ],
+        "href": "/catalog/components/parallax-zoom",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png"
+    },
+    {
+        "name": "reddit-post",
+        "type": "block",
+        "title": "Reddit Post Card",
+        "description": "Animated Reddit post card overlay with upvotes and comments",
+        "tags": [
+            "social",
+            "overlay",
+            "reddit"
+        ],
+        "href": "/catalog/blocks/reddit-post",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
+    },
+    {
+        "name": "ridged-burn",
+        "type": "block",
+        "title": "Ridged Burn",
+        "description": "Shader transition with ridged turbulence burn effect",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/ridged-burn",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
+    },
+    {
+        "name": "ripple-waves",
+        "type": "block",
+        "title": "Ripple Waves",
+        "description": "Shader transition with concentric ripple wave distortion",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/ripple-waves",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
+    },
+    {
+        "name": "sdf-iris",
+        "type": "block",
+        "title": "SDF Iris",
+        "description": "Shader transition with signed distance field iris reveal",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/sdf-iris",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
+    },
+    {
+        "name": "shimmer-sweep",
+        "type": "component",
+        "title": "Shimmer Sweep",
+        "description": "Animated light sweep across text or elements using a CSS gradient mask \u2014 ideal for AI accents and premium reveals",
+        "tags": [
+            "text",
+            "shimmer",
+            "highlight",
+            "effect"
+        ],
+        "href": "/catalog/components/shimmer-sweep",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
+    },
+    {
+        "name": "spain-map",
+        "type": "block",
+        "title": "Spain Map",
+        "description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend \u2014 D3 conic conformal projection",
+        "tags": [
+            "data",
+            "map",
+            "geography",
+            "spain",
+            "europe",
+            "choropleth"
+        ],
+        "href": "/catalog/blocks/spain-map",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png"
+    },
+    {
+        "name": "spotify-card",
+        "type": "block",
+        "title": "Spotify Now Playing",
+        "description": "Animated Spotify now-playing card with album art and progress bar",
+        "tags": [
+            "social",
+            "overlay",
+            "spotify"
+        ],
+        "href": "/catalog/blocks/spotify-card",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
+    },
+    {
+        "name": "swirl-vortex",
+        "type": "block",
+        "title": "Swirl Vortex",
+        "description": "Shader transition with swirling vortex distortion",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/swirl-vortex",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
+    },
+    {
+        "name": "texture-mask-text",
+        "type": "component",
+        "title": "Texture Mask Text",
+        "description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
+        "tags": [
+            "text",
+            "texture",
+            "mask",
+            "effect"
+        ],
+        "href": "/catalog/components/texture-mask-text",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png"
+    },
+    {
+        "name": "thermal-distortion",
+        "type": "block",
+        "title": "Thermal Distortion",
+        "description": "Shader transition with heat haze thermal distortion",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/thermal-distortion",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
+    },
+    {
+        "name": "tiktok-follow",
+        "type": "block",
+        "title": "TikTok Follow",
+        "description": "Animated TikTok follow overlay with profile card and follow button",
+        "tags": [
+            "social",
+            "overlay",
+            "tiktok"
+        ],
+        "href": "/catalog/blocks/tiktok-follow",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
+    },
+    {
+        "name": "transitions-3d",
+        "type": "block",
+        "title": "3D Transitions",
+        "description": "Showcase of 3D perspective flip and rotate transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-3d",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
+    },
+    {
+        "name": "transitions-blur",
+        "type": "block",
+        "title": "Blur Transitions",
+        "description": "Showcase of blur-based transitions between scenes",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-blur",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
+    },
+    {
+        "name": "transitions-cover",
+        "type": "block",
+        "title": "Cover Transitions",
+        "description": "Showcase of cover/uncover slide transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-cover",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
+    },
+    {
+        "name": "transitions-destruction",
+        "type": "block",
+        "title": "Destruction Transitions",
+        "description": "Showcase of destructive break-apart transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-destruction",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
+    },
+    {
+        "name": "transitions-dissolve",
+        "type": "block",
+        "title": "Dissolve Transitions",
+        "description": "Showcase of dissolve and fade transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-dissolve",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
+    },
+    {
+        "name": "transitions-distortion",
+        "type": "block",
+        "title": "Distortion Transitions",
+        "description": "Showcase of warp and distortion transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-distortion",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
+    },
+    {
+        "name": "transitions-grid",
+        "type": "block",
+        "title": "Grid Transitions",
+        "description": "Showcase of grid-based tile transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-grid",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
+    },
+    {
+        "name": "transitions-light",
+        "type": "block",
+        "title": "Light Transitions",
+        "description": "Showcase of light-based glow and flash transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-light",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
+    },
+    {
+        "name": "transitions-mechanical",
+        "type": "block",
+        "title": "Mechanical Transitions",
+        "description": "Showcase of mechanical shutter and iris transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-mechanical",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
+    },
+    {
+        "name": "transitions-other",
+        "type": "block",
+        "title": "Other Transitions",
+        "description": "Showcase of miscellaneous creative transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-other",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
+    },
+    {
+        "name": "transitions-push",
+        "type": "block",
+        "title": "Push Transitions",
+        "description": "Showcase of push and slide transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-push",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
+    },
+    {
+        "name": "transitions-radial",
+        "type": "block",
+        "title": "Radial Transitions",
+        "description": "Showcase of radial wipe and reveal transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-radial",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
+    },
+    {
+        "name": "transitions-scale",
+        "type": "block",
+        "title": "Scale Transitions",
+        "description": "Showcase of scale and zoom transitions",
+        "tags": [
+            "transition",
+            "showcase"
+        ],
+        "href": "/catalog/blocks/transitions-scale",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
+    },
+    {
+        "name": "ui-3d-reveal",
+        "type": "block",
+        "title": "3D UI Reveal",
+        "description": "Perspective 3D reveal animation for UI elements",
+        "tags": [
+            "showcase",
+            "3d",
+            "reveal"
+        ],
+        "href": "/catalog/blocks/ui-3d-reveal",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
+    },
+    {
+        "name": "us-map",
+        "type": "block",
+        "title": "US Map",
+        "description": "Animated US choropleth map with staggered state reveals, value labels, and gradient legend \u2014 pure inline SVG with GSAP",
+        "tags": [
+            "data",
+            "map",
+            "geography",
+            "usa",
+            "choropleth"
+        ],
+        "href": "/catalog/blocks/us-map",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png"
+    },
+    {
+        "name": "us-map-bubble",
+        "type": "block",
+        "title": "US Bubble Map",
+        "description": "Animated US bubble map with proportional city markers, value callouts, and connection lines \u2014 composable with us-map",
+        "tags": [
+            "data",
+            "map",
+            "geography",
+            "usa",
+            "bubble",
+            "cities"
+        ],
+        "href": "/catalog/blocks/us-map-bubble",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png"
+    },
+    {
+        "name": "us-map-flow",
+        "type": "block",
+        "title": "US Flow Map",
+        "description": "Animated connection arcs between US cities over a base map \u2014 composable origin-destination flow visualization",
+        "tags": [
+            "data",
+            "map",
+            "geography",
+            "usa",
+            "flow",
+            "connections",
+            "arcs"
+        ],
+        "href": "/catalog/blocks/us-map-flow",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png"
+    },
+    {
+        "name": "us-map-hex",
+        "type": "block",
+        "title": "US Hex Grid Map",
+        "description": "Animated hexagonal tile grid map \u2014 each state as an equal-weight hex with data fill and abbreviation label",
+        "tags": [
+            "data",
+            "map",
+            "geography",
+            "usa",
+            "hexgrid",
+            "tilegrid"
+        ],
+        "href": "/catalog/blocks/us-map-hex",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png"
+    },
+    {
+        "name": "vfx-iphone-device",
+        "type": "block",
+        "title": "iPhone & MacBook 3D Showcase",
+        "description": "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360\u00b0 turntable.",
+        "tags": [
+            "html-in-canvas",
+            "3d",
+            "device",
+            "iphone",
+            "macbook",
+            "gltf"
+        ],
+        "href": "/catalog/blocks/vfx-iphone-device",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png"
+    },
+    {
+        "name": "vfx-liquid-background",
+        "type": "block",
+        "title": "Liquid Background",
+        "description": "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.",
+        "tags": [
+            "html-in-canvas",
+            "liquid",
+            "webgl",
+            "displacement",
+            "background"
+        ],
+        "href": "/catalog/blocks/vfx-liquid-background",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
+    },
+    {
+        "name": "vfx-magnetic",
+        "type": "block",
+        "title": "Magnetic",
+        "description": "VFX composition block",
+        "tags": [
+            "html-in-canvas",
+            "webgl"
+        ],
+        "href": "/catalog/blocks/vfx-magnetic",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png"
+    },
+    {
+        "name": "vfx-portal",
+        "type": "block",
+        "title": "Portal",
+        "description": "VFX composition block",
+        "tags": [
+            "html-in-canvas",
+            "webgl"
+        ],
+        "href": "/catalog/blocks/vfx-portal",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png"
+    },
+    {
+        "name": "vfx-shatter",
+        "type": "block",
+        "title": "Shatter",
+        "description": "VFX composition block",
+        "tags": [
+            "html-in-canvas",
+            "webgl"
+        ],
+        "href": "/catalog/blocks/vfx-shatter",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png"
+    },
+    {
+        "name": "vfx-text-cursor",
+        "type": "block",
+        "title": "VFX Text Cursor",
+        "description": "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.",
+        "tags": [
+            "html-in-canvas",
+            "text",
+            "shader",
+            "cursor",
+            "chromatic"
+        ],
+        "href": "/catalog/blocks/vfx-text-cursor",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
+    },
+    {
+        "name": "vignette",
+        "type": "component",
+        "title": "Vignette",
+        "description": "Cinematic radial vignette overlay using a pure-CSS gradient \u2014 darkens the edges to pull focus toward the center",
+        "tags": [
+            "vignette",
+            "overlay",
+            "cinematic",
+            "effect"
+        ],
+        "href": "/catalog/components/vignette",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png"
+    },
+    {
+        "name": "vpn-youtube-spot",
+        "type": "block",
+        "title": "VPN YouTube Spot",
+        "description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
+        "tags": [
+            "app",
+            "showcase",
+            "youtube",
+            "sfx"
+        ],
+        "href": "/catalog/blocks/vpn-youtube-spot",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
+    },
+    {
+        "name": "whip-pan",
+        "type": "block",
+        "title": "Whip Pan",
+        "description": "Shader transition simulating a fast camera whip pan",
+        "tags": [
+            "transition",
+            "shader"
+        ],
+        "href": "/catalog/blocks/whip-pan",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
+    },
+    {
+        "name": "world-map",
+        "type": "block",
+        "title": "World Map",
+        "description": "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset \u2014 D3 Natural Earth projection",
+        "tags": [
+            "data",
+            "map",
+            "geography",
+            "world",
+            "choropleth"
+        ],
+        "href": "/catalog/blocks/world-map",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png"
+    },
+    {
+        "name": "x-post",
+        "type": "block",
+        "title": "X Post Card",
+        "description": "Animated X/Twitter post card overlay with engagement metrics",
+        "tags": [
+            "social",
+            "overlay",
+            "twitter"
+        ],
+        "href": "/catalog/blocks/x-post",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
+    },
+    {
+        "name": "yt-lower-third",
+        "type": "block",
+        "title": "YouTube Lower Third",
+        "description": "Animated YouTube subscribe lower third with avatar and channel info",
+        "tags": [
+            "social",
+            "overlay",
+            "youtube"
+        ],
+        "href": "/catalog/blocks/yt-lower-third",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
+    }
 ]
diff --git a/registry/components/motion-blur/demo.html b/registry/components/motion-blur/demo.html
new file mode 100644
index 000000000..ebbe8b664
--- /dev/null
+++ b/registry/components/motion-blur/demo.html
@@ -0,0 +1,543 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Motion Blur — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #06060a;
+      }
+
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", ui-monospace, monospace;
+        background: #06060a;
+      }
+
+      .header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        display: flex;
+        align-items: flex-end;
+        padding: 0 72px 20px;
+        border-bottom: 1px solid #0f0f18;
+      }
+      .header-title {
+        font-size: 11px;
+        letter-spacing: 0.4em;
+        text-transform: uppercase;
+        color: #1e1e2a;
+      }
+      .header-sub {
+        margin-left: auto;
+        font-size: 11px;
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        color: #14141c;
+      }
+
+      .group {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 184px;
+      }
+
+      .group::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 72px;
+        right: 72px;
+        height: 1px;
+        background: #0d0d15;
+      }
+
+      .dur {
+        position: absolute;
+        left: 72px;
+        top: 0;
+        width: 90px;
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .dur-num {
+        font-size: 28px;
+        font-weight: 700;
+        letter-spacing: -0.04em;
+        color: #fff;
+        line-height: 1;
+      }
+      .dur-unit {
+        font-size: 9px;
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        color: #252532;
+        margin-top: 5px;
+      }
+
+      .row-hint {
+        position: absolute;
+        left: 176px;
+        width: 44px;
+        height: 72px;
+        display: flex;
+        align-items: center;
+        font-size: 8px;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: #161620;
+      }
+
+      .spd {
+        position: absolute;
+        right: 72px;
+        top: 0;
+        width: 100px;
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-end;
+      }
+      .spd-label {
+        font-size: 10px;
+        letter-spacing: 0.3em;
+        text-transform: uppercase;
+        color: #181822;
+      }
+
+      .pill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 200px;
+        height: 72px;
+        border-radius: 36px;
+        will-change: transform, filter;
+      }
+
+      .word {
+        position: absolute;
+        left: 0;
+        top: 88px;
+        height: 72px;
+        line-height: 72px;
+        white-space: nowrap;
+        font-size: 56px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        will-change: transform, filter;
+      }
+
+      .inner-div {
+        position: absolute;
+        left: 220px;
+        right: 200px;
+        top: 80px;
+        height: 1px;
+        background: #0a0a12;
+      }
+
+      .track-a,
+      .track-b {
+        position: absolute;
+        left: 220px;
+        right: 200px;
+        height: 1px;
+        background: #0c0c14;
+      }
+      .track-a {
+        top: 35px;
+      }
+      .track-b {
+        top: 123px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="motion-blur-demo"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4"
+    >
+      <div class="header">
+        <span class="header-title">Motion Blur — Velocity Showcase</span>
+        <span class="header-sub">feGaussianBlur + scaleX · blur ∝ velocity</span>
+      </div>
+
+      <div class="group" style="top: 80px">
+        <div class="dur"><span class="dur-num">3.0</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s1"
+          style="
+            background: linear-gradient(135deg, #60a5fa, #2563eb);
+            box-shadow: 0 0 32px rgba(96, 165, 250, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t1"
+          style="color: #3b82f6; text-shadow: 0 0 40px rgba(96, 165, 250, 0.3)"
+        >
+          DRIFT
+        </div>
+        <div class="spd"><span class="spd-label">slow</span></div>
+      </div>
+
+      <div class="group" style="top: 264px">
+        <div class="dur"><span class="dur-num">1.5</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s2"
+          style="
+            background: linear-gradient(135deg, #34d399, #059669);
+            box-shadow: 0 0 32px rgba(52, 211, 153, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t2"
+          style="color: #10b981; text-shadow: 0 0 40px rgba(52, 211, 153, 0.3)"
+        >
+          GLIDE
+        </div>
+        <div class="spd"><span class="spd-label">medium</span></div>
+      </div>
+
+      <div class="group" style="top: 448px">
+        <div class="dur"><span class="dur-num">0.7</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s3"
+          style="
+            background: linear-gradient(135deg, #c084fc, #7c3aed);
+            box-shadow: 0 0 32px rgba(192, 132, 252, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t3"
+          style="color: #a855f7; text-shadow: 0 0 40px rgba(192, 132, 252, 0.3)"
+        >
+          RUSH
+        </div>
+        <div class="spd"><span class="spd-label">fast</span></div>
+      </div>
+
+      <div class="group" style="top: 632px">
+        <div class="dur">
+          <span class="dur-num">0.35</span><span class="dur-unit">seconds</span>
+        </div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s4"
+          style="
+            background: linear-gradient(135deg, #fb923c, #ea580c);
+            box-shadow: 0 0 32px rgba(251, 146, 60, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t4"
+          style="color: #f97316; text-shadow: 0 0 40px rgba(251, 146, 60, 0.3)"
+        >
+          BLAST
+        </div>
+        <div class="spd"><span class="spd-label">faster</span></div>
+      </div>
+
+      <div class="group" style="top: 816px">
+        <div class="dur"><span class="dur-num">0.2</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s5"
+          style="
+            background: linear-gradient(135deg, #f87171, #dc2626);
+            box-shadow: 0 0 32px rgba(248, 113, 113, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t5"
+          style="color: #ef4444; text-shadow: 0 0 40px rgba(248, 113, 113, 0.3)"
+        >
+          WARP
+        </div>
+        <div class="spd"><span class="spd-label">extreme</span></div>
+      </div>
+
+      <script>
+        (function () {
+          if (!window._hfMbUid) window._hfMbUid = 0;
+          var ns = "http://www.w3.org/2000/svg";
+
+          window.attachMotionBlur = function (selector, tl, opts) {
+            opts = opts || {};
+            var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;
+            var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;
+            var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;
+            var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;
+            var axis = opts.axis || "both";
+
+            var items = Array.isArray(selector) ? selector : [selector];
+            var targets = items.reduce(function (acc, s) {
+              if (typeof s === "string") {
+                document.querySelectorAll(s).forEach(function (el) {
+                  acc.push(el);
+                });
+              } else if (s instanceof Element) {
+                acc.push(s);
+              }
+              return acc;
+            }, []);
+
+            var GHOST_CFG = [
+              { frac: 0.25, slope: 0.55 },
+              { frac: 0.55, slope: 0.28 },
+              { frac: 1.0, slope: 0.1 },
+            ];
+
+            var state = targets.map(function (el) {
+              var uid = "hf-mb-" + window._hfMbUid++;
+              var svg = document.createElementNS(ns, "svg");
+              svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden;");
+
+              var filter = document.createElementNS(ns, "filter");
+              filter.id = uid;
+              filter.setAttribute("x", "-110%");
+              filter.setAttribute("y", "-25%");
+              filter.setAttribute("width", "260%");
+              filter.setAttribute("height", "150%");
+
+              var ghosts = GHOST_CFG.map(function (cfg, gi) {
+                var feOff = document.createElementNS(ns, "feOffset");
+                feOff.setAttribute("in", "SourceGraphic");
+                feOff.setAttribute("dx", "0");
+                feOff.setAttribute("dy", "0");
+                feOff.setAttribute("result", "go" + gi);
+
+                var feGB = document.createElementNS(ns, "feGaussianBlur");
+                feGB.setAttribute("in", "go" + gi);
+                feGB.setAttribute("stdDeviation", "0 0");
+                feGB.setAttribute("result", "gb" + gi);
+
+                var feCT = document.createElementNS(ns, "feComponentTransfer");
+                feCT.setAttribute("in", "gb" + gi);
+                feCT.setAttribute("result", "gf" + gi);
+                var feFuncA = document.createElementNS(ns, "feFuncA");
+                feFuncA.setAttribute("type", "linear");
+                feFuncA.setAttribute("slope", String(cfg.slope));
+                feCT.appendChild(feFuncA);
+
+                filter.appendChild(feOff);
+                filter.appendChild(feGB);
+                filter.appendChild(feCT);
+                return { feOff: feOff, feGB: feGB, frac: cfg.frac };
+              });
+
+              var feTopBlur = document.createElementNS(ns, "feGaussianBlur");
+              feTopBlur.setAttribute("in", "SourceGraphic");
+              feTopBlur.setAttribute("stdDeviation", "0 0");
+              feTopBlur.setAttribute("result", "top");
+              filter.appendChild(feTopBlur);
+
+              var feMerge = document.createElementNS(ns, "feMerge");
+              for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {
+                var mn = document.createElementNS(ns, "feMergeNode");
+                mn.setAttribute("in", "gf" + mi);
+                feMerge.appendChild(mn);
+              }
+              var mnTop = document.createElementNS(ns, "feMergeNode");
+              mnTop.setAttribute("in", "top");
+              feMerge.appendChild(mnTop);
+              filter.appendChild(feMerge);
+
+              svg.appendChild(filter);
+              document.body.appendChild(svg);
+
+              return {
+                el: el,
+                ghosts: ghosts,
+                feTopBlur: feTopBlur,
+                filterId: uid,
+                prevX: parseFloat(gsap.getProperty(el, "x")) || 0,
+                prevY: parseFloat(gsap.getProperty(el, "y")) || 0,
+                prevTime: tl.time(),
+              };
+            });
+
+            var _proxy = { t: 0 };
+            tl.to(
+              _proxy,
+              {
+                t: 1,
+                duration: Math.max(tl.duration(), 0.1),
+                ease: "none",
+                onUpdate: function () {
+                  var time = tl.time();
+
+                  state.forEach(function (s) {
+                    var x = parseFloat(gsap.getProperty(s.el, "x")) || 0;
+                    var y = parseFloat(gsap.getProperty(s.el, "y")) || 0;
+                    var dt = time - s.prevTime;
+
+                    if (dt > 0.0005) {
+                      var vx = axis !== "y" ? (x - s.prevX) / dt : 0;
+                      var vy = axis !== "x" ? (y - s.prevY) / dt : 0;
+
+                      var bx = Math.min(Math.abs(vx) * blurScale, blurMax);
+                      var by = Math.min(Math.abs(vy) * blurScale, blurMax);
+                      var bxFinal = axis !== "y" ? bx : Math.max(by * 0.08, 0.4);
+                      var byFinal = axis !== "x" ? by : Math.max(bx * 0.08, 0.4);
+                      var active = bx > 0.3 || by > 0.3;
+
+                      if (active) {
+                        s.el.style.filter = "url(#" + s.filterId + ")";
+                        s.ghosts.forEach(function (g) {
+                          var dx =
+                            axis !== "y" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;
+                          var dy =
+                            axis !== "x" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;
+                          g.feOff.setAttribute("dx", dx.toFixed(2));
+                          g.feOff.setAttribute("dy", dy.toFixed(2));
+                          var gbx =
+                            axis !== "y"
+                              ? (bxFinal * g.frac * 0.5).toFixed(2)
+                              : Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);
+                          var gby =
+                            axis !== "x"
+                              ? (byFinal * g.frac * 0.5).toFixed(2)
+                              : Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);
+                          g.feGB.setAttribute("stdDeviation", gbx + " " + gby);
+                        });
+                        s.feTopBlur.setAttribute(
+                          "stdDeviation",
+                          (bxFinal * 0.15).toFixed(2) + " " + (byFinal * 0.15).toFixed(2),
+                        );
+                        if (stretchMax > 0) {
+                          var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);
+                          var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);
+                          var ox = axis !== "y" ? (vx >= 0 ? "100% 50%" : "0% 50%") : "50% 50%";
+                          var oy = axis !== "x" ? (vy >= 0 ? "50% 100%" : "50% 0%") : "50% 50%";
+                          gsap.set(s.el, {
+                            scaleX: axis !== "y" ? sx : 1,
+                            scaleY: axis !== "x" ? sy : 1,
+                            transformOrigin: axis === "x" ? ox : axis === "y" ? oy : "50% 50%",
+                          });
+                        }
+                      } else {
+                        s.el.style.filter = "";
+                        s.ghosts.forEach(function (g) {
+                          g.feOff.setAttribute("dx", "0");
+                          g.feOff.setAttribute("dy", "0");
+                          g.feGB.setAttribute("stdDeviation", "0 0");
+                        });
+                        s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                        if (stretchMax > 0) {
+                          gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                        }
+                      }
+
+                      s.prevX = x;
+                      s.prevY = y;
+                      s.prevTime = time;
+                    } else if (dt < -0.0005) {
+                      s.el.style.filter = "";
+                      s.ghosts.forEach(function (g) {
+                        g.feOff.setAttribute("dx", "0");
+                        g.feOff.setAttribute("dy", "0");
+                        g.feGB.setAttribute("stdDeviation", "0 0");
+                      });
+                      s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                      if (stretchMax > 0) {
+                        gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                      }
+                      s.prevX = x;
+                      s.prevY = y;
+                      s.prevTime = time;
+                    }
+                    // dt ≈ 0: double-fire — skip.
+                  });
+                },
+              },
+              0,
+            );
+          };
+
+          var tl = gsap.timeline({ paused: true });
+
+          gsap.set(["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"], {
+            x: -400,
+          });
+
+          tl.to(["#s1", "#t1"], { x: 1640, duration: 3.0, ease: "power3.inOut" }, 0);
+          tl.to(["#s2", "#t2"], { x: 1640, duration: 1.5, ease: "power3.inOut" }, 0);
+          tl.to(["#s3", "#t3"], { x: 1640, duration: 0.7, ease: "power3.inOut" }, 0);
+          tl.to(["#s4", "#t4"], { x: 1640, duration: 0.35, ease: "power3.inOut" }, 0);
+          tl.to(["#s5", "#t5"], { x: 1640, duration: 0.2, ease: "power3.inOut" }, 0);
+
+          tl.set(document.body, {}, 4);
+
+          attachMotionBlur(
+            ["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"],
+            tl,
+            { axis: "x", blurMax: 80, stretchMax: 0 },
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["motion-blur-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/motion-blur/motion-blur.html b/registry/components/motion-blur/motion-blur.html
new file mode 100644
index 000000000..5dc5336ec
--- /dev/null
+++ b/registry/components/motion-blur/motion-blur.html
@@ -0,0 +1,255 @@
+<!--
+  Motion Blur — velocity-driven directional motion blur.
+
+  Usage: paste this snippet into your composition, then call
+  attachMotionBlur() with any element animated by your GSAP timeline.
+
+  The snippet hooks into the timeline's onUpdate callback, tracks the
+  GSAP x/y position of each target frame-by-frame, and applies:
+    1. Ghost copies of the element at increasing backward offsets with
+       decreasing opacity — inherently one-sided, no forward blur component.
+    2. A small Gaussian blur at the current position so the element looks
+       in-motion (blurry) rather than sharp on top of the trail.
+    3. An optional scaleX/Y stretch in the direction of travel (off by
+       default; enable via stretchMax > 0 if you want the effect).
+
+  Both effects clear automatically when the element decelerates to rest.
+
+  Requirements:
+  - Elements must be animated via GSAP x/y (transform), not left/top.
+  - Call attachMotionBlur() AFTER defining all tweens, before
+    window.__timelines registration.
+  - GSAP must be loaded before this snippet executes.
+
+  API:
+    attachMotionBlur(selector, timeline, options?)
+
+  Options:
+    blurScale     — directional blur per px/s of velocity (default 0.008)
+    blurMax       — max blur radius on the motion axis in px (default 20)
+    stretchScale  — scaleX/Y added per px/s (default 0.0002)
+    stretchMax    — max stretch factor above 1.0 (default 0, disabled)
+    axis          — "x" | "y" | "both" (default "both")
+-->
+
+<script>
+  (function () {
+    if (!window._hfMbUid) window._hfMbUid = 0;
+
+    window.attachMotionBlur = function (selector, tl, opts) {
+      opts = opts || {};
+      var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;
+      var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;
+      var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;
+      var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;
+      var axis = opts.axis || "both";
+
+      var items = Array.isArray(selector) ? selector : [selector];
+      var targets = items.reduce(function (acc, s) {
+        if (typeof s === "string") {
+          document.querySelectorAll(s).forEach(function (el) {
+            acc.push(el);
+          });
+        } else if (s instanceof Element) {
+          acc.push(s);
+        }
+        return acc;
+      }, []);
+
+      // One SVG filter per target. Ghost copies placed behind → inherently one-sided.
+      // Small top Gaussian makes element look blurry at current position, not sharp.
+      var ns = "http://www.w3.org/2000/svg";
+      var GHOST_CFG = [
+        { frac: 0.25, slope: 0.55 },
+        { frac: 0.55, slope: 0.28 },
+        { frac: 1.0, slope: 0.1 },
+      ];
+
+      var state = targets.map(function (el) {
+        var uid = "hf-mb-" + window._hfMbUid++;
+        var svg = document.createElementNS(ns, "svg");
+        svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden;");
+
+        var filter = document.createElementNS(ns, "filter");
+        filter.id = uid;
+        filter.setAttribute("x", "-110%");
+        filter.setAttribute("y", "-25%");
+        filter.setAttribute("width", "260%");
+        filter.setAttribute("height", "150%");
+
+        var ghosts = GHOST_CFG.map(function (cfg, gi) {
+          var feOff = document.createElementNS(ns, "feOffset");
+          feOff.setAttribute("in", "SourceGraphic");
+          feOff.setAttribute("dx", "0");
+          feOff.setAttribute("dy", "0");
+          feOff.setAttribute("result", "go" + gi);
+
+          var feGB = document.createElementNS(ns, "feGaussianBlur");
+          feGB.setAttribute("in", "go" + gi);
+          feGB.setAttribute("stdDeviation", "0 0");
+          feGB.setAttribute("result", "gb" + gi);
+
+          var feCT = document.createElementNS(ns, "feComponentTransfer");
+          feCT.setAttribute("in", "gb" + gi);
+          feCT.setAttribute("result", "gf" + gi);
+          var feFuncA = document.createElementNS(ns, "feFuncA");
+          feFuncA.setAttribute("type", "linear");
+          feFuncA.setAttribute("slope", String(cfg.slope));
+          feCT.appendChild(feFuncA);
+
+          filter.appendChild(feOff);
+          filter.appendChild(feGB);
+          filter.appendChild(feCT);
+          return { feOff: feOff, feGB: feGB, frac: cfg.frac };
+        });
+
+        var feTopBlur = document.createElementNS(ns, "feGaussianBlur");
+        feTopBlur.setAttribute("in", "SourceGraphic");
+        feTopBlur.setAttribute("stdDeviation", "0 0");
+        feTopBlur.setAttribute("result", "top");
+        filter.appendChild(feTopBlur);
+
+        var feMerge = document.createElementNS(ns, "feMerge");
+        for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {
+          var mn = document.createElementNS(ns, "feMergeNode");
+          mn.setAttribute("in", "gf" + mi);
+          feMerge.appendChild(mn);
+        }
+        var mnTop = document.createElementNS(ns, "feMergeNode");
+        mnTop.setAttribute("in", "top");
+        feMerge.appendChild(mnTop);
+        filter.appendChild(feMerge);
+
+        svg.appendChild(filter);
+        document.body.appendChild(svg);
+
+        return {
+          el: el,
+          ghosts: ghosts,
+          feTopBlur: feTopBlur,
+          filterId: uid,
+          prevX: parseFloat(gsap.getProperty(el, "x")) || 0,
+          prevY: parseFloat(gsap.getProperty(el, "y")) || 0,
+          prevTime: tl.time(),
+        };
+      });
+
+      // tl.eventCallback("onUpdate") is not available in the HyperFrames renderer —
+      // the runtime proxies the timeline object. Tween onUpdate fires on every seek.
+      var _proxy = { t: 0 };
+      tl.to(
+        _proxy,
+        {
+          t: 1,
+          duration: Math.max(tl.duration(), 0.1),
+          ease: "none",
+          onUpdate: function () {
+            var time = tl.time();
+
+            state.forEach(function (s) {
+              var x = parseFloat(gsap.getProperty(s.el, "x")) || 0;
+              var y = parseFloat(gsap.getProperty(s.el, "y")) || 0;
+              var dt = time - s.prevTime;
+
+              if (dt > 0.0005) {
+                var vx = axis !== "y" ? (x - s.prevX) / dt : 0;
+                var vy = axis !== "x" ? (y - s.prevY) / dt : 0;
+
+                var bx = Math.min(Math.abs(vx) * blurScale, blurMax);
+                var by = Math.min(Math.abs(vy) * blurScale, blurMax);
+                var bxFinal = axis !== "y" ? bx : Math.max(by * 0.08, 0.4);
+                var byFinal = axis !== "x" ? by : Math.max(bx * 0.08, 0.4);
+                var active = bx > 0.3 || by > 0.3;
+
+                if (active) {
+                  s.el.style.filter = "url(#" + s.filterId + ")";
+                  s.ghosts.forEach(function (g) {
+                    var dx = axis !== "y" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;
+                    var dy = axis !== "x" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;
+                    g.feOff.setAttribute("dx", dx.toFixed(2));
+                    g.feOff.setAttribute("dy", dy.toFixed(2));
+                    var gbx =
+                      axis !== "y"
+                        ? (bxFinal * g.frac * 0.5).toFixed(2)
+                        : Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);
+                    var gby =
+                      axis !== "x"
+                        ? (byFinal * g.frac * 0.5).toFixed(2)
+                        : Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);
+                    g.feGB.setAttribute("stdDeviation", gbx + " " + gby);
+                  });
+                  s.feTopBlur.setAttribute(
+                    "stdDeviation",
+                    (bxFinal * 0.15).toFixed(2) + " " + (byFinal * 0.15).toFixed(2),
+                  );
+
+                  if (stretchMax > 0) {
+                    var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);
+                    var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);
+                    var ox = axis !== "y" ? (vx >= 0 ? "100% 50%" : "0% 50%") : "50% 50%";
+                    var oy = axis !== "x" ? (vy >= 0 ? "50% 100%" : "50% 0%") : "50% 50%";
+                    gsap.set(s.el, {
+                      scaleX: axis !== "y" ? sx : 1,
+                      scaleY: axis !== "x" ? sy : 1,
+                      transformOrigin: axis === "x" ? ox : axis === "y" ? oy : "50% 50%",
+                    });
+                  }
+                } else {
+                  s.el.style.filter = "";
+                  s.ghosts.forEach(function (g) {
+                    g.feOff.setAttribute("dx", "0");
+                    g.feOff.setAttribute("dy", "0");
+                    g.feGB.setAttribute("stdDeviation", "0 0");
+                  });
+                  s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                  if (stretchMax > 0) {
+                    gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                  }
+                }
+
+                s.prevX = x;
+                s.prevY = y;
+                s.prevTime = time;
+              } else if (dt < -0.0005) {
+                s.el.style.filter = "";
+                s.ghosts.forEach(function (g) {
+                  g.feOff.setAttribute("dx", "0");
+                  g.feOff.setAttribute("dy", "0");
+                  g.feGB.setAttribute("stdDeviation", "0 0");
+                });
+                s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                if (stretchMax > 0) {
+                  gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                }
+                s.prevX = x;
+                s.prevY = y;
+                s.prevTime = time;
+              }
+              // dt ≈ 0: double-fire — skip.
+            });
+          },
+        },
+        0,
+      );
+    };
+  })();
+</script>
+
+<!--
+  Timeline integration example:
+
+  const tl = gsap.timeline({ paused: true });
+
+  tl.fromTo("#my-box", { x: -100 }, { x: 1700, duration: 1.2, ease: "power3.inOut" }, 0.5);
+
+  // Extend to data-duration so seeks past the last tween reach the blur callback.
+  tl.set(document.body, {}, DATA_DURATION);
+
+  // Call AFTER tweens, BEFORE window.__timelines registration.
+  // attachMotionBlur adds a tracking tween with onUpdate — must be called after
+  // tl.set()/tl.to() have established the final timeline duration.
+  attachMotionBlur("#my-box", tl, { axis: "x" });
+
+  window.__timelines = window.__timelines || {};
+  window.__timelines["my-composition"] = tl;
+-->
diff --git a/registry/components/motion-blur/registry-item.json b/registry/components/motion-blur/registry-item.json
new file mode 100644
index 000000000..ba73fe60a
--- /dev/null
+++ b/registry/components/motion-blur/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "motion-blur",
+  "type": "hyperframes:component",
+  "title": "Motion Blur",
+  "description": "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed",
+  "tags": ["effect", "motion-blur", "velocity", "animation", "physics"],
+  "files": [
+    {
+      "path": "motion-blur.html",
+      "target": "compositions/components/motion-blur.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png"
+  }
+}
diff --git a/registry/examples/motion-blur/index.html b/registry/examples/motion-blur/index.html
new file mode 100644
index 000000000..557ae0cb8
--- /dev/null
+++ b/registry/examples/motion-blur/index.html
@@ -0,0 +1,564 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Motion Blur — Velocity Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #06060a;
+      }
+
+      #comp {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", ui-monospace, monospace;
+        background: #06060a;
+      }
+
+      .header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        display: flex;
+        align-items: flex-end;
+        padding: 0 72px 20px;
+        border-bottom: 1px solid #0f0f18;
+      }
+      .header-title {
+        font-size: 11px;
+        letter-spacing: 0.4em;
+        text-transform: uppercase;
+        color: #1e1e2a;
+      }
+      .header-sub {
+        margin-left: auto;
+        font-size: 11px;
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        color: #14141c;
+      }
+
+      /* Each group = one speed level, containing a shape row + text row */
+      .group {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 184px; /* 72 + 16 + 72 + 24 bottom */
+      }
+
+      /* Group bottom separator */
+      .group::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 72px;
+        right: 72px;
+        height: 1px;
+        background: #0d0d15;
+      }
+
+      /* Duration label — left, spanning both rows */
+      .dur {
+        position: absolute;
+        left: 72px;
+        top: 0;
+        width: 90px;
+        height: 160px; /* 72+16+72 */
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .dur-num {
+        font-size: 28px;
+        font-weight: 700;
+        letter-spacing: -0.04em;
+        color: #fff;
+        line-height: 1;
+      }
+      .dur-unit {
+        font-size: 9px;
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        color: #252532;
+        margin-top: 5px;
+      }
+
+      /* Row-type hint ("shape" / "text") — right of dur label */
+      .row-hint {
+        position: absolute;
+        left: 176px;
+        width: 44px;
+        height: 72px;
+        display: flex;
+        align-items: center;
+        font-size: 8px;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: #161620;
+      }
+
+      /* Speed label — right, spanning both rows */
+      .spd {
+        position: absolute;
+        right: 72px;
+        top: 0;
+        width: 100px;
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-end;
+      }
+      .spd-label {
+        font-size: 10px;
+        letter-spacing: 0.3em;
+        text-transform: uppercase;
+        color: #181822;
+      }
+
+      /* Animated elements — both types live at left:0, GSAP drives x */
+      .pill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 200px;
+        height: 72px;
+        border-radius: 36px;
+        will-change: transform, filter;
+      }
+
+      .word {
+        position: absolute;
+        left: 0;
+        top: 88px; /* 72 + 16 gap */
+        height: 72px;
+        line-height: 72px;
+        white-space: nowrap;
+        font-size: 56px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        will-change: transform, filter;
+      }
+
+      /* Inner divider between shape row and text row */
+      .inner-div {
+        position: absolute;
+        left: 220px;
+        right: 200px;
+        top: 80px; /* 72 + 8 */
+        height: 1px;
+        background: #0a0a12;
+      }
+
+      /* Track guide lines */
+      .track-a,
+      .track-b {
+        position: absolute;
+        left: 220px;
+        right: 200px;
+        height: 1px;
+        background: #0c0c14;
+      }
+      .track-a {
+        top: 35px;
+      } /* center of shape row */
+      .track-b {
+        top: 123px;
+      } /* 88 + 35 = center of text row */
+    </style>
+  </head>
+  <body>
+    <div
+      id="comp"
+      data-composition-id="motion-blur-example"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4"
+    >
+      <div class="header">
+        <span class="header-title">Motion Blur — Velocity Showcase</span>
+        <span class="header-sub">feGaussianBlur + scaleX · blur ∝ velocity</span>
+      </div>
+
+      <!-- Group 1: 3.0s slow — top: 80 -->
+      <div class="group" style="top: 80px">
+        <div class="dur"><span class="dur-num">3.0</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s1"
+          style="
+            background: linear-gradient(135deg, #60a5fa, #2563eb);
+            box-shadow: 0 0 32px rgba(96, 165, 250, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t1"
+          style="color: #3b82f6; text-shadow: 0 0 40px rgba(96, 165, 250, 0.3)"
+        >
+          DRIFT
+        </div>
+        <div class="spd"><span class="spd-label">slow</span></div>
+      </div>
+
+      <!-- Group 2: 1.5s medium — top: 264 -->
+      <div class="group" style="top: 264px">
+        <div class="dur"><span class="dur-num">1.5</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s2"
+          style="
+            background: linear-gradient(135deg, #34d399, #059669);
+            box-shadow: 0 0 32px rgba(52, 211, 153, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t2"
+          style="color: #10b981; text-shadow: 0 0 40px rgba(52, 211, 153, 0.3)"
+        >
+          GLIDE
+        </div>
+        <div class="spd"><span class="spd-label">medium</span></div>
+      </div>
+
+      <!-- Group 3: 0.7s fast — top: 448 -->
+      <div class="group" style="top: 448px">
+        <div class="dur"><span class="dur-num">0.7</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s3"
+          style="
+            background: linear-gradient(135deg, #c084fc, #7c3aed);
+            box-shadow: 0 0 32px rgba(192, 132, 252, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t3"
+          style="color: #a855f7; text-shadow: 0 0 40px rgba(192, 132, 252, 0.3)"
+        >
+          RUSH
+        </div>
+        <div class="spd"><span class="spd-label">fast</span></div>
+      </div>
+
+      <!-- Group 4: 0.35s faster — top: 632 -->
+      <div class="group" style="top: 632px">
+        <div class="dur">
+          <span class="dur-num">0.35</span><span class="dur-unit">seconds</span>
+        </div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s4"
+          style="
+            background: linear-gradient(135deg, #fb923c, #ea580c);
+            box-shadow: 0 0 32px rgba(251, 146, 60, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t4"
+          style="color: #f97316; text-shadow: 0 0 40px rgba(251, 146, 60, 0.3)"
+        >
+          BLAST
+        </div>
+        <div class="spd"><span class="spd-label">faster</span></div>
+      </div>
+
+      <!-- Group 5: 0.2s extreme — top: 816 -->
+      <div class="group" style="top: 816px">
+        <div class="dur"><span class="dur-num">0.2</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div
+          class="pill"
+          id="s5"
+          style="
+            background: linear-gradient(135deg, #f87171, #dc2626);
+            box-shadow: 0 0 32px rgba(248, 113, 113, 0.18);
+          "
+        ></div>
+        <div
+          class="word"
+          id="t5"
+          style="color: #ef4444; text-shadow: 0 0 40px rgba(248, 113, 113, 0.3)"
+        >
+          WARP
+        </div>
+        <div class="spd"><span class="spd-label">extreme</span></div>
+      </div>
+
+      <script>
+        (function () {
+          /* ── attachMotionBlur ─────────────────────────────────────── */
+          if (!window._hfMbUid) window._hfMbUid = 0;
+          var ns = "http://www.w3.org/2000/svg";
+
+          function attachMotionBlur(selector, tl, opts) {
+            opts = opts || {};
+            var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;
+            var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;
+            var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;
+            var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;
+            var axis = opts.axis || "both";
+
+            var items = Array.isArray(selector) ? selector : [selector];
+            var targets = items.reduce(function (acc, s) {
+              if (typeof s === "string") {
+                document.querySelectorAll(s).forEach(function (el) {
+                  acc.push(el);
+                });
+              } else if (s instanceof Element) {
+                acc.push(s);
+              }
+              return acc;
+            }, []);
+
+            // Ghost trail: copies placed only behind the element → inherently one-sided.
+            // Top layer: small Gaussian at current position so element looks blurry, not sharp.
+            var GHOST_CFG = [
+              { frac: 0.25, slope: 0.55 },
+              { frac: 0.55, slope: 0.28 },
+              { frac: 1.0, slope: 0.1 },
+            ];
+
+            var state = targets.map(function (el) {
+              var uid = "hf-mb-" + window._hfMbUid++;
+              var svg = document.createElementNS(ns, "svg");
+              svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden;");
+
+              var filter = document.createElementNS(ns, "filter");
+              filter.id = uid;
+              filter.setAttribute("x", "-110%");
+              filter.setAttribute("y", "-25%");
+              filter.setAttribute("width", "260%");
+              filter.setAttribute("height", "150%");
+
+              var ghosts = GHOST_CFG.map(function (cfg, gi) {
+                var feOff = document.createElementNS(ns, "feOffset");
+                feOff.setAttribute("in", "SourceGraphic");
+                feOff.setAttribute("dx", "0");
+                feOff.setAttribute("dy", "0");
+                feOff.setAttribute("result", "go" + gi);
+
+                var feGB = document.createElementNS(ns, "feGaussianBlur");
+                feGB.setAttribute("in", "go" + gi);
+                feGB.setAttribute("stdDeviation", "0 0");
+                feGB.setAttribute("result", "gb" + gi);
+
+                var feCT = document.createElementNS(ns, "feComponentTransfer");
+                feCT.setAttribute("in", "gb" + gi);
+                feCT.setAttribute("result", "gf" + gi);
+                var feFuncA = document.createElementNS(ns, "feFuncA");
+                feFuncA.setAttribute("type", "linear");
+                feFuncA.setAttribute("slope", String(cfg.slope));
+                feCT.appendChild(feFuncA);
+
+                filter.appendChild(feOff);
+                filter.appendChild(feGB);
+                filter.appendChild(feCT);
+                return { feOff: feOff, feGB: feGB, frac: cfg.frac };
+              });
+
+              var feTopBlur = document.createElementNS(ns, "feGaussianBlur");
+              feTopBlur.setAttribute("in", "SourceGraphic");
+              feTopBlur.setAttribute("stdDeviation", "0 0");
+              feTopBlur.setAttribute("result", "top");
+              filter.appendChild(feTopBlur);
+
+              var feMerge = document.createElementNS(ns, "feMerge");
+              for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {
+                var mn = document.createElementNS(ns, "feMergeNode");
+                mn.setAttribute("in", "gf" + mi);
+                feMerge.appendChild(mn);
+              }
+              var mnTop = document.createElementNS(ns, "feMergeNode");
+              mnTop.setAttribute("in", "top");
+              feMerge.appendChild(mnTop);
+              filter.appendChild(feMerge);
+
+              svg.appendChild(filter);
+              document.body.appendChild(svg);
+
+              return {
+                el: el,
+                ghosts: ghosts,
+                feTopBlur: feTopBlur,
+                filterId: uid,
+                prevX: parseFloat(gsap.getProperty(el, "x")) || 0,
+                prevY: parseFloat(gsap.getProperty(el, "y")) || 0,
+                prevTime: tl.time(),
+              };
+            });
+
+            // tl.eventCallback("onUpdate") is not available in the HyperFrames renderer —
+            // the runtime proxies the timeline. Tween onUpdate fires on every seek instead.
+            var _proxy = { t: 0 };
+            tl.to(
+              _proxy,
+              {
+                t: 1,
+                duration: Math.max(tl.duration(), 0.1),
+                ease: "none",
+                onUpdate: function () {
+                  var time = tl.time();
+
+                  state.forEach(function (s) {
+                    var x = parseFloat(gsap.getProperty(s.el, "x")) || 0;
+                    var y = parseFloat(gsap.getProperty(s.el, "y")) || 0;
+                    var dt = time - s.prevTime;
+
+                    if (dt > 0.0005) {
+                      var vx = axis !== "y" ? (x - s.prevX) / dt : 0;
+                      var vy = axis !== "x" ? (y - s.prevY) / dt : 0;
+
+                      var bx = Math.min(Math.abs(vx) * blurScale, blurMax);
+                      var by = Math.min(Math.abs(vy) * blurScale, blurMax);
+                      var bxFinal = axis !== "y" ? bx : Math.max(by * 0.08, 0.4);
+                      var byFinal = axis !== "x" ? by : Math.max(bx * 0.08, 0.4);
+                      var active = bx > 0.3 || by > 0.3;
+
+                      if (active) {
+                        s.el.style.filter = "url(#" + s.filterId + ")";
+                        s.ghosts.forEach(function (g) {
+                          var dx =
+                            axis !== "y" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;
+                          var dy =
+                            axis !== "x" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;
+                          g.feOff.setAttribute("dx", dx.toFixed(2));
+                          g.feOff.setAttribute("dy", dy.toFixed(2));
+                          var gbx =
+                            axis !== "y"
+                              ? (bxFinal * g.frac * 0.5).toFixed(2)
+                              : Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);
+                          var gby =
+                            axis !== "x"
+                              ? (byFinal * g.frac * 0.5).toFixed(2)
+                              : Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);
+                          g.feGB.setAttribute("stdDeviation", gbx + " " + gby);
+                        });
+                        s.feTopBlur.setAttribute(
+                          "stdDeviation",
+                          (bxFinal * 0.15).toFixed(2) + " " + (byFinal * 0.15).toFixed(2),
+                        );
+                        if (stretchMax > 0) {
+                          var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);
+                          var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);
+                          var ox = axis !== "y" ? (vx >= 0 ? "100% 50%" : "0% 50%") : "50% 50%";
+                          var oy = axis !== "x" ? (vy >= 0 ? "50% 100%" : "50% 0%") : "50% 50%";
+                          gsap.set(s.el, {
+                            scaleX: axis !== "y" ? sx : 1,
+                            scaleY: axis !== "x" ? sy : 1,
+                            transformOrigin: axis === "x" ? ox : axis === "y" ? oy : "50% 50%",
+                          });
+                        }
+                      } else {
+                        s.el.style.filter = "";
+                        s.ghosts.forEach(function (g) {
+                          g.feOff.setAttribute("dx", "0");
+                          g.feOff.setAttribute("dy", "0");
+                          g.feGB.setAttribute("stdDeviation", "0 0");
+                        });
+                        s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                        if (stretchMax > 0) {
+                          gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                        }
+                      }
+
+                      s.prevX = x;
+                      s.prevY = y;
+                      s.prevTime = time;
+                    } else if (dt < -0.0005) {
+                      s.el.style.filter = "";
+                      s.ghosts.forEach(function (g) {
+                        g.feOff.setAttribute("dx", "0");
+                        g.feOff.setAttribute("dy", "0");
+                        g.feGB.setAttribute("stdDeviation", "0 0");
+                      });
+                      s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                      if (stretchMax > 0) {
+                        gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                      }
+                      s.prevX = x;
+                      s.prevY = y;
+                      s.prevTime = time;
+                    }
+                    // dt ≈ 0: runtime double-fires — skip.
+                  });
+                },
+              },
+              0,
+            );
+          }
+
+          /* ── Timeline ─────────────────────────────────────────────── */
+          var tl = gsap.timeline({ paused: true });
+
+          // All elements start at x=-400 (off-screen left), travel to x=1920 (off-screen right).
+          // Shape + text in each group share the same duration → same velocity → same blur.
+          gsap.set(["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"], {
+            x: -400,
+          });
+
+          tl.to(["#s1", "#t1"], { x: 1640, duration: 3.0, ease: "power3.inOut" }, 0);
+          tl.to(["#s2", "#t2"], { x: 1640, duration: 1.5, ease: "power3.inOut" }, 0);
+          tl.to(["#s3", "#t3"], { x: 1640, duration: 0.7, ease: "power3.inOut" }, 0);
+          tl.to(["#s4", "#t4"], { x: 1640, duration: 0.35, ease: "power3.inOut" }, 0);
+          tl.to(["#s5", "#t5"], { x: 1640, duration: 0.2, ease: "power3.inOut" }, 0);
+
+          tl.set(document.body, {}, 4);
+
+          attachMotionBlur(
+            ["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"],
+            tl,
+            { axis: "x", blurMax: 80, stretchMax: 0 },
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["motion-blur-example"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/registry.json b/registry/registry.json
index baed2b259..2a7d5c1e5 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -83,6 +83,10 @@
       "name": "grid-pixelate-wipe",
       "type": "hyperframes:component"
     },
+    {
+      "name": "motion-blur",
+      "type": "hyperframes:component"
+    },
     {
       "name": "texture-mask-text",
       "type": "hyperframes:component"