From 552b9828f643b9047b9c6f30e0fdcc572178bb52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 20 May 2026 01:10:36 -0400 Subject: [PATCH 01/14] docs(skill): add catalog references for blocks and components Surface the full registry of pre-built blocks and components directly in the main authoring skill so agents know what's available before building from scratch. Adds CLI commands, use-case tables grouped by category (transitions, social, data, maps, VFX, captions, overlays), and quick-pick suggestions for common user requests. --- skills/hyperframes/SKILL.md | 50 +++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/skills/hyperframes/SKILL.md b/skills/hyperframes/SKILL.md index f68c52dac..76e317172 100644 --- a/skills/hyperframes/SKILL.md +++ b/skills/hyperframes/SKILL.md @@ -464,6 +464,56 @@ Skip on small edits (fixing a color, adjusting one duration). Run on new composi --- +## Catalog: Pre-Built Blocks & Components + +The HyperFrames registry ships ready-to-use blocks (full compositions with fixed dimensions and duration) and components (reusable snippets you drop into any composition). Browse interactively or install directly: + +```bash +npx hyperframes catalog # list everything +npx hyperframes catalog --type block # blocks only +npx hyperframes catalog --type component # components only +npx hyperframes catalog --tag social # filter by tag +npx hyperframes catalog --human-friendly # interactive picker +npx hyperframes add # install into current project +``` + +Full catalog with previews: [hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog) + +### When to suggest catalog items + +Before building something from scratch, check whether a catalog item already covers the need. Suggest `npx hyperframes add ` when the user's request matches a category below — it's faster to customize an existing block than to author one from zero. + +### Blocks by use case + +| Need | Blocks | Tags to filter | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | +| **Scene transitions** | `transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-push`, `transitions-radial`, `transitions-scale`, `flash-through-white`, `cinematic-zoom`, `whip-pan`, `light-leak`, `glitch`, `cross-warp-morph`, `domain-warp-dissolve`, `swirl-vortex`, `ripple-waves`, `thermal-distortion`, `gravitational-lens`, `sdf-iris`, `ridged-burn`, `chromatic-radial-split` | `transition` | +| **Social media cards** | `instagram-follow`, `tiktok-follow`, `yt-lower-third`, `x-post`, `reddit-post`, `spotify-card` | `social` | +| **Data & charts** | `data-chart`, `flowchart` | `data`, `chart` | +| **Maps** | `us-map`, `us-map-bubble`, `us-map-flow`, `us-map-hex`, `world-map`, `spain-map` | `map`, `geography` | +| **Product & device showcases** | `app-showcase`, `vfx-iphone-device`, `ui-3d-reveal` | `showcase`, `device` | +| **VFX & motion graphics** | `vfx-liquid-background`, `vfx-liquid-glass`, `vfx-magnetic`, `vfx-portal`, `vfx-shatter`, `vfx-text-cursor` | `effects`, `webgl` | +| **Branding & outros** | `logo-outro`, `apple-money-count` | `logo`, `branding`, `finance` | +| **Notifications & UI** | `macos-notification` | `notification` | + +### Components by use case + +| Need | Components | Tags to filter | +| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| **Caption styles** | `caption-clip-wipe`, `caption-editorial-emphasis`, `caption-emoji-pop`, `caption-glitch-rgb`, `caption-gradient-fill`, `caption-highlight`, `caption-kinetic-slam`, `caption-matrix-decode`, `caption-neon-accent`, `caption-neon-glow`, `caption-parallax-layers`, `caption-particle-burst`, `caption-pill-karaoke`, `caption-texture-lava`, `caption-weight-shift` | `caption-style` | +| **Visual overlays & effects** | `grain-overlay`, `shimmer-sweep`, `grid-pixelate-wipe`, `texture-mask-text`, `vignette` | `overlay`, `effect` | + +### Quick picks + +- User wants **transitions between scenes** → suggest `npx hyperframes add transitions-blur` (or whichever style fits the mood). Each transition block bundles multiple variants. +- User wants **captions** → suggest a caption component that matches the energy. `caption-highlight` for TikTok-style, `caption-editorial-emphasis` for cinematic, `caption-glitch-rgb` for tech/cyber. +- User wants **data visualization** → `npx hyperframes add data-chart` includes animated bar, line, pie, and area charts with configurable data. +- User wants **social proof** → suggest the matching platform card (`x-post`, `reddit-post`, `instagram-follow`, etc.). +- User wants **film grain or cinematic look** → `npx hyperframes add grain-overlay` + `npx hyperframes add vignette`. +- User wants **a map** → pick the geographic region: `us-map` for US states, `world-map` for global, `spain-map` for Spain. + +--- + ## References (loaded on demand) - **[references/captions.md](references/captions.md)** — Captions, subtitles, lyrics, karaoke synced to audio. Tone-adaptive style detection, per-word styling, text overflow prevention, caption exit guarantees, word grouping. Read when adding any text synced to audio timing. From 4e8d9f2a18c19b0e13b53976530b503d984cb1cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 20 May 2026 01:19:34 -0400 Subject: [PATCH 02/14] =?UTF-8?q?fix(skill):=20correct=20catalog=20table?= =?UTF-8?q?=20=E2=80=94=20fix=20caption-texture=20name,=20add=206=20missin?= =?UTF-8?q?g=20blocks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - caption-texture-lava → caption-texture (matches registry-item.json) - Add transitions-destruction, transitions-other to Scene transitions - Add vpn-youtube-spot to Social media cards - Add blue-sweater-intro-video to Product & device showcases - Add north-korea-locked-down, nyc-paris-flight as Narrative showcases row - All 77 registry items now verified against registry/registry.json --- skills/hyperframes/SKILL.md | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/skills/hyperframes/SKILL.md b/skills/hyperframes/SKILL.md index 76e317172..472473104 100644 --- a/skills/hyperframes/SKILL.md +++ b/skills/hyperframes/SKILL.md @@ -485,23 +485,24 @@ Before building something from scratch, check whether a catalog item already cov ### Blocks by use case -| Need | Blocks | Tags to filter | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -| **Scene transitions** | `transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-push`, `transitions-radial`, `transitions-scale`, `flash-through-white`, `cinematic-zoom`, `whip-pan`, `light-leak`, `glitch`, `cross-warp-morph`, `domain-warp-dissolve`, `swirl-vortex`, `ripple-waves`, `thermal-distortion`, `gravitational-lens`, `sdf-iris`, `ridged-burn`, `chromatic-radial-split` | `transition` | -| **Social media cards** | `instagram-follow`, `tiktok-follow`, `yt-lower-third`, `x-post`, `reddit-post`, `spotify-card` | `social` | -| **Data & charts** | `data-chart`, `flowchart` | `data`, `chart` | -| **Maps** | `us-map`, `us-map-bubble`, `us-map-flow`, `us-map-hex`, `world-map`, `spain-map` | `map`, `geography` | -| **Product & device showcases** | `app-showcase`, `vfx-iphone-device`, `ui-3d-reveal` | `showcase`, `device` | -| **VFX & motion graphics** | `vfx-liquid-background`, `vfx-liquid-glass`, `vfx-magnetic`, `vfx-portal`, `vfx-shatter`, `vfx-text-cursor` | `effects`, `webgl` | -| **Branding & outros** | `logo-outro`, `apple-money-count` | `logo`, `branding`, `finance` | -| **Notifications & UI** | `macos-notification` | `notification` | +| Need | Blocks | Tags to filter | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | +| **Scene transitions** | `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`, `flash-through-white`, `cinematic-zoom`, `whip-pan`, `light-leak`, `glitch`, `cross-warp-morph`, `domain-warp-dissolve`, `swirl-vortex`, `ripple-waves`, `thermal-distortion`, `gravitational-lens`, `sdf-iris`, `ridged-burn`, `chromatic-radial-split` | `transition` | +| **Social media cards** | `instagram-follow`, `tiktok-follow`, `yt-lower-third`, `x-post`, `reddit-post`, `spotify-card`, `vpn-youtube-spot` | `social` | +| **Data & charts** | `data-chart`, `flowchart` | `data`, `chart` | +| **Maps** | `us-map`, `us-map-bubble`, `us-map-flow`, `us-map-hex`, `world-map`, `spain-map` | `map`, `geography` | +| **Product & device showcases** | `app-showcase`, `vfx-iphone-device`, `ui-3d-reveal`, `blue-sweater-intro-video` | `showcase`, `device` | +| **VFX & motion graphics** | `vfx-liquid-background`, `vfx-liquid-glass`, `vfx-magnetic`, `vfx-portal`, `vfx-shatter`, `vfx-text-cursor` | `effects`, `webgl` | +| **Branding & outros** | `logo-outro`, `apple-money-count` | `logo`, `branding`, `finance` | +| **Narrative showcases** | `north-korea-locked-down`, `nyc-paris-flight` | `cinematic`, `travel` | +| **Notifications & UI** | `macos-notification` | `notification` | ### Components by use case -| Need | Components | Tags to filter | -| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| **Caption styles** | `caption-clip-wipe`, `caption-editorial-emphasis`, `caption-emoji-pop`, `caption-glitch-rgb`, `caption-gradient-fill`, `caption-highlight`, `caption-kinetic-slam`, `caption-matrix-decode`, `caption-neon-accent`, `caption-neon-glow`, `caption-parallax-layers`, `caption-particle-burst`, `caption-pill-karaoke`, `caption-texture-lava`, `caption-weight-shift` | `caption-style` | -| **Visual overlays & effects** | `grain-overlay`, `shimmer-sweep`, `grid-pixelate-wipe`, `texture-mask-text`, `vignette` | `overlay`, `effect` | +| Need | Components | Tags to filter | +| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| **Caption styles** | `caption-clip-wipe`, `caption-editorial-emphasis`, `caption-emoji-pop`, `caption-glitch-rgb`, `caption-gradient-fill`, `caption-highlight`, `caption-kinetic-slam`, `caption-matrix-decode`, `caption-neon-accent`, `caption-neon-glow`, `caption-parallax-layers`, `caption-particle-burst`, `caption-pill-karaoke`, `caption-texture`, `caption-weight-shift` | `caption-style` | +| **Visual overlays & effects** | `grain-overlay`, `shimmer-sweep`, `grid-pixelate-wipe`, `texture-mask-text`, `vignette` | `overlay`, `effect` | ### Quick picks From 771abe8373aa85a3bdc7397a125af259768d2d45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 20 May 2026 01:37:33 -0400 Subject: [PATCH 03/14] =?UTF-8?q?Revert=20"fix(skill):=20correct=20catalog?= =?UTF-8?q?=20table=20=E2=80=94=20fix=20caption-texture=20name,=20add=206?= =?UTF-8?q?=20missing=20blocks"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 4e8d9f2a18c19b0e13b53976530b503d984cb1cd. --- skills/hyperframes/SKILL.md | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/skills/hyperframes/SKILL.md b/skills/hyperframes/SKILL.md index 472473104..76e317172 100644 --- a/skills/hyperframes/SKILL.md +++ b/skills/hyperframes/SKILL.md @@ -485,24 +485,23 @@ Before building something from scratch, check whether a catalog item already cov ### Blocks by use case -| Need | Blocks | Tags to filter | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -| **Scene transitions** | `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`, `flash-through-white`, `cinematic-zoom`, `whip-pan`, `light-leak`, `glitch`, `cross-warp-morph`, `domain-warp-dissolve`, `swirl-vortex`, `ripple-waves`, `thermal-distortion`, `gravitational-lens`, `sdf-iris`, `ridged-burn`, `chromatic-radial-split` | `transition` | -| **Social media cards** | `instagram-follow`, `tiktok-follow`, `yt-lower-third`, `x-post`, `reddit-post`, `spotify-card`, `vpn-youtube-spot` | `social` | -| **Data & charts** | `data-chart`, `flowchart` | `data`, `chart` | -| **Maps** | `us-map`, `us-map-bubble`, `us-map-flow`, `us-map-hex`, `world-map`, `spain-map` | `map`, `geography` | -| **Product & device showcases** | `app-showcase`, `vfx-iphone-device`, `ui-3d-reveal`, `blue-sweater-intro-video` | `showcase`, `device` | -| **VFX & motion graphics** | `vfx-liquid-background`, `vfx-liquid-glass`, `vfx-magnetic`, `vfx-portal`, `vfx-shatter`, `vfx-text-cursor` | `effects`, `webgl` | -| **Branding & outros** | `logo-outro`, `apple-money-count` | `logo`, `branding`, `finance` | -| **Narrative showcases** | `north-korea-locked-down`, `nyc-paris-flight` | `cinematic`, `travel` | -| **Notifications & UI** | `macos-notification` | `notification` | +| Need | Blocks | Tags to filter | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | +| **Scene transitions** | `transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-push`, `transitions-radial`, `transitions-scale`, `flash-through-white`, `cinematic-zoom`, `whip-pan`, `light-leak`, `glitch`, `cross-warp-morph`, `domain-warp-dissolve`, `swirl-vortex`, `ripple-waves`, `thermal-distortion`, `gravitational-lens`, `sdf-iris`, `ridged-burn`, `chromatic-radial-split` | `transition` | +| **Social media cards** | `instagram-follow`, `tiktok-follow`, `yt-lower-third`, `x-post`, `reddit-post`, `spotify-card` | `social` | +| **Data & charts** | `data-chart`, `flowchart` | `data`, `chart` | +| **Maps** | `us-map`, `us-map-bubble`, `us-map-flow`, `us-map-hex`, `world-map`, `spain-map` | `map`, `geography` | +| **Product & device showcases** | `app-showcase`, `vfx-iphone-device`, `ui-3d-reveal` | `showcase`, `device` | +| **VFX & motion graphics** | `vfx-liquid-background`, `vfx-liquid-glass`, `vfx-magnetic`, `vfx-portal`, `vfx-shatter`, `vfx-text-cursor` | `effects`, `webgl` | +| **Branding & outros** | `logo-outro`, `apple-money-count` | `logo`, `branding`, `finance` | +| **Notifications & UI** | `macos-notification` | `notification` | ### Components by use case -| Need | Components | Tags to filter | -| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| **Caption styles** | `caption-clip-wipe`, `caption-editorial-emphasis`, `caption-emoji-pop`, `caption-glitch-rgb`, `caption-gradient-fill`, `caption-highlight`, `caption-kinetic-slam`, `caption-matrix-decode`, `caption-neon-accent`, `caption-neon-glow`, `caption-parallax-layers`, `caption-particle-burst`, `caption-pill-karaoke`, `caption-texture`, `caption-weight-shift` | `caption-style` | -| **Visual overlays & effects** | `grain-overlay`, `shimmer-sweep`, `grid-pixelate-wipe`, `texture-mask-text`, `vignette` | `overlay`, `effect` | +| Need | Components | Tags to filter | +| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | +| **Caption styles** | `caption-clip-wipe`, `caption-editorial-emphasis`, `caption-emoji-pop`, `caption-glitch-rgb`, `caption-gradient-fill`, `caption-highlight`, `caption-kinetic-slam`, `caption-matrix-decode`, `caption-neon-accent`, `caption-neon-glow`, `caption-parallax-layers`, `caption-particle-burst`, `caption-pill-karaoke`, `caption-texture-lava`, `caption-weight-shift` | `caption-style` | +| **Visual overlays & effects** | `grain-overlay`, `shimmer-sweep`, `grid-pixelate-wipe`, `texture-mask-text`, `vignette` | `overlay`, `effect` | ### Quick picks From c9a94b5c452efc9aa41bcf377d8554b68ea6a9d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 20 May 2026 01:37:33 -0400 Subject: [PATCH 04/14] Revert "docs(skill): add catalog references for blocks and components" This reverts commit 552b9828f643b9047b9c6f30e0fdcc572178bb52. --- skills/hyperframes/SKILL.md | 50 ------------------------------------- 1 file changed, 50 deletions(-) diff --git a/skills/hyperframes/SKILL.md b/skills/hyperframes/SKILL.md index 76e317172..f68c52dac 100644 --- a/skills/hyperframes/SKILL.md +++ b/skills/hyperframes/SKILL.md @@ -464,56 +464,6 @@ Skip on small edits (fixing a color, adjusting one duration). Run on new composi --- -## Catalog: Pre-Built Blocks & Components - -The HyperFrames registry ships ready-to-use blocks (full compositions with fixed dimensions and duration) and components (reusable snippets you drop into any composition). Browse interactively or install directly: - -```bash -npx hyperframes catalog # list everything -npx hyperframes catalog --type block # blocks only -npx hyperframes catalog --type component # components only -npx hyperframes catalog --tag social # filter by tag -npx hyperframes catalog --human-friendly # interactive picker -npx hyperframes add # install into current project -``` - -Full catalog with previews: [hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog) - -### When to suggest catalog items - -Before building something from scratch, check whether a catalog item already covers the need. Suggest `npx hyperframes add ` when the user's request matches a category below — it's faster to customize an existing block than to author one from zero. - -### Blocks by use case - -| Need | Blocks | Tags to filter | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | -| **Scene transitions** | `transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-push`, `transitions-radial`, `transitions-scale`, `flash-through-white`, `cinematic-zoom`, `whip-pan`, `light-leak`, `glitch`, `cross-warp-morph`, `domain-warp-dissolve`, `swirl-vortex`, `ripple-waves`, `thermal-distortion`, `gravitational-lens`, `sdf-iris`, `ridged-burn`, `chromatic-radial-split` | `transition` | -| **Social media cards** | `instagram-follow`, `tiktok-follow`, `yt-lower-third`, `x-post`, `reddit-post`, `spotify-card` | `social` | -| **Data & charts** | `data-chart`, `flowchart` | `data`, `chart` | -| **Maps** | `us-map`, `us-map-bubble`, `us-map-flow`, `us-map-hex`, `world-map`, `spain-map` | `map`, `geography` | -| **Product & device showcases** | `app-showcase`, `vfx-iphone-device`, `ui-3d-reveal` | `showcase`, `device` | -| **VFX & motion graphics** | `vfx-liquid-background`, `vfx-liquid-glass`, `vfx-magnetic`, `vfx-portal`, `vfx-shatter`, `vfx-text-cursor` | `effects`, `webgl` | -| **Branding & outros** | `logo-outro`, `apple-money-count` | `logo`, `branding`, `finance` | -| **Notifications & UI** | `macos-notification` | `notification` | - -### Components by use case - -| Need | Components | Tags to filter | -| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| **Caption styles** | `caption-clip-wipe`, `caption-editorial-emphasis`, `caption-emoji-pop`, `caption-glitch-rgb`, `caption-gradient-fill`, `caption-highlight`, `caption-kinetic-slam`, `caption-matrix-decode`, `caption-neon-accent`, `caption-neon-glow`, `caption-parallax-layers`, `caption-particle-burst`, `caption-pill-karaoke`, `caption-texture-lava`, `caption-weight-shift` | `caption-style` | -| **Visual overlays & effects** | `grain-overlay`, `shimmer-sweep`, `grid-pixelate-wipe`, `texture-mask-text`, `vignette` | `overlay`, `effect` | - -### Quick picks - -- User wants **transitions between scenes** → suggest `npx hyperframes add transitions-blur` (or whichever style fits the mood). Each transition block bundles multiple variants. -- User wants **captions** → suggest a caption component that matches the energy. `caption-highlight` for TikTok-style, `caption-editorial-emphasis` for cinematic, `caption-glitch-rgb` for tech/cyber. -- User wants **data visualization** → `npx hyperframes add data-chart` includes animated bar, line, pie, and area charts with configurable data. -- User wants **social proof** → suggest the matching platform card (`x-post`, `reddit-post`, `instagram-follow`, etc.). -- User wants **film grain or cinematic look** → `npx hyperframes add grain-overlay` + `npx hyperframes add vignette`. -- User wants **a map** → pick the geographic region: `us-map` for US states, `world-map` for global, `spain-map` for Spain. - ---- - ## References (loaded on demand) - **[references/captions.md](references/captions.md)** — Captions, subtitles, lyrics, karaoke synced to audio. Tone-adaptive style detection, per-word styling, text overflow prevention, caption exit guarantees, word grouping. Read when adding any text synced to audio timing. From 6d9670fd589e247592ccc9eb3fefe1cc1377702c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 20 May 2026 01:38:04 -0400 Subject: [PATCH 05/14] docs(skill): add pre-built caption component catalog to captions reference Move catalog references from SKILL.md (reverted) into captions.md where they're contextually relevant. Adds a table of all 15 caption components with style descriptions and use-case guidance, plus CLI commands for browsing and installing. --- skills/hyperframes/references/captions.md | 29 +++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/skills/hyperframes/references/captions.md b/skills/hyperframes/references/captions.md index 791d411f9..ee1b4953d 100644 --- a/skills/hyperframes/references/captions.md +++ b/skills/hyperframes/references/captions.md @@ -117,6 +117,35 @@ GROUPS.forEach(function (group, gi) { tl.seek(0); ``` +## Pre-Built Caption Components + +Before building caption styles from scratch, check the registry — 15 ready-to-use caption components cover the most common styles. Install with `npx hyperframes add ` and use as a sub-composition via `data-composition-src`. + +```bash +npx hyperframes catalog --tag caption-style # list all caption components +npx hyperframes add caption-highlight # install a specific one +``` + +| Style | Component | Best for | +| ------------------------- | ---------------------------- | ---------------------------- | +| TikTok-style highlight | `caption-highlight` | Social, high-energy | +| Karaoke pill | `caption-pill-karaoke` | Music, lyric videos | +| Cinematic editorial | `caption-editorial-emphasis` | Documentary, storytelling | +| Glitch / cyber | `caption-glitch-rgb` | Tech, gaming | +| Full-screen slam | `caption-kinetic-slam` | Hype, announcements | +| Neon glow | `caption-neon-glow` | Night, club, neon aesthetics | +| Neon accent (multi-color) | `caption-neon-accent` | Colorful, playful | +| Wipe reveal | `caption-clip-wipe` | Clean, modern | +| Gradient fill | `caption-gradient-fill` | Vibrant, eye-catching | +| Matrix decode | `caption-matrix-decode` | Sci-fi, tech reveals | +| Emoji pop | `caption-emoji-pop` | Social, casual | +| Parallax layers | `caption-parallax-layers` | Depth, cinematic | +| Particle burst | `caption-particle-burst` | Celebration, impact keywords | +| Lava texture | `caption-texture` | Bold, dramatic | +| Weight shift | `caption-weight-shift` | Elegant, typographic | + +Browse all with previews: [hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog) + ## Further References - [dynamic-techniques.md](dynamic-techniques.md) — karaoke, clip-path reveals, slam words, scatter exits, elastic, 3D rotation From 471b4efb4b382cc308bcec0f33b5883653b698e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Wed, 20 May 2026 01:55:17 -0400 Subject: [PATCH 06/14] feat: data-timeline-locked + fix font loss in sub-compositions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Timeline locking: - Add data-timeline-locked attribute support — fully disables move, trim-start, and trim-end in Studio for clips that carry this attr - Runtime propagates the attribute from inner composition root to host element so component authors control it from their HTML - All 15 caption components in the registry now carry the attribute Font fix: - Extract and from sub-composition alongside existing