feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)

## What Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items. ### Shader transitions (14 blocks, WebGL, 4s each) `domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak` ### CSS transition showcases (14 blocks, various durations) `transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader` ## Why Phase D content accumulation. Transitions are the most-requested category for the catalog. ## How - Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders - CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page - All tagged with `transition` + `shader` or `showcase` for catalog grouping - Preview thumbnails generated for all 28 blocks - Catalog pages + index regenerated ## Test plan - [x] All 28 blocks produce preview thumbnails - [x] `registry-item.json` validates for all blocks - [x] Catalog pages generated (45 total items in catalog-index.json) - [x] `oxfmt --check` passes
2026-08-31 10:46:57 +00:00 · 2026-04-14 16:32:27 -07:00
parent d37d738be9
commit 9943091247
212 changed files with 12653 additions and 1614 deletions
@@ -18,6 +18,8 @@ jobs:
    timeout-minutes: 30
    steps:
      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0

      - uses: oven-sh/setup-bun@v2

@@ -38,11 +40,12 @@ jobs:
      - uses: FedericoCarboni/setup-ffmpeg@v3

      - name: Render changed block/component previews
-        continue-on-error: true
        run: |
          # Find which blocks/components changed in this PR
-          CHANGED_ITEMS=$(git diff --name-only origin/main...HEAD -- registry/blocks/ registry/components/ \
-            | grep -oP '(?<=registry/(blocks|components)/)[^/]+' \
+          BASE_SHA=${{ github.event.pull_request.base.sha }}
+          CHANGED_ITEMS=$(git diff --name-only "$BASE_SHA"...HEAD -- registry/blocks/ registry/components/ \
+            | grep -E '^registry/(blocks|components)/' \
+            | sed 's|^registry/[^/]*/\([^/]*\)/.*|\1|' \
            | sort -u)

          if [ -z "$CHANGED_ITEMS" ]; then
@@ -55,7 +58,7 @@ jobs:

          for item in $CHANGED_ITEMS; do
            echo "Rendering preview for: $item"
-            if ! npx tsx scripts/generate-catalog-previews.ts --only "$item" --skip-video; then
+            if ! timeout 120 npx tsx scripts/generate-catalog-previews.ts --only "$item" --skip-video; then
              echo "::warning::Failed to render preview for $item"
              FAILED=$((FAILED + 1))
            fi
@@ -73,4 +76,4 @@ jobs:
          name: catalog-previews
          path: docs/images/catalog/
          if-no-files-found: ignore
-          retention-days: 30
+          retention-days: 7
@@ -6,12 +6,12 @@ This repo ships skills that are installed globally via `npx hyperframes skills`

 ### Skills

-| Skill                    | Invoke with             | When to use                                                                                                                                               |
-| ------------------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **hyperframes**          | `/hyperframes`          | Creating or editing HTML compositions, captions/subtitles, TTS narration, audio-reactive animation, marker highlights. Composition authoring rules.       |
-| **hyperframes-cli**      | `/hyperframes-cli`      | CLI commands: init, lint, preview, render, transcribe, tts, doctor. Use when scaffolding, validating, previewing, or rendering.                           |
-| **hyperframes-registry** | `/hyperframes-registry` | Installing and wiring registry blocks and components via `hyperframes add`. Install locations, block iframe wiring, component snippet merging, discovery. |
-| **gsap**                 | `/gsap`                 | GSAP animations — tweens, timelines, easing, ScrollTrigger, plugins (Flip, Draggable, SplitText, etc.), React/Vue/Svelte, performance optimization.       |
+| Skill                    | Invoke with             | When to use                                                                                                                                                        |
+| ------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **hyperframes**          | `/hyperframes`          | Creating or editing HTML compositions, captions/subtitles, TTS narration, audio-reactive animation, marker highlights. Composition authoring rules.                |
+| **hyperframes-cli**      | `/hyperframes-cli`      | CLI commands: init, lint, preview, render, transcribe, tts, doctor. Use when scaffolding, validating, previewing, or rendering.                                    |
+| **hyperframes-registry** | `/hyperframes-registry` | Installing and wiring registry blocks and components via `hyperframes add`. Install locations, block sub-composition wiring, component snippet merging, discovery. |
+| **gsap**                 | `/gsap`                 | GSAP animations — tweens, timelines, easing, ScrollTrigger, plugins (Flip, Draggable, SplitText, etc.), React/Vue/Svelte, performance optimization.                |

 ### Why this matters

@@ -20,7 +20,7 @@ The skills encode HyperFrames-specific patterns (e.g., required `class="clip"` o
 ### Rules

 - When creating or modifying HTML compositions, captions, TTS, audio-reactive, or marker highlights → invoke `/hyperframes` BEFORE writing any code
- When installing or wiring registry blocks/components (`hyperframes add`, `hyperframes.json`, block iframes, component snippets) → invoke `/hyperframes-registry` BEFORE writing any code
+- When installing or wiring registry blocks/components (`hyperframes add`, `hyperframes.json`, `data-composition-src`, component snippets) → invoke `/hyperframes-registry` BEFORE writing any code
 - When writing GSAP animations (tweens, timelines, ScrollTrigger, plugins) → invoke `/gsap` BEFORE writing any code
 - After creating or editing any `.html` composition → run `npx hyperframes lint` and `npx hyperframes validate` in parallel, fix all errors before opening the studio or considering the task complete. `lint` checks the HTML structure statically; `validate` loads the composition in headless Chrome and catches runtime JS errors, missing assets, and failed network requests. Always validate before `npx hyperframes preview`.

@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -1,44 +0,0 @@
---
-title: "ASCII Dashboard"
-description: "Retro terminal-style data visualization with charts and metrics"
---
-
-# ASCII Dashboard
-
-Retro terminal-style data visualization with charts and metrics
-
-`data` `ascii` `dashboard`
-
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ascii-dashboard.mp4" poster="/images/catalog/blocks/ascii-dashboard.png" muted loop playsInline autoPlay />
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add ascii-dashboard
-```
-
-</CodeGroup>
-
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920×1080 |
-| Duration | 10s |
-
-## Files
-
-| File | Target | Type |
-| --- | --- | --- |
-| `ascii-dashboard.html` | `compositions/ascii-dashboard.html` | hyperframes:composition |
-
-## Usage
-
-After installing, add the block to your host composition:
-
-```html
-<div data-composition-id="ascii-dashboard" data-composition-src="compositions/ascii-dashboard.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
-```
@@ -1,44 +0,0 @@
---
-title: "ASCII Lightning"
-description: "Pure ASCII art lightning bolt animation on dark background"
---
-
-# ASCII Lightning
-
-Pure ASCII art lightning bolt animation on dark background
-
-`title` `ascii` `animation`
-
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ascii-lightning.mp4" poster="/images/catalog/blocks/ascii-lightning.png" muted loop playsInline autoPlay />
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add ascii-lightning
-```
-
-</CodeGroup>
-
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920×1080 |
-| Duration | 9s |
-
-## Files
-
-| File | Target | Type |
-| --- | --- | --- |
-| `ascii-lightning.html` | `compositions/ascii-lightning.html` | hyperframes:composition |
-
-## Usage
-
-After installing, add the block to your host composition:
-
-```html
-<div data-composition-id="ascii-lightning" data-composition-src="compositions/ascii-lightning.html" data-start="0" data-duration="9" data-track-index="1" data-width="1920" data-height="1080"></div>
-```
@@ -0,0 +1,44 @@
+---
+title: "Chromatic Radial Split"
+description: "Shader transition with chromatic aberration radial split"
+---
+
+# Chromatic Radial Split
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add chromatic-radial-split
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `chromatic-radial-split.html` | `compositions/chromatic-radial-split.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="chromatic-radial-split" data-composition-src="compositions/chromatic-radial-split.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Cinematic Zoom"
+description: "Shader transition with dramatic zoom blur"
+---
+
+# Cinematic Zoom
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add cinematic-zoom
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `cinematic-zoom.html` | `compositions/cinematic-zoom.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="cinematic-zoom" data-composition-src="compositions/cinematic-zoom.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Cross Warp Morph"
+description: "Shader transition with cross-warped morphing"
+---
+
+# Cross Warp Morph
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add cross-warp-morph
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `cross-warp-morph.html` | `compositions/cross-warp-morph.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="cross-warp-morph" data-composition-src="compositions/cross-warp-morph.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -0,0 +1,44 @@
+---
+title: "Domain Warp Dissolve"
+description: "Shader transition with fractal noise domain warping"
+---
+
+# Domain Warp Dissolve
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add domain-warp-dissolve
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `domain-warp-dissolve.html` | `compositions/domain-warp-dissolve.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="domain-warp-dissolve" data-composition-src="compositions/domain-warp-dissolve.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Flash Through White"
+description: "Shader transition with white flash crossfade"
+---
+
+# Flash Through White
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add flash-through-white
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `flash-through-white.html` | `compositions/flash-through-white.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="flash-through-white" data-composition-src="compositions/flash-through-white.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -0,0 +1,44 @@
+---
+title: "Glitch"
+description: "Shader transition with digital glitch artifacts"
+---
+
+# Glitch
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add glitch
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `glitch.html` | `compositions/glitch.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="glitch" data-composition-src="compositions/glitch.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Gravitational Lens"
+description: "Shader transition with gravitational lensing distortion"
+---
+
+# Gravitational Lens
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add gravitational-lens
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `gravitational-lens.html` | `compositions/gravitational-lens.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="gravitational-lens" data-composition-src="compositions/gravitational-lens.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -0,0 +1,44 @@
+---
+title: "Light Leak"
+description: "Shader transition with cinematic light leak overlay"
+---
+
+# Light Leak
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add light-leak
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `light-leak.html` | `compositions/light-leak.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="light-leak" data-composition-src="compositions/light-leak.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -0,0 +1,44 @@
+---
+title: "Ridged Burn"
+description: "Shader transition with ridged turbulence burn effect"
+---
+
+# Ridged Burn
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add ridged-burn
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `ridged-burn.html` | `compositions/ridged-burn.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ridged-burn" data-composition-src="compositions/ridged-burn.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Ripple Waves"
+description: "Shader transition with concentric ripple wave distortion"
+---
+
+# Ripple Waves
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add ripple-waves
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `ripple-waves.html` | `compositions/ripple-waves.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ripple-waves" data-composition-src="compositions/ripple-waves.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "SDF Iris"
+description: "Shader transition with signed distance field iris reveal"
+---
+
+# SDF Iris
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add sdf-iris
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `sdf-iris.html` | `compositions/sdf-iris.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="sdf-iris" data-composition-src="compositions/sdf-iris.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -0,0 +1,44 @@
+---
+title: "Swirl Vortex"
+description: "Shader transition with swirling vortex distortion"
+---
+
+# Swirl Vortex
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add swirl-vortex
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `swirl-vortex.html` | `compositions/swirl-vortex.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="swirl-vortex" data-composition-src="compositions/swirl-vortex.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Thermal Distortion"
+description: "Shader transition with heat haze thermal distortion"
+---
+
+# Thermal Distortion
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add thermal-distortion
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `thermal-distortion.html` | `compositions/thermal-distortion.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="thermal-distortion" data-composition-src="compositions/thermal-distortion.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -0,0 +1,44 @@
+---
+title: "3D Transitions"
+description: "Showcase of 3D perspective flip and rotate transitions"
+---
+
+# 3D Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-3d
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-3d.html` | `compositions/transitions-3d.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-3d" data-composition-src="compositions/transitions-3d.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Blur Transitions"
+description: "Showcase of blur-based transitions between scenes"
+---
+
+# Blur Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-blur
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 20s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-blur.html` | `compositions/transitions-blur.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-blur" data-composition-src="compositions/transitions-blur.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Cover Transitions"
+description: "Showcase of cover/uncover slide transitions"
+---
+
+# Cover Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-cover
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 21s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-cover.html` | `compositions/transitions-cover.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-cover" data-composition-src="compositions/transitions-cover.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Destruction Transitions"
+description: "Showcase of destructive break-apart transitions"
+---
+
+# Destruction Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-destruction
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 14s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-destruction.html` | `compositions/transitions-destruction.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-destruction" data-composition-src="compositions/transitions-destruction.html" data-start="0" data-duration="14" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Dissolve Transitions"
+description: "Showcase of dissolve and fade transitions"
+---
+
+# Dissolve Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-dissolve
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 24s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-dissolve.html` | `compositions/transitions-dissolve.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-dissolve" data-composition-src="compositions/transitions-dissolve.html" data-start="0" data-duration="24" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Distortion Transitions"
+description: "Showcase of warp and distortion transitions"
+---
+
+# Distortion Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-distortion
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 21s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-distortion.html` | `compositions/transitions-distortion.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-distortion" data-composition-src="compositions/transitions-distortion.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Grid Transitions"
+description: "Showcase of grid-based tile transitions"
+---
+
+# Grid Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-grid
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-grid.html` | `compositions/transitions-grid.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-grid" data-composition-src="compositions/transitions-grid.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Light Transitions"
+description: "Showcase of light-based glow and flash transitions"
+---
+
+# Light Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-light
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 21s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-light.html` | `compositions/transitions-light.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-light" data-composition-src="compositions/transitions-light.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Mechanical Transitions"
+description: "Showcase of mechanical shutter and iris transitions"
+---
+
+# Mechanical Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-mechanical
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 15s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-mechanical.html` | `compositions/transitions-mechanical.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-mechanical" data-composition-src="compositions/transitions-mechanical.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Other Transitions"
+description: "Showcase of miscellaneous creative transitions"
+---
+
+# Other Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-other
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 20s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-other.html` | `compositions/transitions-other.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-other" data-composition-src="compositions/transitions-other.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Push Transitions"
+description: "Showcase of push and slide transitions"
+---
+
+# Push Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-push
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 24s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-push.html` | `compositions/transitions-push.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-push" data-composition-src="compositions/transitions-push.html" data-start="0" data-duration="24" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Radial Transitions"
+description: "Showcase of radial wipe and reveal transitions"
+---
+
+# Radial Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-radial
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 20s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-radial.html` | `compositions/transitions-radial.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-radial" data-composition-src="compositions/transitions-radial.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -0,0 +1,44 @@
+---
+title: "Scale Transitions"
+description: "Showcase of scale and zoom transitions"
+---
+
+# Scale Transitions
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add transitions-scale
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 15s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `transitions-scale.html` | `compositions/transitions-scale.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-scale" data-composition-src="compositions/transitions-scale.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -0,0 +1,44 @@
+---
+title: "Whip Pan"
+description: "Shader transition simulating a fast camera whip pan"
+---
+
+# Whip Pan
+
+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 />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add whip-pan
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `whip-pan.html` | `compositions/whip-pan.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="whip-pan" data-composition-src="compositions/whip-pan.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -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" muted loop playsInline autoPlay />
+<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 />

 ## Install

@@ -77,6 +77,88 @@
          }
        ]
      },
+      {
+        "tab": "Catalog",
+        "groups": [
+          {
+            "group": "Social Overlays",
+            "pages": [
+              "catalog/blocks/instagram-follow",
+              "catalog/blocks/macos-notification",
+              "catalog/blocks/reddit-post",
+              "catalog/blocks/spotify-card",
+              "catalog/blocks/tiktok-follow",
+              "catalog/blocks/x-post",
+              "catalog/blocks/yt-lower-third"
+            ]
+          },
+          {
+            "group": "Shader Transitions",
+            "pages": [
+              "catalog/blocks/chromatic-radial-split",
+              "catalog/blocks/cinematic-zoom",
+              "catalog/blocks/cross-warp-morph",
+              "catalog/blocks/domain-warp-dissolve",
+              "catalog/blocks/flash-through-white",
+              "catalog/blocks/glitch",
+              "catalog/blocks/gravitational-lens",
+              "catalog/blocks/light-leak",
+              "catalog/blocks/ridged-burn",
+              "catalog/blocks/ripple-waves",
+              "catalog/blocks/sdf-iris",
+              "catalog/blocks/swirl-vortex",
+              "catalog/blocks/thermal-distortion",
+              "catalog/blocks/whip-pan"
+            ]
+          },
+          {
+            "group": "CSS Transitions",
+            "pages": [
+              "catalog/blocks/transitions-3d",
+              "catalog/blocks/transitions-blur",
+              "catalog/blocks/transitions-cover",
+              "catalog/blocks/transitions-destruction",
+              "catalog/blocks/transitions-dissolve",
+              "catalog/blocks/transitions-distortion",
+              "catalog/blocks/transitions-grid",
+              "catalog/blocks/transitions-light",
+              "catalog/blocks/transitions-mechanical",
+              "catalog/blocks/transitions-other",
+              "catalog/blocks/transitions-push",
+              "catalog/blocks/transitions-radial",
+              "catalog/blocks/transitions-scale"
+            ]
+          },
+          {
+            "group": "Showcases",
+            "pages": [
+              "catalog/blocks/app-showcase",
+              "catalog/blocks/ui-3d-reveal"
+            ]
+          },
+          {
+            "group": "Data",
+            "pages": [
+              "catalog/blocks/data-chart"
+            ]
+          },
+          {
+            "group": "Effects",
+            "pages": [
+              "catalog/components/grain-overlay",
+              "catalog/components/grid-pixelate-wipe",
+              "catalog/components/shimmer-sweep"
+            ]
+          },
+          {
+            "group": "Blocks",
+            "pages": [
+              "catalog/blocks/flowchart",
+              "catalog/blocks/logo-outro"
+            ]
+          }
+        ]
+      },
      {
        "tab": "Packages",
        "groups": [
@@ -93,38 +175,6 @@
          }
        ]
      },
-      {
-        "tab": "Catalog",
-        "groups": [
-          {
-            "group": "Blocks",
-            "pages": [
-              "catalog/blocks/app-showcase",
-              "catalog/blocks/ascii-dashboard",
-              "catalog/blocks/ascii-lightning",
-              "catalog/blocks/data-chart",
-              "catalog/blocks/flowchart",
-              "catalog/blocks/instagram-follow",
-              "catalog/blocks/logo-outro",
-              "catalog/blocks/macos-notification",
-              "catalog/blocks/reddit-post",
-              "catalog/blocks/spotify-card",
-              "catalog/blocks/tiktok-follow",
-              "catalog/blocks/ui-3d-reveal",
-              "catalog/blocks/x-post",
-              "catalog/blocks/yt-lower-third"
-            ]
-          },
-          {
-            "group": "Components",
-            "pages": [
-              "catalog/components/grain-overlay",
-              "catalog/components/grid-pixelate-wipe",
-              "catalog/components/shimmer-sweep"
-            ]
-          }
-        ]
-      },
      {
        "tab": "Reference",
        "groups": [
--- a/Show More
+++ b/Show More