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

fix(registry): align timeline IDs and regenerate catalog index

Browse Source 
- Fix timeline_id_mismatch on all 15 caption components: __timelines key
  now matches data-composition-id (e.g. "caption-clip-wipe" not "clip-wipe")
- Regenerate docs/public/catalog-index.json with 15 new caption entries
- Add "Captions" group mapping to generate-catalog-pages.ts (priority 0)
- Regenerate docs.json nav and mdx pages via the catalog script
- Upload docs preview videos to docs/images CDN path
This commit is contained in:
Miguel Ángel
2026-05-17 17:19:42 -04:00
parent 7dc795f60f
commit ae193d99b9
48 changed files with 283 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/catalog/components/caption-clip-wipe.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Left-to-right clip-path wipe reveal per word
`captions` `caption-style` `wipe` `clip-path` `reveal`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-editorial-emphasis.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Dual-font system with dramatic size contrast for emphasis words
`captions` `caption-style` `editorial` `typography` `emphasis`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-emoji-pop.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Emoji integration with stroked text and horizontal squeeze entrance
`captions` `caption-style` `emoji` `social`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-glitch-rgb.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ RGB chromatic aberration with CRT scanline overlay
`captions` `caption-style` `glitch` `cyber` `tech`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-gradient-fill.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Gradient-clipped text with elastic bounce entrance
`captions` `caption-style` `gradient` `colorful`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-kinetic-slam.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Full-screen single-word display with alternating entrance directions
`captions` `caption-style` `kinetic` `typography` `slam`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-matrix-decode.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Character scramble animation before text reveal
`captions` `caption-style` `matrix` `scramble` `decode`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-neon-accent.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Multi-color neon glow accents with wiggle drift animation
`captions` `caption-style` `neon` `glow` `accent`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-neon-glow.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Cyan and magenta neon glow with keyword accent colors
`captions` `caption-style` `neon` `glow` `gaming`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-parallax-layers.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Behind-subject 3D text layering with vertical stretch effect
`captions` `caption-style` `parallax` `3d` `depth`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-particle-burst.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Keyword words trigger colored particle explosions
`captions` `caption-style` `particles` `burst` `effects`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-pill-karaoke.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Pill-shaped container with per-word karaoke color highlight
`captions` `caption-style` `karaoke` `pill`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-texture-lava.mdx
+2 -1
View File
@@ -9,7 +9,7 @@ Flowing lava texture mask over large uppercase text
`captions` `caption-style` `texture` `lava` `mask`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture-lava.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture-lava.png" autoPlay muted loop playsInline />
## Install
@@ -32,6 +32,7 @@ npx hyperframes add caption-texture-lava
| File | Target | Type |
| --- | --- | --- |
| `caption-texture-lava.html` | `compositions/components/caption-texture-lava.html` | hyperframes:snippet |
| `lava.png` | `compositions/components/lava.png` | hyperframes:asset |
## Usage
docs/catalog/components/caption-typewriter.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Green terminal character-by-character reveal with blinking cursor
`captions` `caption-style` `terminal` `typewriter` `hacker`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-typewriter.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-typewriter.png" autoPlay muted loop playsInline />
## Install
docs/catalog/components/caption-weight-shift.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ Elegant font-weight transition between caption lines
`captions` `caption-style` `minimal` `typography`
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png" autoPlay muted loop playsInline />
## Install
docs/docs.json
+13 -13
View File
@@ -98,21 +98,21 @@
{
"group": "Captions",
"pages": [
"catalog/components/caption-pill-karaoke",
"catalog/components/caption-neon-accent",
"catalog/components/caption-weight-shift",
"catalog/components/caption-emoji-pop",
"catalog/components/caption-editorial-emphasis",
"catalog/components/caption-parallax-layers",
"catalog/components/caption-glitch-rgb",
"catalog/components/caption-typewriter",
"catalog/components/caption-matrix-decode",
"catalog/components/caption-particle-burst",
"catalog/components/caption-texture-lava",
"catalog/components/caption-clip-wipe",
"catalog/components/caption-kinetic-slam",
"catalog/components/caption-editorial-emphasis",
"catalog/components/caption-emoji-pop",
"catalog/components/caption-glitch-rgb",
"catalog/components/caption-gradient-fill",
"catalog/components/caption-neon-glow"
"catalog/components/caption-kinetic-slam",
"catalog/components/caption-matrix-decode",
"catalog/components/caption-neon-accent",
"catalog/components/caption-neon-glow",
"catalog/components/caption-parallax-layers",
"catalog/components/caption-particle-burst",
"catalog/components/caption-pill-karaoke",
"catalog/components/caption-texture-lava",
"catalog/components/caption-typewriter",
"catalog/components/caption-weight-shift"
]
},
{
docs/public/catalog-index.json
+221
View File
@@ -41,6 +41,227 @@
"href": "/catalog/blocks/blue-sweater-intro-video",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
},
{
"name": "caption-clip-wipe",
"type": "component",
"title": "Clip Wipe",
"description": "Left-to-right clip-path wipe reveal per word",
"tags": [
"captions",
"caption-style",
"wipe",
"clip-path",
"reveal"
],
"href": "/catalog/components/caption-clip-wipe",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png"
},
{
"name": "caption-editorial-emphasis",
"type": "component",
"title": "Editorial Emphasis",
"description": "Dual-font system with dramatic size contrast for emphasis words",
"tags": [
"captions",
"caption-style",
"editorial",
"typography",
"emphasis"
],
"href": "/catalog/components/caption-editorial-emphasis",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png"
},
{
"name": "caption-emoji-pop",
"type": "component",
"title": "Emoji Pop",
"description": "Emoji integration with stroked text and horizontal squeeze entrance",
"tags": [
"captions",
"caption-style",
"emoji",
"social"
],
"href": "/catalog/components/caption-emoji-pop",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png"
},
{
"name": "caption-glitch-rgb",
"type": "component",
"title": "Glitch RGB",
"description": "RGB chromatic aberration with CRT scanline overlay",
"tags": [
"captions",
"caption-style",
"glitch",
"cyber",
"tech"
],
"href": "/catalog/components/caption-glitch-rgb",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png"
},
{
"name": "caption-gradient-fill",
"type": "component",
"title": "Gradient Fill",
"description": "Gradient-clipped text with elastic bounce entrance",
"tags": [
"captions",
"caption-style",
"gradient",
"colorful"
],
"href": "/catalog/components/caption-gradient-fill",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
},
{
"name": "caption-kinetic-slam",
"type": "component",
"title": "Kinetic Slam",
"description": "Full-screen single-word display with alternating entrance directions",
"tags": [
"captions",
"caption-style",
"kinetic",
"typography",
"slam"
],
"href": "/catalog/components/caption-kinetic-slam",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png"
},
{
"name": "caption-matrix-decode",
"type": "component",
"title": "Matrix Decode",
"description": "Character scramble animation before text reveal",
"tags": [
"captions",
"caption-style",
"matrix",
"scramble",
"decode"
],
"href": "/catalog/components/caption-matrix-decode",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png"
},
{
"name": "caption-neon-accent",
"type": "component",
"title": "Neon Accent",
"description": "Multi-color neon glow accents with wiggle drift animation",
"tags": [
"captions",
"caption-style",
"neon",
"glow",
"accent"
],
"href": "/catalog/components/caption-neon-accent",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png"
},
{
"name": "caption-neon-glow",
"type": "component",
"title": "Neon Glow",
"description": "Cyan and magenta neon glow with keyword accent colors",
"tags": [
"captions",
"caption-style",
"neon",
"glow",
"gaming"
],
"href": "/catalog/components/caption-neon-glow",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png"
},
{
"name": "caption-parallax-layers",
"type": "component",
"title": "Parallax Layers",
"description": "Behind-subject 3D text layering with vertical stretch effect",
"tags": [
"captions",
"caption-style",
"parallax",
"3d",
"depth"
],
"href": "/catalog/components/caption-parallax-layers",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png"
},
{
"name": "caption-particle-burst",
"type": "component",
"title": "Particle Burst",
"description": "Keyword words trigger colored particle explosions",
"tags": [
"captions",
"caption-style",
"particles",
"burst",
"effects"
],
"href": "/catalog/components/caption-particle-burst",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png"
},
{
"name": "caption-pill-karaoke",
"type": "component",
"title": "Pill Karaoke",
"description": "Pill-shaped container with per-word karaoke color highlight",
"tags": [
"captions",
"caption-style",
"karaoke",
"pill"
],
"href": "/catalog/components/caption-pill-karaoke",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
},
{
"name": "caption-texture-lava",
"type": "component",
"title": "Texture Lava",
"description": "Flowing lava texture mask over large uppercase text",
"tags": [
"captions",
"caption-style",
"texture",
"lava",
"mask"
],
"href": "/catalog/components/caption-texture-lava",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture-lava.png"
},
{
"name": "caption-typewriter",
"type": "component",
"title": "Typewriter",
"description": "Green terminal character-by-character reveal with blinking cursor",
"tags": [
"captions",
"caption-style",
"terminal",
"typewriter",
"hacker"
],
"href": "/catalog/components/caption-typewriter",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-typewriter.png"
},
{
"name": "caption-weight-shift",
"type": "component",
"title": "Weight Shift",
"description": "Elegant font-weight transition between caption lines",
"tags": [
"captions",
"caption-style",
"minimal",
"typography"
],
"href": "/catalog/components/caption-weight-shift",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png"
},
{
"name": "chromatic-radial-split",
"type": "block",
registry/components/caption-clip-wipe/caption-clip-wipe.html
Vendored
+1 -1
View File
@@ -234,7 +234,7 @@
});
tl.seek(0);
window.__timelines["clip-wipe"] = tl;
window.__timelines["caption-clip-wipe"] = tl;
})();
</script>
</body>
registry/components/caption-clip-wipe/demo.html
Vendored
+1 -1
View File
@@ -234,7 +234,7 @@
});
tl.seek(0);
window.__timelines["clip-wipe"] = tl;
window.__timelines["caption-clip-wipe"] = tl;
})();
</script>
</body>
registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
Vendored
+1 -1
View File
@@ -424,7 +424,7 @@
});
tl.to({}, { duration: DURATION }, 0);
window.__timelines["editorial-emphasis"] = tl;
window.__timelines["caption-editorial-emphasis"] = tl;
</script>
</body>
</html>
registry/components/caption-editorial-emphasis/demo.html
Vendored
+1 -1
View File
@@ -424,7 +424,7 @@
});
tl.to({}, { duration: DURATION }, 0);
window.__timelines["editorial-emphasis"] = tl;
window.__timelines["caption-editorial-emphasis"] = tl;
</script>
</body>
</html>
registry/components/caption-emoji-pop/caption-emoji-pop.html
Vendored
+1 -1
View File
@@ -478,7 +478,7 @@
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});
window.__timelines["emoji-pop"] = tl;
window.__timelines["caption-emoji-pop"] = tl;
</script>
</body>
</html>
registry/components/caption-emoji-pop/demo.html
Vendored
+1 -1
View File
@@ -478,7 +478,7 @@
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});
window.__timelines["emoji-pop"] = tl;
window.__timelines["caption-emoji-pop"] = tl;
</script>
</body>
</html>
registry/components/caption-glitch-rgb/caption-glitch-rgb.html
Vendored
+1 -1
View File
@@ -305,7 +305,7 @@
});
tl.seek(0);
window.__timelines["glitch-rgb"] = tl;
window.__timelines["caption-glitch-rgb"] = tl;
})();
</script>
</body>
registry/components/caption-glitch-rgb/demo.html
Vendored
+1 -1
View File
@@ -305,7 +305,7 @@
});
tl.seek(0);
window.__timelines["glitch-rgb"] = tl;
window.__timelines["caption-glitch-rgb"] = tl;
})();
</script>
</body>
registry/components/caption-gradient-fill/caption-gradient-fill.html
Vendored
+1 -1
View File
@@ -241,7 +241,7 @@
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
window.__timelines["gradient-fill"] = tl;
window.__timelines["caption-gradient-fill"] = tl;
})();
</script>
</body>
registry/components/caption-gradient-fill/demo.html
Vendored
+1 -1
View File
@@ -241,7 +241,7 @@
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
window.__timelines["gradient-fill"] = tl;
window.__timelines["caption-gradient-fill"] = tl;
})();
</script>
</body>
registry/components/caption-kinetic-slam/caption-kinetic-slam.html
Vendored
+1 -1
View File
@@ -202,7 +202,7 @@
});
tl.seek(0);
window.__timelines["kinetic-slam"] = tl;
window.__timelines["caption-kinetic-slam"] = tl;
})();
</script>
</body>
registry/components/caption-kinetic-slam/demo.html
Vendored
+1 -1
View File
@@ -202,7 +202,7 @@
});
tl.seek(0);
window.__timelines["kinetic-slam"] = tl;
window.__timelines["caption-kinetic-slam"] = tl;
})();
</script>
</body>
registry/components/caption-matrix-decode/caption-matrix-decode.html
Vendored
+1 -1
View File
@@ -258,7 +258,7 @@
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
window.__timelines["matrix-decode"] = tl;
window.__timelines["caption-matrix-decode"] = tl;
})();
</script>
</body>
registry/components/caption-matrix-decode/demo.html
Vendored
+1 -1
View File
@@ -258,7 +258,7 @@
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
window.__timelines["matrix-decode"] = tl;
window.__timelines["caption-matrix-decode"] = tl;
})();
</script>
</body>
registry/components/caption-neon-accent/caption-neon-accent.html
Vendored
+1 -1
View File
@@ -525,7 +525,7 @@
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});
window.__timelines["neon-accent"] = tl;
window.__timelines["caption-neon-accent"] = tl;
</script>
</body>
</html>
registry/components/caption-neon-accent/demo.html
Vendored
+1 -1
View File
@@ -525,7 +525,7 @@
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});
window.__timelines["neon-accent"] = tl;
window.__timelines["caption-neon-accent"] = tl;
</script>
</body>
</html>
registry/components/caption-neon-glow/caption-neon-glow.html
Vendored
+1 -1
View File
@@ -224,7 +224,7 @@
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
window.__timelines["neon-glow"] = tl;
window.__timelines["caption-neon-glow"] = tl;
})();
</script>
</body>
registry/components/caption-neon-glow/demo.html
Vendored
+1 -1
View File
@@ -224,7 +224,7 @@
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
window.__timelines["neon-glow"] = tl;
window.__timelines["caption-neon-glow"] = tl;
})();
</script>
</body>
registry/components/caption-parallax-layers/caption-parallax-layers.html
Vendored
+1 -1
View File
@@ -363,7 +363,7 @@
});
tl.to({}, { duration: DURATION }, 0);
window.__timelines["parallax-layers"] = tl;
window.__timelines["caption-parallax-layers"] = tl;
document.fonts.ready.then(function () {
applyBehindScales();
registry/components/caption-parallax-layers/demo.html
Vendored
+1 -1
View File
@@ -363,7 +363,7 @@
});
tl.to({}, { duration: DURATION }, 0);
window.__timelines["parallax-layers"] = tl;
window.__timelines["caption-parallax-layers"] = tl;
document.fonts.ready.then(function () {
applyBehindScales();
registry/components/caption-particle-burst/caption-particle-burst.html
Vendored
+1 -1
View File
@@ -304,7 +304,7 @@
});
tl.seek(0);
window.__timelines["particle-burst"] = tl;
window.__timelines["caption-particle-burst"] = tl;
})();
</script>
</body>
registry/components/caption-particle-burst/demo.html
Vendored
+1 -1
View File
@@ -304,7 +304,7 @@
});
tl.seek(0);
window.__timelines["particle-burst"] = tl;
window.__timelines["caption-particle-burst"] = tl;
})();
</script>
</body>
registry/components/caption-pill-karaoke/caption-pill-karaoke.html
Vendored
+1 -1
View File
@@ -393,7 +393,7 @@
});
});
window.__timelines["pill-karaoke"] = tl;
window.__timelines["caption-pill-karaoke"] = tl;
</script>
</body>
</html>
registry/components/caption-pill-karaoke/demo.html
Vendored
+1 -1
View File
@@ -393,7 +393,7 @@
});
});
window.__timelines["pill-karaoke"] = tl;
window.__timelines["caption-pill-karaoke"] = tl;
</script>
</body>
</html>
registry/components/caption-texture-lava/caption-texture-lava.html
Vendored
+1 -1
View File
@@ -215,7 +215,7 @@
});
tl.seek(0);
window.__timelines["texture-lava"] = tl;
window.__timelines["caption-texture-lava"] = tl;
})();
</script>
</body>
registry/components/caption-texture-lava/demo.html
Vendored
+1 -1
View File
@@ -215,7 +215,7 @@
});
tl.seek(0);
window.__timelines["texture-lava"] = tl;
window.__timelines["caption-texture-lava"] = tl;
})();
</script>
</body>
registry/components/caption-typewriter/caption-typewriter.html
Vendored
+1 -1
View File
@@ -237,7 +237,7 @@
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
window.__timelines["typewriter"] = tl;
window.__timelines["caption-typewriter"] = tl;
})();
</script>
</body>
registry/components/caption-typewriter/demo.html
Vendored
+1 -1
View File
@@ -237,7 +237,7 @@
tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
});
window.__timelines["typewriter"] = tl;
window.__timelines["caption-typewriter"] = tl;
})();
</script>
</body>
registry/components/caption-weight-shift/caption-weight-shift.html
Vendored
+1 -1
View File
@@ -377,7 +377,7 @@
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});
window.__timelines["weight-shift"] = tl;
window.__timelines["caption-weight-shift"] = tl;
</script>
</body>
</html>
registry/components/caption-weight-shift/demo.html
Vendored
+1 -1
View File
@@ -377,7 +377,7 @@
tl.set(groupEl, { opacity: 0 }, visibleEnd);
});
window.__timelines["weight-shift"] = tl;
window.__timelines["caption-weight-shift"] = tl;
</script>
</body>
</html>
scripts/generate-catalog-pages.ts
+3 -2
View File
@@ -519,7 +519,8 @@ function main(): void {
// Items with the same first tag are grouped together. Items without tags
// go into an "Other" group. Groups are sorted with a priority order.
const GROUP_ORDER: Record<string, number> = {
"HTML-in-Canvas": 0,
Captions: 0,
"HTML-in-Canvas": 1,
"Social Overlays": 2,
"Shader Transitions": 3,
"CSS Transitions": 4,
@@ -534,7 +535,7 @@ function main(): void {
// Two-tag combos for specific grouping
if (tags.includes("transition") && tags.includes("shader")) return "Shader Transitions";
if (tags.includes("transition") && tags.includes("showcase")) return "CSS Transitions";
// HTML-in-Canvas and Captions categories
if (tags.includes("captions")) return "Captions";
if (tags.includes("html-in-canvas")) return "HTML-in-Canvas";
// Single-tag mapping
if (tags.includes("social")) return "Social Overlays";