diff --git a/.gitignore b/.gitignore
index a9a51017..cade4306 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,12 @@ dist/
 .DS_Store
 Thumbs.db
 
+# Docs media — served from CDN, not committed.
+# Regenerate with scripts/generate-{catalog,template}-previews.ts then upload
+# with `bun run upload:docs-images`. Add explicit negations below for any
+# non-generated assets (logos, svgs) that should stay in the repo.
+docs/images/
+
 # IDE
 .vscode/
 .idea/
diff --git a/README.md b/README.md
index 23cc8e4c..57d44d03 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@
 <p align="center"><b>Write HTML. Render video. Built for agents.</b></p>
 
 <p align="center">
-  <img src="docs/images/readme-demo.gif" alt="HyperFrames demo — HTML code on the left transforms into a rendered video on the right" width="800">
+  <img src="https://static.heygen.ai/hyperframes-oss/docs/images/readme-demo.gif" alt="HyperFrames demo — HTML code on the left transforms into a rendered video on the right" width="800">
 </p>
 
 Hyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI agents.
diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index d7ce8127..640804ad 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -9,7 +9,7 @@ Fitness app product showcase with three floating smartphone screens
 
 `showcase` `app` `3d`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/app-showcase.mp4" poster="/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index a41df6e8..a4f235d2 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -9,7 +9,7 @@ Shader transition with chromatic aberration radial split
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/chromatic-radial-split.mp4" poster="/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index 45bbf34d..f8eb1060 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -9,7 +9,7 @@ Shader transition with dramatic zoom blur
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/cinematic-zoom.mp4" poster="/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index a9e50fc9..ab7ee688 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -9,7 +9,7 @@ Shader transition with cross-warped morphing
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/cross-warp-morph.mp4" poster="/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index 234dbc7d..9e580477 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -9,7 +9,7 @@ Animated bar + line chart with staggered reveal, NYT-style typography, and value
 
 `data` `chart` `statistics`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/data-chart.mp4" poster="/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index a2dbd40c..18b9a5bb 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -9,7 +9,7 @@ Shader transition with fractal noise domain warping
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/domain-warp-dissolve.mp4" poster="/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index 88185094..e57d89f8 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -9,7 +9,7 @@ Shader transition with white flash crossfade
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/flash-through-white.mp4" poster="/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 1fe26898..690c255c 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -9,7 +9,7 @@ Animated decision tree with SVG connectors, sticky-note nodes, cursor interactio
 
 `diagram` `flowchart` `interactive`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/flowchart.mp4" poster="/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index 34546555..c56d507d 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -9,7 +9,7 @@ Shader transition with digital glitch artifacts
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/glitch.mp4" poster="/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index e2fbb8fa..dd651033 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -9,7 +9,7 @@ Shader transition with gravitational lensing distortion
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/gravitational-lens.mp4" poster="/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index 094af8f7..c74b2b83 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -9,7 +9,7 @@ Animated Instagram follow overlay with profile card and follow button
 
 `social` `overlay` `instagram`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/instagram-follow.mp4" poster="/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index a9fe89bb..57ec5079 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -9,7 +9,7 @@ Shader transition with cinematic light leak overlay
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/light-leak.mp4" poster="/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index 8af2ca51..3cf9abe0 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -9,7 +9,7 @@ Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in,
 
 `branding` `outro` `logo`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/logo-outro.mp4" poster="/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index 44f0bc82..3e5409f0 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -9,7 +9,7 @@ Animated macOS-style notification banner with app icon and message
 
 `social` `overlay` `notification`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/macos-notification.mp4" poster="/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index d8048014..1f4c7bc7 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -9,7 +9,7 @@ Animated Reddit post card overlay with upvotes and comments
 
 `social` `overlay` `reddit`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/reddit-post.mp4" poster="/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index e7148d50..c7fc61c5 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -9,7 +9,7 @@ Shader transition with ridged turbulence burn effect
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ridged-burn.mp4" poster="/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index 4b3f1a9f..09acb6cb 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -9,7 +9,7 @@ Shader transition with concentric ripple wave distortion
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ripple-waves.mp4" poster="/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index 70654342..01fbd517 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -9,7 +9,7 @@ Shader transition with signed distance field iris reveal
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/sdf-iris.mp4" poster="/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index f955d071..9dcef7fe 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -9,7 +9,7 @@ Animated Spotify now-playing card with album art and progress bar
 
 `social` `overlay` `spotify`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/spotify-card.mp4" poster="/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index eae5c23c..622e07d8 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -9,7 +9,7 @@ Shader transition with swirling vortex distortion
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/swirl-vortex.mp4" poster="/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index 9a33e269..ffa8d513 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -9,7 +9,7 @@ Shader transition with heat haze thermal distortion
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/thermal-distortion.mp4" poster="/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index 7f71f212..e68a7873 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -9,7 +9,7 @@ Animated TikTok follow overlay with profile card and follow button
 
 `social` `overlay` `tiktok`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/tiktok-follow.mp4" poster="/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index 9cd2226b..67b015bf 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -9,7 +9,7 @@ Showcase of 3D perspective flip and rotate transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-3d.mp4" poster="/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index db9a7726..d09dd1d8 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -9,7 +9,7 @@ Showcase of blur-based transitions between scenes
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-blur.mp4" poster="/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index 599414c6..e22448ce 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -9,7 +9,7 @@ Showcase of cover/uncover slide transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-cover.mp4" poster="/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index b52bd369..e3598f8a 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -9,7 +9,7 @@ Showcase of destructive break-apart transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-destruction.mp4" poster="/images/catalog/blocks/transitions-destruction.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index 17a74847..f49f24e3 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -9,7 +9,7 @@ Showcase of dissolve and fade transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-dissolve.mp4" poster="/images/catalog/blocks/transitions-dissolve.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index 9324eba7..9d57d74e 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -9,7 +9,7 @@ Showcase of warp and distortion transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-distortion.mp4" poster="/images/catalog/blocks/transitions-distortion.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index 34a82e49..4cb164ec 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -9,7 +9,7 @@ Showcase of grid-based tile transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-grid.mp4" poster="/images/catalog/blocks/transitions-grid.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index 01c8a3d8..74b2ea1a 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -9,7 +9,7 @@ Showcase of light-based glow and flash transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-light.mp4" poster="/images/catalog/blocks/transitions-light.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index 3ac41471..0553b381 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -9,7 +9,7 @@ Showcase of mechanical shutter and iris transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-mechanical.mp4" poster="/images/catalog/blocks/transitions-mechanical.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index 245de271..bd7f4417 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -9,7 +9,7 @@ Showcase of miscellaneous creative transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-other.mp4" poster="/images/catalog/blocks/transitions-other.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index b5db88ef..aabd0fd5 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -9,7 +9,7 @@ Showcase of push and slide transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-push.mp4" poster="/images/catalog/blocks/transitions-push.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index 6443f00a..3bde01c6 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -9,7 +9,7 @@ Showcase of radial wipe and reveal transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-radial.mp4" poster="/images/catalog/blocks/transitions-radial.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index 01585a1e..080035ba 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -9,7 +9,7 @@ Showcase of scale and zoom transitions
 
 `transition` `showcase`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-scale.mp4" poster="/images/catalog/blocks/transitions-scale.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index eb2ae631..4b981de5 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -9,7 +9,7 @@ Perspective 3D reveal animation for UI elements
 
 `showcase` `3d` `reveal`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ui-3d-reveal.mp4" poster="/images/catalog/blocks/ui-3d-reveal.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index 47ba9a50..c0f6dba9 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -9,7 +9,7 @@ Shader transition simulating a fast camera whip pan
 
 `transition` `shader`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/whip-pan.mp4" poster="/images/catalog/blocks/whip-pan.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index ea6a2b10..dfd0c8b0 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -9,7 +9,7 @@ Animated X/Twitter post card overlay with engagement metrics
 
 `social` `overlay` `twitter`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/x-post.mp4" poster="/images/catalog/blocks/x-post.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index b161410f..e0843d63 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -9,7 +9,7 @@ Animated YouTube subscribe lower third with avatar and channel info
 
 `social` `overlay` `youtube`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/yt-lower-third.mp4" poster="/images/catalog/blocks/yt-lower-third.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index 2096e0e9..fbd79369 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -9,7 +9,7 @@ Animated film grain texture overlay using CSS keyframes — adds warmth and anal
 
 `texture` `grain` `overlay` `film`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/components/grain-overlay.mp4" poster="/images/catalog/components/grain-overlay.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index 7a64fa63..c9a72d67 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -9,7 +9,7 @@ Transition effect where the screen dissolves into a grid of squares that fade ou
 
 `transition` `wipe` `grid` `pixelate`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/components/grid-pixelate-wipe.mp4" poster="/images/catalog/components/grid-pixelate-wipe.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index ad60787f..0738ccb2 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -9,7 +9,7 @@ Animated light sweep across text or elements using a CSS gradient mask — ideal
 
 `text` `shimmer` `highlight` `effect`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/components/shimmer-sweep.mp4" poster="/images/catalog/components/shimmer-sweep.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/examples.mdx b/docs/examples.mdx
