ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
## 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
This commit is contained in:
James Russo
2026-04-14 16:32:27 -07:00
committed by GitHub
parent d37d738be9
commit 9943091247
212 changed files with 12653 additions and 1614 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/catalog/blocks/app-showcase.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/ascii-dashboard.mdx
-44
View File
@@ -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>
```
docs/catalog/blocks/ascii-lightning.mdx
-44
View File
@@ -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>
```
docs/catalog/blocks/chromatic-radial-split.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/cinematic-zoom.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/cross-warp-morph.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/data-chart.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/domain-warp-dissolve.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/flash-through-white.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/flowchart.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/glitch.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/gravitational-lens.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/instagram-follow.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/light-leak.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/logo-outro.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/macos-notification.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/reddit-post.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/ridged-burn.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/ripple-waves.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/sdf-iris.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/spotify-card.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/swirl-vortex.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/thermal-distortion.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/tiktok-follow.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/transitions-3d.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-blur.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-cover.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-destruction.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-dissolve.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-distortion.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-grid.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-light.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-mechanical.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-other.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-push.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-radial.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/transitions-scale.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/ui-3d-reveal.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/whip-pan.mdx
+44
View File
@@ -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>
```
docs/catalog/blocks/x-post.mdx
+1 -1
View File
@@ -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
docs/catalog/blocks/yt-lower-third.mdx
+1 -1
View File
@@ -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
docs/catalog/components/grain-overlay.mdx
+1 -1
View File
@@ -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
docs/catalog/components/grid-pixelate-wipe.mdx
+1 -1
View File
@@ -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
docs/catalog/components/shimmer-sweep.mdx
+1 -1
View File
@@ -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