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.