index 7272ca6d..06ffcbe9 100644
--- a/docs/examples.mdx
+++ b/docs/examples.mdx
@@ -13,31 +13,31 @@ npx hyperframes init my-video --example <name>
 
 <div className="not-prose grid grid-cols-2 gap-4 my-6">
   <div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
-    <video className="w-full aspect-video object-cover block" src="/images/templates/warm-grain.mp4" poster="/images/templates/warm-grain.png" muted loop playsInline preload="metadata" />
+    <video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/warm-grain.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/warm-grain.png" muted loop playsInline preload="metadata" />
     <div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.7))"}}><strong className="text-sm font-semibold text-white block">Warm Grain</strong><span className="text-xs text-zinc-300">Branding & lifestyle</span></div>
   </div>
   <div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
-    <video className="w-full aspect-video object-cover block" src="/images/templates/play-mode.mp4" poster="/images/templates/play-mode.png" muted loop playsInline preload="metadata" />
+    <video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/play-mode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/play-mode.png" muted loop playsInline preload="metadata" />
     <div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Play Mode</strong><span className="text-xs text-zinc-300">Social media</span></div>
   </div>
   <div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
-    <video className="w-full aspect-video object-cover block" src="/images/templates/swiss-grid.mp4" poster="/images/templates/swiss-grid.png" muted loop playsInline preload="metadata" />
+    <video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/swiss-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/swiss-grid.png" muted loop playsInline preload="metadata" />
     <div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Swiss Grid</strong><span className="text-xs text-zinc-300">Corporate & technical</span></div>
   </div>
   <div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
-    <video className="w-full aspect-video object-cover block" src="/images/templates/kinetic-type.mp4" poster="/images/templates/kinetic-type.png" muted loop playsInline preload="metadata" />
+    <video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/kinetic-type.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/kinetic-type.png" muted loop playsInline preload="metadata" />
     <div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Kinetic Type</strong><span className="text-xs text-zinc-300">Promos & title cards</span></div>
   </div>
   <div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
-    <video className="w-full aspect-video object-cover block" src="/images/templates/decision-tree.mp4" poster="/images/templates/decision-tree.png" muted loop playsInline preload="metadata" />
+    <video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/decision-tree.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/decision-tree.png" muted loop playsInline preload="metadata" />
     <div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Decision Tree</strong><span className="text-xs text-zinc-300">Explainers & tutorials</span></div>
   </div>
   <div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
-    <video className="w-full aspect-video object-cover block" src="/images/templates/product-promo.mp4" poster="/images/templates/product-promo.png" muted loop playsInline preload="metadata" />
+    <video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/product-promo.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/product-promo.png" muted loop playsInline preload="metadata" />
     <div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Product Promo</strong><span className="text-xs text-zinc-300">Product showcases</span></div>
   </div>
   <div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
-    <video className="w-full aspect-video object-cover block" src="/images/templates/nyt-graph.mp4" poster="/images/templates/nyt-graph.png" muted loop playsInline preload="metadata" />
+    <video className="w-full aspect-video object-cover block" src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/nyt-graph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/nyt-graph.png" muted loop playsInline preload="metadata" />
     <div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">NYT Graph</strong><span className="text-xs text-zinc-300">Data stories</span></div>
   </div>
 </div>
@@ -46,7 +46,7 @@ npx hyperframes init my-video --example <name>
 
 <div className="not-prose grid grid-cols-3 gap-3 my-6">
   <div className="tpl-card relative rounded-xl overflow-hidden bg-zinc-900 transition-transform hover:-translate-y-0.5 hover:shadow-xl">
-    <video className="w-full object-cover block" style={{aspectRatio: "9/16"}} src="/images/templates/vignelli.mp4" poster="/images/templates/vignelli.png" muted loop playsInline preload="metadata" />
+    <video className="w-full object-cover block" style={{aspectRatio: "9/16"}} src="https://static.heygen.ai/hyperframes-oss/docs/images/templates/vignelli.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/templates/vignelli.png" muted loop playsInline preload="metadata" />
     <div className="absolute bottom-0 left-0 right-0 pt-6 pb-2 px-3" style={{background: "linear-gradient(transparent, rgba(0,0,0,0.75))"}}><strong className="text-sm font-semibold text-white block">Vignelli</strong><span className="text-xs text-zinc-300">Headlines & announcements</span></div>
   </div>
 </div>
