feat(registry): add 15 caption style catalog components

Add 15 caption overlay components to the registry, covering a wide
range of animation techniques:

Standalone origins (6):
- caption-pill-karaoke: pill container + karaoke word highlight
- caption-neon-accent: multi-color neon glow with wiggle drift
- caption-weight-shift: font-weight transition between lines
- caption-emoji-pop: emoji + stroked text + horizontal squeeze
- caption-editorial-emphasis: dual-font (Inter + Playfair) emphasis
- caption-parallax-layers: 3D text layering with vertical stretch

Gallery picks (9):
- caption-glitch-rgb: RGB chromatic aberration + CRT scanlines
- caption-typewriter: green terminal char-by-char with cursor
- caption-matrix-decode: scramble-reveal character animation
- caption-particle-burst: keyword particle explosions
- caption-texture-lava: flowing lava texture mask
- caption-clip-wipe: clip-path left-to-right wipe reveal
- caption-kinetic-slam: full-screen single-word slam
- caption-gradient-fill: gradient-clipped text + elastic bounce
- caption-neon-glow: cyan/magenta neon glow accents

Each component includes the reusable HTML, a demo composition,
and registry-item.json. All use a generic HyperFrames transcript.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Miguel Ángel
2026-05-17 19:57:25 +00:00
co-authored by Claude Sonnet 4.6
parent 7a1e8769a5
commit 78ddd2602b
47 changed files with 7675 additions and 0 deletions
+60
View File
@@ -67,6 +67,66 @@
"name": "vignette",
"type": "hyperframes:component"
},
{
"name": "caption-pill-karaoke",
"type": "hyperframes:component"
},
{
"name": "caption-neon-accent",
"type": "hyperframes:component"
},
{
"name": "caption-weight-shift",
"type": "hyperframes:component"
},
{
"name": "caption-emoji-pop",
"type": "hyperframes:component"
},
{
"name": "caption-editorial-emphasis",
"type": "hyperframes:component"
},
{
"name": "caption-parallax-layers",
"type": "hyperframes:component"
},
{
"name": "caption-glitch-rgb",
"type": "hyperframes:component"
},
{
"name": "caption-typewriter",
"type": "hyperframes:component"
},
{
"name": "caption-matrix-decode",
"type": "hyperframes:component"
},
{
"name": "caption-particle-burst",
"type": "hyperframes:component"
},
{
"name": "caption-texture-lava",
"type": "hyperframes:component"
},
{
"name": "caption-clip-wipe",
"type": "hyperframes:component"
},
{
"name": "caption-kinetic-slam",
"type": "hyperframes:component"
},
{
"name": "caption-gradient-fill",
"type": "hyperframes:component"
},
{
"name": "caption-neon-glow",
"type": "hyperframes:component"
},
{
"name": "instagram-follow",
"type": "hyperframes:block"