Skip to content

Commit 9943091

Browse files
jrusso1020jrusso1020
authored
feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (heygen-com#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
1 parent d37d738 commit 9943091

212 files changed

Lines changed: 12642 additions & 1603 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/catalog-previews.yml‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ jobs:
1818
timeout-minutes: 30
1919
steps:
2020
- uses: actions/checkout@v4
21+
with:
22+
fetch-depth: 0
2123

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

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

4042
- name: Render changed block/component previews
41-
continue-on-error: true
4243
run: |
4344
# Find which blocks/components changed in this PR
44-
CHANGED_ITEMS=$(git diff --name-only origin/main...HEAD -- registry/blocks/ registry/components/ \
45-
| grep -oP '(?<=registry/(blocks|components)/)[^/]+' \
45+
BASE_SHA=${{ github.event.pull_request.base.sha }}
46+
CHANGED_ITEMS=$(git diff --name-only "$BASE_SHA"...HEAD -- registry/blocks/ registry/components/ \
47+
| grep -E '^registry/(blocks|components)/' \
48+
| sed 's|^registry/[^/]*/\([^/]*\)/.*|\1|' \
4649
| sort -u)
4750
4851
if [ -z "$CHANGED_ITEMS" ]; then
@@ -55,7 +58,7 @@ jobs:
5558
5659
for item in $CHANGED_ITEMS; do
5760
echo "Rendering preview for: $item"
58-
if ! npx tsx scripts/generate-catalog-previews.ts --only "$item" --skip-video; then
61+
if ! timeout 120 npx tsx scripts/generate-catalog-previews.ts --only "$item" --skip-video; then
5962
echo "::warning::Failed to render preview for $item"
6063
FAILED=$((FAILED + 1))
6164
fi
@@ -73,4 +76,4 @@ jobs:
7376
name: catalog-previews
7477
path: docs/images/catalog/
7578
if-no-files-found: ignore
76-
retention-days: 30
79+
retention-days: 7

‎CLAUDE.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ This repo ships skills that are installed globally via `npx hyperframes skills`
66

77
### Skills
88

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

1616
### Why this matters
1717

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

2222
- When creating or modifying HTML compositions, captions, TTS, audio-reactive, or marker highlights → invoke `/hyperframes` BEFORE writing any code
23-
- When installing or wiring registry blocks/components (`hyperframes add`, `hyperframes.json`, block iframes, component snippets) → invoke `/hyperframes-registry` BEFORE writing any code
23+
- When installing or wiring registry blocks/components (`hyperframes add`, `hyperframes.json`, `data-composition-src`, component snippets) → invoke `/hyperframes-registry` BEFORE writing any code
2424
- When writing GSAP animations (tweens, timelines, ScrollTrigger, plugins) → invoke `/gsap` BEFORE writing any code
2525
- 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`.
2626

‎docs/catalog/blocks/app-showcase.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Fitness app product showcase with three floating smartphone screens
99

1010
`showcase` `app` `3d`
1111

12-
<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 />
12+
<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 />
1313

1414
## Install
1515

‎docs/catalog/blocks/ascii-dashboard.mdx‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎docs/catalog/blocks/ascii-lightning.mdx‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎docs/catalog/blocks/chromatic-radial-split.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: "Chromatic Radial Split"
3+
description: "Shader transition with chromatic aberration radial split"
4+
---
5+
6+
# Chromatic Radial Split
7+
8+
Shader transition with chromatic aberration radial split
9+
10+
`transition` `shader`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add chromatic-radial-split
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Block |
29+
| Dimensions | 1920×1080 |
30+
| Duration | 4s |
31+
32+
## Files
33+
34+
| File | Target | Type |
35+
| --- | --- | --- |
36+
| `chromatic-radial-split.html` | `compositions/chromatic-radial-split.html` | hyperframes:composition |
37+
38+
## Usage
39+
40+
After installing, add the block to your host composition:
41+
42+
```html
43+
<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>
44+
```

‎docs/catalog/blocks/cinematic-zoom.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: "Cinematic Zoom"
3+
description: "Shader transition with dramatic zoom blur"
4+
---
5+
6+
# Cinematic Zoom
7+
8+
Shader transition with dramatic zoom blur
9+
10+
`transition` `shader`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add cinematic-zoom
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Block |
29+
| Dimensions | 1920×1080 |
30+
| Duration | 4s |
31+
32+
## Files
33+
34+
| File | Target | Type |
35+
| --- | --- | --- |
36+
| `cinematic-zoom.html` | `compositions/cinematic-zoom.html` | hyperframes:composition |
37+
38+
## Usage
39+
40+
After installing, add the block to your host composition:
41+
42+
```html
43+
<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>
44+
```

‎docs/catalog/blocks/cross-warp-morph.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: "Cross Warp Morph"
3+
description: "Shader transition with cross-warped morphing"
4+
---
5+
6+
# Cross Warp Morph
7+
8+
Shader transition with cross-warped morphing
9+
10+
`transition` `shader`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add cross-warp-morph
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Block |
29+
| Dimensions | 1920×1080 |
30+
| Duration | 4s |
31+
32+
## Files
33+
34+
| File | Target | Type |
35+
| --- | --- | --- |
36+
| `cross-warp-morph.html` | `compositions/cross-warp-morph.html` | hyperframes:composition |
37+
38+
## Usage
39+
40+
After installing, add the block to your host composition:
41+
42+
```html
43+
<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>
44+
```

‎docs/catalog/blocks/data-chart.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Animated bar + line chart with staggered reveal, NYT-style typography, and value
99

1010
`data` `chart` `statistics`
1111

12-
<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 />
12+
<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 />
1313

1414
## Install
1515

‎docs/catalog/blocks/domain-warp-dissolve.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: "Domain Warp Dissolve"
3+
description: "Shader transition with fractal noise domain warping"
4+
---
5+
6+
# Domain Warp Dissolve
7+
8+
Shader transition with fractal noise domain warping
9+
10+
`transition` `shader`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add domain-warp-dissolve
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Block |
29+
| Dimensions | 1920×1080 |
30+
| Duration | 4s |
31+
32+
## Files
33+
34+
| File | Target | Type |
35+
| --- | --- | --- |
36+
| `domain-warp-dissolve.html` | `compositions/domain-warp-dissolve.html` | hyperframes:composition |
37+
38+
## Usage
39+
40+
After installing, add the block to your host composition:
41+
42+
```html
43+
<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>
44+
```

0 commit comments

Comments
 (0)