diff --git a/docs/images/catalog/blocks/app-showcase.mp4 b/docs/images/catalog/blocks/app-showcase.mp4
deleted file mode 100644
index 149fcd6d..00000000
Binary files a/docs/images/catalog/blocks/app-showcase.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/app-showcase.png b/docs/images/catalog/blocks/app-showcase.png
deleted file mode 100644
index db51b030..00000000
Binary files a/docs/images/catalog/blocks/app-showcase.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/chromatic-radial-split.mp4 b/docs/images/catalog/blocks/chromatic-radial-split.mp4
deleted file mode 100644
index 59aa4314..00000000
Binary files a/docs/images/catalog/blocks/chromatic-radial-split.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/chromatic-radial-split.png b/docs/images/catalog/blocks/chromatic-radial-split.png
deleted file mode 100644
index 9588a63a..00000000
Binary files a/docs/images/catalog/blocks/chromatic-radial-split.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/cinematic-zoom.mp4 b/docs/images/catalog/blocks/cinematic-zoom.mp4
deleted file mode 100644
index 0964e7b4..00000000
Binary files a/docs/images/catalog/blocks/cinematic-zoom.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/cinematic-zoom.png b/docs/images/catalog/blocks/cinematic-zoom.png
deleted file mode 100644
index 62a1949e..00000000
Binary files a/docs/images/catalog/blocks/cinematic-zoom.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/cross-warp-morph.mp4 b/docs/images/catalog/blocks/cross-warp-morph.mp4
deleted file mode 100644
index 45994c22..00000000
Binary files a/docs/images/catalog/blocks/cross-warp-morph.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/cross-warp-morph.png b/docs/images/catalog/blocks/cross-warp-morph.png
deleted file mode 100644
index 61f59bf4..00000000
Binary files a/docs/images/catalog/blocks/cross-warp-morph.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/data-chart.mp4 b/docs/images/catalog/blocks/data-chart.mp4
deleted file mode 100644
index 5c5fa547..00000000
Binary files a/docs/images/catalog/blocks/data-chart.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/data-chart.png b/docs/images/catalog/blocks/data-chart.png
deleted file mode 100644
index 0eaee097..00000000
Binary files a/docs/images/catalog/blocks/data-chart.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/domain-warp-dissolve.mp4 b/docs/images/catalog/blocks/domain-warp-dissolve.mp4
deleted file mode 100644
index bc76915b..00000000
Binary files a/docs/images/catalog/blocks/domain-warp-dissolve.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/domain-warp-dissolve.png b/docs/images/catalog/blocks/domain-warp-dissolve.png
deleted file mode 100644
index f85cedb0..00000000
Binary files a/docs/images/catalog/blocks/domain-warp-dissolve.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/flash-through-white.mp4 b/docs/images/catalog/blocks/flash-through-white.mp4
deleted file mode 100644
index 72782cf2..00000000
Binary files a/docs/images/catalog/blocks/flash-through-white.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/flash-through-white.png b/docs/images/catalog/blocks/flash-through-white.png
deleted file mode 100644
index c40d9bef..00000000
Binary files a/docs/images/catalog/blocks/flash-through-white.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/flowchart.mp4 b/docs/images/catalog/blocks/flowchart.mp4
deleted file mode 100644
index 893fde0b..00000000
Binary files a/docs/images/catalog/blocks/flowchart.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/flowchart.png b/docs/images/catalog/blocks/flowchart.png
deleted file mode 100644
index 69cfa239..00000000
Binary files a/docs/images/catalog/blocks/flowchart.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/glitch.mp4 b/docs/images/catalog/blocks/glitch.mp4
deleted file mode 100644
index bb87b0bf..00000000
Binary files a/docs/images/catalog/blocks/glitch.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/glitch.png b/docs/images/catalog/blocks/glitch.png
deleted file mode 100644
index 025a91d7..00000000
Binary files a/docs/images/catalog/blocks/glitch.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/gravitational-lens.mp4 b/docs/images/catalog/blocks/gravitational-lens.mp4
deleted file mode 100644
index 4a4c047f..00000000
Binary files a/docs/images/catalog/blocks/gravitational-lens.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/gravitational-lens.png b/docs/images/catalog/blocks/gravitational-lens.png
deleted file mode 100644
index 47bb823f..00000000
Binary files a/docs/images/catalog/blocks/gravitational-lens.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/instagram-follow.mp4 b/docs/images/catalog/blocks/instagram-follow.mp4
deleted file mode 100644
index 23afb738..00000000
Binary files a/docs/images/catalog/blocks/instagram-follow.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/instagram-follow.png b/docs/images/catalog/blocks/instagram-follow.png
deleted file mode 100644
index 45e6e661..00000000
Binary files a/docs/images/catalog/blocks/instagram-follow.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/light-leak.mp4 b/docs/images/catalog/blocks/light-leak.mp4
deleted file mode 100644
index 66275598..00000000
Binary files a/docs/images/catalog/blocks/light-leak.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/light-leak.png b/docs/images/catalog/blocks/light-leak.png
deleted file mode 100644
index aad699b2..00000000
Binary files a/docs/images/catalog/blocks/light-leak.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/logo-outro.mp4 b/docs/images/catalog/blocks/logo-outro.mp4
deleted file mode 100644
index 0d0763b6..00000000
Binary files a/docs/images/catalog/blocks/logo-outro.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/logo-outro.png b/docs/images/catalog/blocks/logo-outro.png
deleted file mode 100644
index caeea8ed..00000000
Binary files a/docs/images/catalog/blocks/logo-outro.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/macos-notification.mp4 b/docs/images/catalog/blocks/macos-notification.mp4
deleted file mode 100644
index b56157bd..00000000
Binary files a/docs/images/catalog/blocks/macos-notification.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/macos-notification.png b/docs/images/catalog/blocks/macos-notification.png
deleted file mode 100644
index 9398329d..00000000
Binary files a/docs/images/catalog/blocks/macos-notification.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/reddit-post.mp4 b/docs/images/catalog/blocks/reddit-post.mp4
deleted file mode 100644
index cd79cd94..00000000
Binary files a/docs/images/catalog/blocks/reddit-post.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/reddit-post.png b/docs/images/catalog/blocks/reddit-post.png
deleted file mode 100644
index 8ec9a38e..00000000
Binary files a/docs/images/catalog/blocks/reddit-post.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/ridged-burn.mp4 b/docs/images/catalog/blocks/ridged-burn.mp4
deleted file mode 100644
index b7665f43..00000000
Binary files a/docs/images/catalog/blocks/ridged-burn.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/ridged-burn.png b/docs/images/catalog/blocks/ridged-burn.png
deleted file mode 100644
index 0d0ff9e1..00000000
Binary files a/docs/images/catalog/blocks/ridged-burn.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/ripple-waves.mp4 b/docs/images/catalog/blocks/ripple-waves.mp4
deleted file mode 100644
index d216bcb8..00000000
Binary files a/docs/images/catalog/blocks/ripple-waves.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/ripple-waves.png b/docs/images/catalog/blocks/ripple-waves.png
deleted file mode 100644
index 6f4b97cc..00000000
Binary files a/docs/images/catalog/blocks/ripple-waves.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/sdf-iris.mp4 b/docs/images/catalog/blocks/sdf-iris.mp4
deleted file mode 100644
index 4bed89c6..00000000
Binary files a/docs/images/catalog/blocks/sdf-iris.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/sdf-iris.png b/docs/images/catalog/blocks/sdf-iris.png
deleted file mode 100644
index 480cfde1..00000000
Binary files a/docs/images/catalog/blocks/sdf-iris.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/spotify-card.mp4 b/docs/images/catalog/blocks/spotify-card.mp4
deleted file mode 100644
index c723348f..00000000
Binary files a/docs/images/catalog/blocks/spotify-card.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/spotify-card.png b/docs/images/catalog/blocks/spotify-card.png
deleted file mode 100644
index 45c43ee8..00000000
Binary files a/docs/images/catalog/blocks/spotify-card.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/swirl-vortex.mp4 b/docs/images/catalog/blocks/swirl-vortex.mp4
deleted file mode 100644
index 3754bb03..00000000
Binary files a/docs/images/catalog/blocks/swirl-vortex.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/swirl-vortex.png b/docs/images/catalog/blocks/swirl-vortex.png
deleted file mode 100644
index 3c89730e..00000000
Binary files a/docs/images/catalog/blocks/swirl-vortex.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/thermal-distortion.mp4 b/docs/images/catalog/blocks/thermal-distortion.mp4
deleted file mode 100644
index a1095e08..00000000
Binary files a/docs/images/catalog/blocks/thermal-distortion.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/thermal-distortion.png b/docs/images/catalog/blocks/thermal-distortion.png
deleted file mode 100644
index 7cb9fb53..00000000
Binary files a/docs/images/catalog/blocks/thermal-distortion.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/tiktok-follow.mp4 b/docs/images/catalog/blocks/tiktok-follow.mp4
deleted file mode 100644
index 54eb470e..00000000
Binary files a/docs/images/catalog/blocks/tiktok-follow.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/tiktok-follow.png b/docs/images/catalog/blocks/tiktok-follow.png
deleted file mode 100644
index 655ac7e2..00000000
Binary files a/docs/images/catalog/blocks/tiktok-follow.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-3d.mp4 b/docs/images/catalog/blocks/transitions-3d.mp4
deleted file mode 100644
index af829f4c..00000000
Binary files a/docs/images/catalog/blocks/transitions-3d.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-3d.png b/docs/images/catalog/blocks/transitions-3d.png
deleted file mode 100644
index e6624c4c..00000000
Binary files a/docs/images/catalog/blocks/transitions-3d.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-blur.mp4 b/docs/images/catalog/blocks/transitions-blur.mp4
deleted file mode 100644
index 0c2f2b7a..00000000
Binary files a/docs/images/catalog/blocks/transitions-blur.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-blur.png b/docs/images/catalog/blocks/transitions-blur.png
deleted file mode 100644
index 74dfe2d8..00000000
Binary files a/docs/images/catalog/blocks/transitions-blur.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-cover.mp4 b/docs/images/catalog/blocks/transitions-cover.mp4
deleted file mode 100644
index e8d94586..00000000
Binary files a/docs/images/catalog/blocks/transitions-cover.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-cover.png b/docs/images/catalog/blocks/transitions-cover.png
deleted file mode 100644
index 611b1ef1..00000000
Binary files a/docs/images/catalog/blocks/transitions-cover.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-destruction.mp4 b/docs/images/catalog/blocks/transitions-destruction.mp4
deleted file mode 100644
index 8926e6e2..00000000
Binary files a/docs/images/catalog/blocks/transitions-destruction.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-destruction.png b/docs/images/catalog/blocks/transitions-destruction.png
deleted file mode 100644
index 74dfe2d8..00000000
Binary files a/docs/images/catalog/blocks/transitions-destruction.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-dissolve.mp4 b/docs/images/catalog/blocks/transitions-dissolve.mp4
deleted file mode 100644
index fde78468..00000000
Binary files a/docs/images/catalog/blocks/transitions-dissolve.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-dissolve.png b/docs/images/catalog/blocks/transitions-dissolve.png
deleted file mode 100644
index 74dfe2d8..00000000
Binary files a/docs/images/catalog/blocks/transitions-dissolve.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-distortion.mp4 b/docs/images/catalog/blocks/transitions-distortion.mp4
deleted file mode 100644
index f7f7933a..00000000
Binary files a/docs/images/catalog/blocks/transitions-distortion.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-distortion.png b/docs/images/catalog/blocks/transitions-distortion.png
deleted file mode 100644
index 0f107140..00000000
Binary files a/docs/images/catalog/blocks/transitions-distortion.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-grid.mp4 b/docs/images/catalog/blocks/transitions-grid.mp4
deleted file mode 100644
index f1186273..00000000
Binary files a/docs/images/catalog/blocks/transitions-grid.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-grid.png b/docs/images/catalog/blocks/transitions-grid.png
deleted file mode 100644
index 0f107140..00000000
Binary files a/docs/images/catalog/blocks/transitions-grid.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-light.mp4 b/docs/images/catalog/blocks/transitions-light.mp4
deleted file mode 100644
index 223af4e6..00000000
Binary files a/docs/images/catalog/blocks/transitions-light.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-light.png b/docs/images/catalog/blocks/transitions-light.png
deleted file mode 100644
index 70af43df..00000000
Binary files a/docs/images/catalog/blocks/transitions-light.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-mechanical.mp4 b/docs/images/catalog/blocks/transitions-mechanical.mp4
deleted file mode 100644
index f56f4fd3..00000000
Binary files a/docs/images/catalog/blocks/transitions-mechanical.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-mechanical.png b/docs/images/catalog/blocks/transitions-mechanical.png
deleted file mode 100644
index 74dfe2d8..00000000
Binary files a/docs/images/catalog/blocks/transitions-mechanical.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-other.mp4 b/docs/images/catalog/blocks/transitions-other.mp4
deleted file mode 100644
index ffa36e9f..00000000
Binary files a/docs/images/catalog/blocks/transitions-other.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-other.png b/docs/images/catalog/blocks/transitions-other.png
deleted file mode 100644
index 74dfe2d8..00000000
Binary files a/docs/images/catalog/blocks/transitions-other.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-push.mp4 b/docs/images/catalog/blocks/transitions-push.mp4
deleted file mode 100644
index 85f730be..00000000
Binary files a/docs/images/catalog/blocks/transitions-push.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-push.png b/docs/images/catalog/blocks/transitions-push.png
deleted file mode 100644
index 74dfe2d8..00000000
Binary files a/docs/images/catalog/blocks/transitions-push.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-radial.mp4 b/docs/images/catalog/blocks/transitions-radial.mp4
deleted file mode 100644
index 2dd0af9a..00000000
Binary files a/docs/images/catalog/blocks/transitions-radial.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-radial.png b/docs/images/catalog/blocks/transitions-radial.png
deleted file mode 100644
index e6624c4c..00000000
Binary files a/docs/images/catalog/blocks/transitions-radial.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-scale.mp4 b/docs/images/catalog/blocks/transitions-scale.mp4
deleted file mode 100644
index e6bf04fd..00000000
Binary files a/docs/images/catalog/blocks/transitions-scale.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/transitions-scale.png b/docs/images/catalog/blocks/transitions-scale.png
deleted file mode 100644
index 74dfe2d8..00000000
Binary files a/docs/images/catalog/blocks/transitions-scale.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/ui-3d-reveal.mp4 b/docs/images/catalog/blocks/ui-3d-reveal.mp4
deleted file mode 100644
index bbe2fb8f..00000000
Binary files a/docs/images/catalog/blocks/ui-3d-reveal.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/ui-3d-reveal.png b/docs/images/catalog/blocks/ui-3d-reveal.png
deleted file mode 100644
index 1fae1f4c..00000000
Binary files a/docs/images/catalog/blocks/ui-3d-reveal.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/whip-pan.mp4 b/docs/images/catalog/blocks/whip-pan.mp4
deleted file mode 100644
index ad0bd3be..00000000
Binary files a/docs/images/catalog/blocks/whip-pan.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/whip-pan.png b/docs/images/catalog/blocks/whip-pan.png
deleted file mode 100644
index 9587c755..00000000
Binary files a/docs/images/catalog/blocks/whip-pan.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/x-post.mp4 b/docs/images/catalog/blocks/x-post.mp4
deleted file mode 100644
index 47f38aee..00000000
Binary files a/docs/images/catalog/blocks/x-post.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/x-post.png b/docs/images/catalog/blocks/x-post.png
deleted file mode 100644
index 1c9fbf9f..00000000
Binary files a/docs/images/catalog/blocks/x-post.png and /dev/null differ
diff --git a/docs/images/catalog/blocks/yt-lower-third.mp4 b/docs/images/catalog/blocks/yt-lower-third.mp4
deleted file mode 100644
index 43a53e7b..00000000
Binary files a/docs/images/catalog/blocks/yt-lower-third.mp4 and /dev/null differ
diff --git a/docs/images/catalog/blocks/yt-lower-third.png b/docs/images/catalog/blocks/yt-lower-third.png
deleted file mode 100644
index 0002cd32..00000000
Binary files a/docs/images/catalog/blocks/yt-lower-third.png and /dev/null differ
diff --git a/docs/images/catalog/components/grain-overlay.mp4 b/docs/images/catalog/components/grain-overlay.mp4
deleted file mode 100644
index b5b7a266..00000000
Binary files a/docs/images/catalog/components/grain-overlay.mp4 and /dev/null differ
diff --git a/docs/images/catalog/components/grain-overlay.png b/docs/images/catalog/components/grain-overlay.png
deleted file mode 100644
index 46543fe7..00000000
Binary files a/docs/images/catalog/components/grain-overlay.png and /dev/null differ
diff --git a/docs/images/catalog/components/grid-pixelate-wipe.mp4 b/docs/images/catalog/components/grid-pixelate-wipe.mp4
deleted file mode 100644
index bfb5bb62..00000000
Binary files a/docs/images/catalog/components/grid-pixelate-wipe.mp4 and /dev/null differ
diff --git a/docs/images/catalog/components/grid-pixelate-wipe.png b/docs/images/catalog/components/grid-pixelate-wipe.png
deleted file mode 100644
index ec95d0ad..00000000
Binary files a/docs/images/catalog/components/grid-pixelate-wipe.png and /dev/null differ
diff --git a/docs/images/catalog/components/shimmer-sweep.mp4 b/docs/images/catalog/components/shimmer-sweep.mp4
deleted file mode 100644
index e99c963c..00000000
Binary files a/docs/images/catalog/components/shimmer-sweep.mp4 and /dev/null differ
diff --git a/docs/images/catalog/components/shimmer-sweep.png b/docs/images/catalog/components/shimmer-sweep.png
deleted file mode 100644
index 54e781c6..00000000
Binary files a/docs/images/catalog/components/shimmer-sweep.png and /dev/null differ
diff --git a/docs/images/readme-demo-source.html b/docs/images/readme-demo-source.html
deleted file mode 100644
index e5b13f61..00000000
--- a/docs/images/readme-demo-source.html
+++ /dev/null
@@ -1,505 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>HyperFrames README Demo</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=block"
-      rel="stylesheet"
-    />
-    <style>
-      * { box-sizing: border-box; margin: 0; padding: 0; }
-      html, body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #0a0a0f;
-        font-family: "Inter", -apple-system, sans-serif;
-        color: #fff;
-      }
-      #root {
-        width: 1920px;
-        height: 1080px;
-        position: relative;
-        overflow: hidden;
-      }
-
-      /* ── Subtle grid background ── */
-      .bg-grid {
-        position: absolute;
-        inset: 0;
-        background-image:
-          linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
-        background-size: 60px 60px;
-        opacity: 0;
-      }
-
-      /* ── Gradient accent orbs ── */
-      .accent-orb {
-        position: absolute;
-        width: 800px;
-        height: 800px;
-        border-radius: 50%;
-        filter: blur(120px);
-        opacity: 0;
-      }
-      .orb-1 {
-        background: radial-gradient(circle, rgba(116, 225, 185, 0.25), transparent 70%);
-        top: -200px;
-        right: -100px;
-      }
-      .orb-2 {
-        background: radial-gradient(circle, rgba(106, 220, 255, 0.2), transparent 70%);
-        bottom: -300px;
-        left: -100px;
-      }
-
-      /* ── Code panel ── */
-      .code-panel {
-        position: absolute;
-        top: 100px;
-        left: 80px;
-        width: 840px;
-        height: 640px;
-        background: rgba(20, 20, 30, 0.9);
-        border: 1px solid rgba(255,255,255,0.08);
-        border-radius: 16px;
-        padding: 28px 32px;
-        opacity: 0;
-        overflow: hidden;
-      }
-      .code-header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 20px;
-      }
-      .code-dot { width: 12px; height: 12px; border-radius: 50%; }
-      .code-dot:nth-child(1) { background: #ff5f57; }
-      .code-dot:nth-child(2) { background: #febc2e; }
-      .code-dot:nth-child(3) { background: #28c840; }
-      .code-filename {
-        font-family: "JetBrains Mono", monospace;
-        font-size: 14px;
-        color: rgba(255,255,255,0.4);
-        margin-left: 12px;
-      }
-      .code-content {
-        font-family: "JetBrains Mono", monospace;
-        font-size: 18px;
-        line-height: 1.7;
-        white-space: pre;
-      }
-      .code-line { display: block; opacity: 0; }
-      .c-tag { color: #7dd3fc; }
-      .c-attr { color: #c084fc; }
-      .c-val { color: #86efac; }
-      .c-str { color: #fbbf24; }
-      .c-cmt { color: rgba(255,255,255,0.3); font-style: italic; }
-
-      /* ── Output panel ── */
-      .output-panel {
-        position: absolute;
-        top: 100px;
-        right: 80px;
-        width: 840px;
-        height: 640px;
-        border-radius: 16px;
-        overflow: hidden;
-        opacity: 0;
-        border: 1px solid rgba(255,255,255,0.08);
-      }
-      .output-label {
-        position: absolute;
-        top: 14px;
-        right: 18px;
-        font-size: 12px;
-        font-weight: 500;
-        color: rgba(255,255,255,0.25);
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        z-index: 10;
-      }
-      .preview-stage {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-      }
-      .preview-content { text-align: center; }
-      .preview-title {
-        font-size: 64px;
-        font-weight: 800;
-        line-height: 1.2;
-        opacity: 0;
-      }
-      .preview-title .line-1 { display: block; color: #fff; }
-      .preview-title .line-2 { display: block; color: #74e1b9; font-size: 72px; }
-      .preview-subtitle {
-        font-size: 22px;
-        color: rgba(255,255,255,0.5);
-        margin-top: 16px;
-        opacity: 0;
-      }
-      .preview-btn {
-        margin-top: 28px;
-        padding: 14px 36px;
-        background: linear-gradient(135deg, #74e1b9, #6adcff);
-        border-radius: 30px;
-        font-size: 18px;
-        font-weight: 600;
-        color: #0a0a0f;
-        opacity: 0;
-        display: inline-block;
-      }
-
-      /* ── Arrow ── */
-      .arrow {
-        position: absolute;
-        top: 395px;
-        left: 938px;
-        width: 44px;
-        height: 44px;
-        opacity: 0;
-      }
-
-      /* ── Showcase strip ── */
-      .showcase-strip {
-        position: absolute;
-        bottom: 50px;
-        left: 0;
-        right: 0;
-        height: 170px;
-        display: flex;
-        justify-content: center;
-        gap: 20px;
-        opacity: 0;
-      }
-      .showcase-card {
-        width: 240px;
-        height: 150px;
-        border-radius: 12px;
-        overflow: hidden;
-        opacity: 0;
-        transform: translateY(30px);
-        border: 1px solid rgba(255,255,255,0.1);
-        position: relative;
-      }
-      .card-label {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        padding: 8px 12px;
-        background: linear-gradient(transparent, rgba(0,0,0,0.85));
-        font-size: 12px;
-        font-weight: 500;
-        color: rgba(255,255,255,0.8);
-      }
-
-      /* Mini chart */
-      .mini-chart {
-        padding: 20px 16px;
-        background: #faf9f6;
-        height: 100%;
-        display: flex;
-        align-items: flex-end;
-        gap: 8px;
-        padding-bottom: 36px;
-      }
-      .mini-bar {
-        flex: 1;
-        background: #2d2d2d;
-        border-radius: 3px 3px 0 0;
-        transform-origin: bottom;
-      }
-
-      /* Mini social */
-      .mini-social {
-        background: #1a1a2e;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 16px;
-      }
-      .mini-tweet {
-        background: rgba(255,255,255,0.06);
-        border-radius: 12px;
-        padding: 12px 14px;
-        width: 100%;
-      }
-      .mini-tweet-header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 6px;
-      }
-      .mini-avatar {
-        width: 22px;
-        height: 22px;
-        border-radius: 50%;
-        background: linear-gradient(135deg, #74e1b9, #6adcff);
-      }
-      .mini-name { font-size: 11px; font-weight: 600; }
-      .mini-handle { font-size: 10px; color: rgba(255,255,255,0.4); margin-left: 4px; }
-      .mini-text { font-size: 10px; color: rgba(255,255,255,0.6); line-height: 1.4; }
-
-      /* Mini transition */
-      .mini-transition { height: 100%; position: relative; }
-      .mini-transition .half-a {
-        position: absolute; inset: 0;
-        background: linear-gradient(135deg, #667eea, #764ba2);
-      }
-      .mini-transition .half-b {
-        position: absolute; inset: 0;
-        background: linear-gradient(135deg, #f093fb, #f5576c);
-        clip-path: circle(0% at 50% 50%);
-      }
-
-      /* Mini kinetic */
-      .mini-kinetic {
-        background: #0a0a0f;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .mini-kinetic-text {
-        font-size: 28px;
-        font-weight: 900;
-        text-transform: uppercase;
-        letter-spacing: 4px;
-        opacity: 0;
-      }
-
-      /* Mini app */
-      .mini-app {
-        background: linear-gradient(135deg, #e8e4d9, #d4cfbf);
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-      }
-      .mini-phone {
-        width: 36px;
-        height: 64px;
-        background: #1a1a2e;
-        border-radius: 6px;
-        border: 1px solid rgba(255,255,255,0.1);
-        opacity: 0;
-        transform: translateY(20px);
-      }
-
-      /* ── Tagline ── */
-      .tagline {
-        position: absolute;
-        bottom: 24px;
-        left: 0;
-        right: 0;
-        text-align: center;
-        font-size: 18px;
-        color: rgba(255,255,255,0.25);
-        letter-spacing: 3px;
-        text-transform: uppercase;
-        opacity: 0;
-      }
-      .tagline span { color: #74e1b9; font-weight: 600; }
-    </style>
-  </head>
-  <body>
-    <div id="root" data-composition-id="readme-demo" data-start="0" data-duration="5.5" data-width="1920" data-height="1080">
-
-      <div class="bg-grid" id="bg-grid"></div>
-      <div class="accent-orb orb-1" id="orb-1"></div>
-      <div class="accent-orb orb-2" id="orb-2"></div>
-
-      <!-- Code panel -->
-      <div class="code-panel" id="code-panel">
-        <div class="code-header">
-          <div class="code-dot"></div>
-          <div class="code-dot"></div>
-          <div class="code-dot"></div>
-          <span class="code-filename">index.html</span>
-        </div>
-        <div class="code-content">
-<span class="code-line" id="cl-1"><span class="c-tag">&lt;div</span> <span class="c-attr">data-composition-id</span>=<span class="c-val">"hero"</span><span class="c-tag">&gt;</span></span>
-<span class="code-line" id="cl-2"></span>
-<span class="code-line" id="cl-3">  <span class="c-tag">&lt;h1</span> <span class="c-attr">class</span>=<span class="c-val">"clip"</span></span>
-<span class="code-line" id="cl-4">      <span class="c-attr">data-start</span>=<span class="c-val">"0"</span> <span class="c-attr">data-duration</span>=<span class="c-val">"5"</span><span class="c-tag">&gt;</span></span>
-<span class="code-line" id="cl-5">    Launch Day</span>
-<span class="code-line" id="cl-6">  <span class="c-tag">&lt;/h1&gt;</span></span>
-<span class="code-line" id="cl-7"></span>
-<span class="code-line" id="cl-8">  <span class="c-tag">&lt;p</span> <span class="c-attr">class</span>=<span class="c-val">"clip"</span></span>
-<span class="code-line" id="cl-9">     <span class="c-attr">data-start</span>=<span class="c-val">"0.8"</span> <span class="c-attr">data-duration</span>=<span class="c-val">"4"</span><span class="c-tag">&gt;</span></span>
-<span class="code-line" id="cl-10">    The future of video</span>
-<span class="code-line" id="cl-11">  <span class="c-tag">&lt;/p&gt;</span></span>
-<span class="code-line" id="cl-12"></span>
-<span class="code-line" id="cl-13">  <span class="c-cmt">&lt;!-- GSAP handles animation --&gt;</span></span>
-<span class="code-line" id="cl-14">  <span class="c-tag">&lt;script&gt;</span></span>
-<span class="code-line" id="cl-15">    tl.<span class="c-attr">from</span>(<span class="c-str">"h1"</span>, {<span class="c-attr">y</span>: <span class="c-val">-60</span>, <span class="c-attr">opacity</span>: <span class="c-val">0</span>})</span>
-<span class="code-line" id="cl-16">    tl.<span class="c-attr">from</span>(<span class="c-str">"p"</span>,  {<span class="c-attr">y</span>:  <span class="c-val">40</span>, <span class="c-attr">opacity</span>: <span class="c-val">0</span>})</span>
-<span class="code-line" id="cl-17">  <span class="c-tag">&lt;/script&gt;</span></span>
-<span class="code-line" id="cl-18"><span class="c-tag">&lt;/div&gt;</span></span>
-        </div>
-      </div>
-
-      <!-- Arrow -->
-      <div class="arrow" id="arrow">
-        <svg viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M8 22h28M28 14l8 8-8 8" stroke="#74e1b9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </div>
-
-      <!-- Output panel -->
-      <div class="output-panel" id="output-panel">
-        <span class="output-label">rendered output</span>
-        <div class="preview-stage">
-          <div class="preview-content">
-            <div class="preview-title" id="preview-title">
-              <span class="line-1">Launch Day</span>
-              <span class="line-2">is here.</span>
-            </div>
-            <p class="preview-subtitle" id="preview-subtitle">The future of video</p>
-            <div class="preview-btn" id="preview-btn">Get started</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Showcase strip -->
-      <div class="showcase-strip" id="showcase-strip">
-        <div class="showcase-card" id="sc-1">
-          <div class="mini-chart">
-            <div class="mini-bar" style="height: 35%"></div>
-            <div class="mini-bar" style="height: 60%"></div>
-            <div class="mini-bar" style="height: 85%"></div>
-            <div class="mini-bar" style="height: 50%"></div>
-            <div class="mini-bar" style="height: 95%"></div>
-            <div class="mini-bar" style="height: 72%"></div>
-          </div>
-          <div class="card-label">Data Charts</div>
-        </div>
-
-        <div class="showcase-card" id="sc-2">
-          <div class="mini-social">
-            <div class="mini-tweet">
-              <div class="mini-tweet-header">
-                <div class="mini-avatar"></div>
-                <span class="mini-name">HyperFrames</span>
-                <span class="mini-handle">@hyperframes</span>
-              </div>
-              <div class="mini-text">Write HTML. Render video.</div>
-            </div>
-          </div>
-          <div class="card-label">Social Overlays</div>
-        </div>
-
-        <div class="showcase-card" id="sc-3">
-          <div class="mini-transition">
-            <div class="half-a"></div>
-            <div class="half-b" id="transition-b"></div>
-          </div>
-          <div class="card-label">Shader Transitions</div>
-        </div>
-
-        <div class="showcase-card" id="sc-4">
-          <div class="mini-kinetic">
-            <span class="mini-kinetic-text" id="kinetic-text">BOLD</span>
-          </div>
-          <div class="card-label">Kinetic Type</div>
-        </div>
-
-        <div class="showcase-card" id="sc-5">
-          <div class="mini-app">
-            <div class="mini-phone" id="phone-1"></div>
-            <div class="mini-phone" id="phone-2" style="height: 72px; width: 40px"></div>
-            <div class="mini-phone" id="phone-3"></div>
-          </div>
-          <div class="card-label">App Showcases</div>
-        </div>
-      </div>
-
-      <!-- Tagline -->
-      <div class="tagline" id="tagline">
-        Write HTML &middot; Render Video &middot; <span>Built for agents</span>
-      </div>
-    </div>
-
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      // Background
-      tl.to("#bg-grid", { opacity: 1, duration: 0.8 }, 0);
-      tl.to("#orb-1", { opacity: 1, duration: 1.2 }, 0.2);
-      tl.to("#orb-2", { opacity: 1, duration: 1.2 }, 0.4);
-
-      // Code panel slides in
-      tl.fromTo("#code-panel",
-        { opacity: 0, x: -40 },
-        { opacity: 1, x: 0, duration: 0.6, ease: "power2.out" }, 0.3);
-
-      // Code lines type in
-      const lines = [];
-      for (let i = 1; i <= 18; i++) lines.push("#cl-" + i);
-      tl.to(lines.join(","), {
-        opacity: 1, duration: 0.06, stagger: 0.055, ease: "none"
-      }, 0.5);
-
-      // Arrow
-      tl.to("#arrow", { opacity: 1, duration: 0.3 }, 1.5);
-
-      // Output panel slides in
-      tl.fromTo("#output-panel",
-        { opacity: 0, x: 40 },
-        { opacity: 1, x: 0, duration: 0.6, ease: "power2.out" }, 1.3);
-
-      // Preview content animates — mirrors what the code would render
-      tl.fromTo("#preview-title",
-        { opacity: 0, y: -60 },
-        { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 1.7);
-      tl.fromTo("#preview-subtitle",
-        { opacity: 0, y: 40 },
-        { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 2.1);
-      tl.fromTo("#preview-btn",
-        { opacity: 0, scale: 0.8 },
-        { opacity: 1, scale: 1, duration: 0.4, ease: "back.out(2)" }, 2.4);
-
-      // Showcase strip
-      tl.to("#showcase-strip", { opacity: 1, duration: 0.4 }, 3.0);
-      tl.to(["#sc-1","#sc-2","#sc-3","#sc-4","#sc-5"].join(","), {
-        opacity: 1, y: 0, duration: 0.4, stagger: 0.1, ease: "power2.out"
-      }, 3.2);
-
-      // Mini card animations
-      tl.fromTo("#sc-1 .mini-bar",
-        { scaleY: 0 },
-        { scaleY: 1, duration: 0.5, stagger: 0.05, ease: "power2.out" }, 3.4);
-      tl.to("#transition-b",
-        { clipPath: "circle(75% at 50% 50%)", duration: 1.0, ease: "power2.inOut" }, 3.5);
-      tl.fromTo("#kinetic-text",
-        { opacity: 0, scale: 3 },
-        { opacity: 1, scale: 1, duration: 0.3, ease: "power4.out" }, 3.6);
-      tl.to(["#phone-1","#phone-2","#phone-3"].join(","), {
-        opacity: 1, y: 0, duration: 0.4, stagger: 0.08, ease: "power2.out"
-      }, 3.5);
-
-      // Tagline
-      tl.to("#tagline", { opacity: 1, duration: 0.6 }, 4.0);
-
-      // Hold
-      tl.set({}, {}, 5.5);
-
-      window.__timelines["readme-demo"] = tl;
-    </script>
-  </body>
-</html>
diff --git a/docs/images/readme-demo.gif b/docs/images/readme-demo.gif
deleted file mode 100644
index f12d152d..00000000
Binary files a/docs/images/readme-demo.gif and /dev/null differ
diff --git a/docs/images/readme-demo.mp4 b/docs/images/readme-demo.mp4
deleted file mode 100644
index 8ef34ede..00000000
Binary files a/docs/images/readme-demo.mp4 and /dev/null differ
diff --git a/docs/images/templates/decision-tree.mp4 b/docs/images/templates/decision-tree.mp4
deleted file mode 100644
index 49e79c63..00000000
Binary files a/docs/images/templates/decision-tree.mp4 and /dev/null differ
diff --git a/docs/images/templates/decision-tree.png b/docs/images/templates/decision-tree.png
deleted file mode 100644
index 3d583281..00000000
Binary files a/docs/images/templates/decision-tree.png and /dev/null differ
diff --git a/docs/images/templates/kinetic-type.mp4 b/docs/images/templates/kinetic-type.mp4
deleted file mode 100644
index 8b08eab0..00000000
Binary files a/docs/images/templates/kinetic-type.mp4 and /dev/null differ
diff --git a/docs/images/templates/kinetic-type.png b/docs/images/templates/kinetic-type.png
deleted file mode 100644
index 1fd5a651..00000000
Binary files a/docs/images/templates/kinetic-type.png and /dev/null differ
diff --git a/docs/images/templates/nyt-graph.mp4 b/docs/images/templates/nyt-graph.mp4
deleted file mode 100644
index c55a6b54..00000000
Binary files a/docs/images/templates/nyt-graph.mp4 and /dev/null differ
diff --git a/docs/images/templates/nyt-graph.png b/docs/images/templates/nyt-graph.png
deleted file mode 100644
index 5e0cb045..00000000
Binary files a/docs/images/templates/nyt-graph.png and /dev/null differ
diff --git a/docs/images/templates/play-mode.mp4 b/docs/images/templates/play-mode.mp4
deleted file mode 100644
index d61e3232..00000000
Binary files a/docs/images/templates/play-mode.mp4 and /dev/null differ
diff --git a/docs/images/templates/play-mode.png b/docs/images/templates/play-mode.png
deleted file mode 100644
index be141e62..00000000
Binary files a/docs/images/templates/play-mode.png and /dev/null differ
diff --git a/docs/images/templates/product-promo.mp4 b/docs/images/templates/product-promo.mp4
deleted file mode 100644
index d574bb96..00000000
Binary files a/docs/images/templates/product-promo.mp4 and /dev/null differ
diff --git a/docs/images/templates/product-promo.png b/docs/images/templates/product-promo.png
deleted file mode 100644
index 6e10c4b0..00000000
Binary files a/docs/images/templates/product-promo.png and /dev/null differ
diff --git a/docs/images/templates/swiss-grid.mp4 b/docs/images/templates/swiss-grid.mp4
deleted file mode 100644
index b7932210..00000000
Binary files a/docs/images/templates/swiss-grid.mp4 and /dev/null differ
diff --git a/docs/images/templates/swiss-grid.png b/docs/images/templates/swiss-grid.png
deleted file mode 100644
index 791fdfbf..00000000
Binary files a/docs/images/templates/swiss-grid.png and /dev/null differ
diff --git a/docs/images/templates/vignelli.mp4 b/docs/images/templates/vignelli.mp4
deleted file mode 100644
index ecc72692..00000000
Binary files a/docs/images/templates/vignelli.mp4 and /dev/null differ
diff --git a/docs/images/templates/vignelli.png b/docs/images/templates/vignelli.png
deleted file mode 100644
index 769a6af1..00000000
Binary files a/docs/images/templates/vignelli.png and /dev/null differ
diff --git a/docs/images/templates/warm-grain.mp4 b/docs/images/templates/warm-grain.mp4
deleted file mode 100644
index 6d5c2e36..00000000
Binary files a/docs/images/templates/warm-grain.mp4 and /dev/null differ
diff --git a/docs/images/templates/warm-grain.png b/docs/images/templates/warm-grain.png
deleted file mode 100644
index c926ea8f..00000000
Binary files a/docs/images/templates/warm-grain.png and /dev/null differ
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 22775945..f2f7abd3 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -10,7 +10,7 @@
       "3d"
     ],
     "href": "/catalog/blocks/app-showcase",
-    "preview": "/images/catalog/blocks/app-showcase.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
   },
   {
     "name": "chromatic-radial-split",
@@ -22,7 +22,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/chromatic-radial-split",
-    "preview": "/images/catalog/blocks/chromatic-radial-split.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
   },
   {
     "name": "cinematic-zoom",
@@ -34,7 +34,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/cinematic-zoom",
-    "preview": "/images/catalog/blocks/cinematic-zoom.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
   },
   {
     "name": "cross-warp-morph",
@@ -46,7 +46,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/cross-warp-morph",
-    "preview": "/images/catalog/blocks/cross-warp-morph.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
   },
   {
     "name": "data-chart",
@@ -59,7 +59,7 @@
       "statistics"
     ],
     "href": "/catalog/blocks/data-chart",
-    "preview": "/images/catalog/blocks/data-chart.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
   },
   {
     "name": "domain-warp-dissolve",
@@ -71,7 +71,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/domain-warp-dissolve",
-    "preview": "/images/catalog/blocks/domain-warp-dissolve.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
   },
   {
     "name": "flash-through-white",
@@ -83,7 +83,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/flash-through-white",
-    "preview": "/images/catalog/blocks/flash-through-white.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
   },
   {
     "name": "flowchart",
@@ -96,7 +96,7 @@
       "interactive"
     ],
     "href": "/catalog/blocks/flowchart",
-    "preview": "/images/catalog/blocks/flowchart.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
   },
   {
     "name": "glitch",
@@ -108,7 +108,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/glitch",
-    "preview": "/images/catalog/blocks/glitch.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
   },
   {
     "name": "grain-overlay",
@@ -122,7 +122,7 @@
       "film"
     ],
     "href": "/catalog/components/grain-overlay",
-    "preview": "/images/catalog/components/grain-overlay.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png"
   },
   {
     "name": "gravitational-lens",
@@ -134,7 +134,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/gravitational-lens",
-    "preview": "/images/catalog/blocks/gravitational-lens.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
   },
   {
     "name": "grid-pixelate-wipe",
@@ -148,7 +148,7 @@
       "pixelate"
     ],
     "href": "/catalog/components/grid-pixelate-wipe",
-    "preview": "/images/catalog/components/grid-pixelate-wipe.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
   },
   {
     "name": "instagram-follow",
@@ -161,7 +161,7 @@
       "instagram"
     ],
     "href": "/catalog/blocks/instagram-follow",
-    "preview": "/images/catalog/blocks/instagram-follow.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
   },
   {
     "name": "light-leak",
@@ -173,7 +173,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/light-leak",
-    "preview": "/images/catalog/blocks/light-leak.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
   },
   {
     "name": "logo-outro",
@@ -186,7 +186,7 @@
       "logo"
     ],
     "href": "/catalog/blocks/logo-outro",
-    "preview": "/images/catalog/blocks/logo-outro.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
   },
   {
     "name": "macos-notification",
@@ -199,7 +199,7 @@
       "notification"
     ],
     "href": "/catalog/blocks/macos-notification",
-    "preview": "/images/catalog/blocks/macos-notification.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
   },
   {
     "name": "reddit-post",
@@ -212,7 +212,7 @@
       "reddit"
     ],
     "href": "/catalog/blocks/reddit-post",
-    "preview": "/images/catalog/blocks/reddit-post.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
   },
   {
     "name": "ridged-burn",
@@ -224,7 +224,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/ridged-burn",
-    "preview": "/images/catalog/blocks/ridged-burn.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
   },
   {
     "name": "ripple-waves",
@@ -236,7 +236,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/ripple-waves",
-    "preview": "/images/catalog/blocks/ripple-waves.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
   },
   {
     "name": "sdf-iris",
@@ -248,7 +248,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/sdf-iris",
-    "preview": "/images/catalog/blocks/sdf-iris.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
   },
   {
     "name": "shimmer-sweep",
@@ -262,7 +262,7 @@
       "effect"
     ],
     "href": "/catalog/components/shimmer-sweep",
-    "preview": "/images/catalog/components/shimmer-sweep.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
   },
   {
     "name": "spotify-card",
@@ -275,7 +275,7 @@
       "spotify"
     ],
     "href": "/catalog/blocks/spotify-card",
-    "preview": "/images/catalog/blocks/spotify-card.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
   },
   {
     "name": "swirl-vortex",
@@ -287,7 +287,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/swirl-vortex",
-    "preview": "/images/catalog/blocks/swirl-vortex.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
   },
   {
     "name": "thermal-distortion",
@@ -299,7 +299,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/thermal-distortion",
-    "preview": "/images/catalog/blocks/thermal-distortion.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
   },
   {
     "name": "tiktok-follow",
@@ -312,7 +312,7 @@
       "tiktok"
     ],
     "href": "/catalog/blocks/tiktok-follow",
-    "preview": "/images/catalog/blocks/tiktok-follow.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
   },
   {
     "name": "transitions-3d",
@@ -324,7 +324,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-3d",
-    "preview": "/images/catalog/blocks/transitions-3d.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
   },
   {
     "name": "transitions-blur",
@@ -336,7 +336,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-blur",
-    "preview": "/images/catalog/blocks/transitions-blur.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
   },
   {
     "name": "transitions-cover",
@@ -348,7 +348,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-cover",
-    "preview": "/images/catalog/blocks/transitions-cover.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
   },
   {
     "name": "transitions-destruction",
@@ -360,7 +360,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-destruction",
-    "preview": "/images/catalog/blocks/transitions-destruction.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
   },
   {
     "name": "transitions-dissolve",
@@ -372,7 +372,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-dissolve",
-    "preview": "/images/catalog/blocks/transitions-dissolve.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
   },
   {
     "name": "transitions-distortion",
@@ -384,7 +384,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-distortion",
-    "preview": "/images/catalog/blocks/transitions-distortion.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
   },
   {
     "name": "transitions-grid",
@@ -396,7 +396,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-grid",
-    "preview": "/images/catalog/blocks/transitions-grid.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
   },
   {
     "name": "transitions-light",
@@ -408,7 +408,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-light",
-    "preview": "/images/catalog/blocks/transitions-light.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
   },
   {
     "name": "transitions-mechanical",
@@ -420,7 +420,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-mechanical",
-    "preview": "/images/catalog/blocks/transitions-mechanical.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
   },
   {
     "name": "transitions-other",
@@ -432,7 +432,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-other",
-    "preview": "/images/catalog/blocks/transitions-other.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
   },
   {
     "name": "transitions-push",
@@ -444,7 +444,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-push",
-    "preview": "/images/catalog/blocks/transitions-push.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
   },
   {
     "name": "transitions-radial",
@@ -456,7 +456,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-radial",
-    "preview": "/images/catalog/blocks/transitions-radial.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
   },
   {
     "name": "transitions-scale",
@@ -468,7 +468,7 @@
       "showcase"
     ],
     "href": "/catalog/blocks/transitions-scale",
-    "preview": "/images/catalog/blocks/transitions-scale.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
   },
   {
     "name": "ui-3d-reveal",
@@ -481,7 +481,7 @@
       "reveal"
     ],
     "href": "/catalog/blocks/ui-3d-reveal",
-    "preview": "/images/catalog/blocks/ui-3d-reveal.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
   },
   {
     "name": "whip-pan",
@@ -493,7 +493,7 @@
       "shader"
     ],
     "href": "/catalog/blocks/whip-pan",
-    "preview": "/images/catalog/blocks/whip-pan.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
   },
   {
     "name": "x-post",
@@ -506,7 +506,7 @@
       "twitter"
     ],
     "href": "/catalog/blocks/x-post",
