Merge pull request #1036 from heygen-com/feat/registry-parallax-zoom-unzoom

feat(registry): add parallax-zoom and parallax-unzoom components

Author: miguel-heygen

docs/catalog/blocks/spain-map.mdx

@@ -1,15 +1,15 @@
 ---
 title: "Spain Map"
-description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend"
+description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
 ---
 
 # Spain Map
 
-Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection with GSAP timeline. GDP per capita data with warm red-to-amber color scale.
+Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection
 
 `data` `map` `geography` `spain` `europe` `choropleth`
 
-<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/spain-map.mp4?v=1779081476" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.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/spain-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
 
 ## Install
 

docs/catalog/blocks/us-map-bubble.mdx

@@ -1,15 +1,15 @@
 ---
 title: "US Bubble Map"
-description: "Animated US bubble map with proportional city markers, value callouts, and connection lines"
+description: "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map"
 ---
 
 # US Bubble Map
 
-Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with `us-map` for layered data visualizations.
+Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map
 
 `data` `map` `geography` `usa` `bubble` `cities`
 
-<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/us-map-bubble.mp4?v=1779081476" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.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/us-map-bubble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png" autoPlay muted loop playsInline />
 
 ## Install
 

docs/catalog/blocks/us-map-flow.mdx

@@ -5,11 +5,11 @@ description: "Animated connection arcs between US cities over a base map — com
 
 # US Flow Map
 
-Animated connection arcs between US cities over a base map — composable origin-destination flow visualization with traveling particles and GSAP-drawn Bezier arcs.
+Animated connection arcs between US cities over a base map — composable origin-destination flow visualization
 
 `data` `map` `geography` `usa` `flow` `connections` `arcs`
 
-<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/us-map-flow.mp4?v=1779081476" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.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/us-map-flow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png" autoPlay muted loop playsInline />
 
 ## Install
 

docs/catalog/blocks/us-map-hex.mdx

@@ -5,11 +5,11 @@ description: "Animated hexagonal tile grid map — each state as an equal-weight
 
 # US Hex Grid Map
 
-Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label. No external dependencies beyond GSAP.
+Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label
 
 `data` `map` `geography` `usa` `hexgrid` `tilegrid`
 
-<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/us-map-hex.mp4?v=1779081476" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.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/us-map-hex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png" autoPlay muted loop playsInline />
 
 ## Install
 

docs/catalog/blocks/us-map.mdx

@@ -1,15 +1,15 @@
 ---
 title: "US Map"
-description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend"
+description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP"
 ---
 
 # US Map
 
-Animated US choropleth map with staggered state reveals, value labels, and gradient legend — D3 geoAlbersUsa projection with GSAP timeline.
+Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP
 
 `data` `map` `geography` `usa` `choropleth`
 
-<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/us-map-v1779081660.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.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/us-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png" autoPlay muted loop playsInline />
 
 ## Install
 
@@ -42,12 +42,3 @@ After installing, add the block to your host composition:
 ```html
 <div data-composition-id="us-map" data-composition-src="compositions/us-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Composability
-
-Layer `us-map-bubble` or `us-map-flow` on top of this block as a higher track index to combine choropleth + bubble or flow visualizations:
-
-```html
-<div data-composition-id="us-map" data-composition-src="compositions/us-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
-<div data-composition-id="us-map-bubble" data-composition-src="compositions/us-map-bubble.html" data-start="0" data-duration="12" data-track-index="2" data-width="1920" data-height="1080"></div>
-```

docs/catalog/blocks/world-map.mdx

@@ -1,15 +1,15 @@
 ---
 title: "World Map"
-description: "Animated world choropleth with country-by-country reveal — D3 Natural Earth projection"
+description: "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection"
 ---
 
 # World Map
 
-Animated world choropleth with country-by-country reveal, gradient legend, and highlight pulses on top GDP countries — D3 Natural Earth projection with GSAP timeline.
+Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection
 
 `data` `map` `geography` `world` `choropleth`
 
-<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/world-map.mp4?v=1779081476" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.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/world-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png" autoPlay muted loop playsInline />
 
 ## Install
 

docs/catalog/components/caption-blend-difference.mdx

@@ -1,14 +1,16 @@
 ---
 title: "Blend Difference"
-description: "Auto-inverting captions using mix-blend-mode: difference — text flips between white and black per-pixel against the background"
+description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
 ---
 
 # Blend Difference
 
-Auto-inverting captions using mix-blend-mode: difference — text flips between white and black per-pixel against the background
+Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background
 
 `text` `effect` `blend-mode` `contrast` `inversion`
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline />
+
 ## Install
 
 <CodeGroup>
@@ -19,49 +21,6 @@ npx hyperframes add caption-blend-difference
 
 </CodeGroup>
 
-## How It Works
-
-White text with `mix-blend-mode: difference` inverts per-pixel against whatever is behind it:
-
-- **Dark background** → text stays white
-- **Light background** → text flips to black
-- **Color background** → text becomes the complement (blue → orange, red → cyan)
-
-The composition root needs `isolation: isolate` so the blend operates against sibling content (video, images) rather than the page background.
-
-## Variants
-
-| Class | Blend Mode | Effect |
-| --- | --- | --- |
-| `.blend-difference` | `difference` | Hard per-pixel inversion — maximum contrast |
-| `.blend-difference-soft` | `exclusion` | Softer inversion — less harsh on midtones |
-| `.blend-difference-screen` | `screen` | Text glows on dark areas, fades on light |
-
-## Example
-
-```html
-<div data-composition-id="root" style="isolation: isolate;">
-  <video src="video.mp4" muted playsinline
-         data-start="0" data-duration="30" data-track-index="0" />
-
-  <div class="clip blend-difference"
-       data-start="0" data-duration="5" data-track-index="1"
-       style="position: absolute; inset: 0; z-index: 10;
-              display: flex; align-items: center; justify-content: center;">
-    <span style="font-size: 120px; font-weight: 800;">
-      YOUR CAPTION
-    </span>
-  </div>
-</div>
-```
-
-## CSS Custom Properties
-
-| Property | Default | Description |
-| --- | --- | --- |
-| `--blend-caption-color` | `white` | Base text color before blending |
-| `--blend-mode` | `difference` | Override blend mode on `.blend-difference` |
-
 ## Details
 
 | Property | Value |

docs/catalog/components/caption-clip-wipe.mdx

@@ -9,7 +9,7 @@ Left-to-right clip-path wipe reveal per word
 
 `captions` `caption-style` `wipe` `clip-path` `reveal`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-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/caption-clip-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
 
 ## Install
 

docs/catalog/components/caption-glitch-rgb.mdx

@@ -9,7 +9,7 @@ RGB chromatic aberration with CRT scanline overlay
 
 `captions` `caption-style` `glitch` `cyber` `tech`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.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/caption-glitch-rgb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
 
 ## Install
 

docs/catalog/components/caption-gradient-fill.mdx

@@ -9,7 +9,7 @@ Gradient-clipped text with elastic bounce entrance
 
 `captions` `caption-style` `gradient` `colorful`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill-v3.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.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/caption-gradient-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
 
 ## Install