-    "preview": "/images/catalog/blocks/x-post.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
   },
   {
     "name": "yt-lower-third",
@@ -519,6 +519,6 @@
       "youtube"
     ],
     "href": "/catalog/blocks/yt-lower-third",
-    "preview": "/images/catalog/blocks/yt-lower-third.png"
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
   }
 ]
diff --git a/docs/snippets/TemplateCard.jsx b/docs/snippets/TemplateCard.jsx
index bffee698..26446368 100644
--- a/docs/snippets/TemplateCard.jsx
+++ b/docs/snippets/TemplateCard.jsx
@@ -1,8 +1,8 @@
 export function TemplateCard({ id, title, description, href, portrait }) {
   const [hovering, setHovering] = React.useState(false);
 
-  const imgSrc = `/images/templates/${id}.png`;
-  const videoSrc = `/images/templates/${id}.mp4`;
+  const imgSrc = `https://static.heygen.ai/hyperframes-oss/docs/images/templates/${id}.png`;
+  const videoSrc = `https://static.heygen.ai/hyperframes-oss/docs/images/templates/${id}.mp4`;
 
   return (
     <a
diff --git a/package.json b/package.json
index 21c9beab..e56ce3e9 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,8 @@
     "format:check": "oxfmt --check .",
     "knip": "knip",
     "generate:previews": "tsx scripts/generate-template-previews.ts",
+    "generate:catalog-previews": "tsx scripts/generate-catalog-previews.ts",
+    "upload:docs-images": "bash scripts/upload-docs-images.sh",
     "prepare": "test -d .git && lefthook install || true"
   },
   "devDependencies": {
diff --git a/scripts/generate-catalog-previews.ts b/scripts/generate-catalog-previews.ts
index b3eaf50a..32b62fda 100644
--- a/scripts/generate-catalog-previews.ts
+++ b/scripts/generate-catalog-previews.ts
@@ -9,6 +9,8 @@
  * - Components: renders the component's demo.html via a wrapper index.html
  *
  * Output: docs/images/catalog/<type>/<name>.png + <name>.mp4
+ *   (docs/images/ is gitignored — files are served from the CDN. After running
+ *   this script, run `bun run upload:docs-images` to publish.)
  *
  * Usage:
  *   npx tsx scripts/generate-catalog-previews.ts                      # all items
diff --git a/scripts/generate-template-previews.ts b/scripts/generate-template-previews.ts
index 8d784aef..d2056657 100644
--- a/scripts/generate-template-previews.ts
+++ b/scripts/generate-template-previews.ts
@@ -6,11 +6,13 @@
  * videos of each built-in template.
  *
  * Output: docs/images/templates/<id>.png + <id>.mp4
+ *   (docs/images/ is gitignored — files are served from the CDN. After running
+ *   this script, run `bun run upload:docs-images` to publish.)
  *
  * Usage:
- *   pnpm generate:previews                  # all templates (PNG + MP4)
- *   pnpm generate:previews -- --only warm-grain
- *   pnpm generate:previews -- --skip-video  # thumbnails only (faster)
+ *   bun run generate:previews                 # all templates (PNG + MP4)
+ *   bun run generate:previews --only warm-grain
+ *   bun run generate:previews --skip-video    # thumbnails only (faster)
  */
 
 import {
diff --git a/scripts/upload-docs-images.sh b/scripts/upload-docs-images.sh
new file mode 100755
index 00000000..981b7020
--- /dev/null
+++ b/scripts/upload-docs-images.sh
@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+#
+# Upload docs/images/ to the HeyGen public CDN.
+#
+# Docs previews (mp4/png/gif) are served from https://static.heygen.ai/hyperframes-oss/docs/images/
+# rather than committed to the repo. After regenerating previews with
+# `scripts/generate-catalog-previews.ts` or `scripts/generate-template-previews.ts`,
+# run this script to publish the new files.
+#
+# Requires AWS credentials for the heygen engineering account (profile: engineering-767398024897).
+# Contributors without AWS access: open a PR with the HTML/MDX changes and a
+# maintainer will run the generators + this upload before merging.
+
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+SRC="$REPO_ROOT/docs/images/"
+DEST="s3://heygen-public/hyperframes-oss/docs/images/"
+PROFILE="${AWS_PROFILE:-engineering-767398024897}"
+
+if [ ! -d "$SRC" ]; then
+  echo "No docs/images/ directory to upload — nothing to do."
+  exit 0
+fi
+
+echo "Uploading $SRC → $DEST (profile: $PROFILE)"
+aws --profile "$PROFILE" s3 sync "$SRC" "$DEST" \
+  --cache-control "public, max-age=31536000, immutable" \
+  --metadata-directive REPLACE
+
+echo "Done. Files are live at https://static.heygen.ai/hyperframes-oss/docs/images/"