When to use
- Requests like "add effects to the card news", "add a transition", "apply fx", "add effects to liven up the mood"
- When you want to layer transitions, overlays, and UI blocks onto an already-created card/slide composition
- Every moment when a judgment is needed about which effect to use
If you already know the installation, HTML, and parameters of an individual effect, call the corresponding hyperframes-fx-<slug> sub-skill directly. This orchestrator contains the selection logic.
Flow
1. Tone detection
references/tone-presets.md to determine one of 5:
- brand — brand, lifestyle, coffee, beauty, travel
- news — news, incidents, exposés, issues
- tech — IT, data, AI, products
- minimalist — minimal, editorial, magazine
- emotional — emotional, retrospective, personal stories
Detection signals: topic name, existing color palette, card content tone. If unclear, AskUserQuestion.
2. Read card flow
From the target topic index.html , identify each <div class="card clip ..."> 's template type (photo-cover / question / stat / image-feature) and order.
3. Recipe matching
references/card-flow-recipes.md From the table in tone × card flow , get the recommended combination at the intersection. Generally:
- 2–3 transitions between cards (number of cards - 1)
- 0–1 persistent overlays
- 0–2 accents per card
4. Installation
Run each sub-skill's installation command:
npx hyperframes add <slug1>
npx hyperframes add <slug2>
# ... 매칭된 효과 전부
Automatically create files in topics/<주제>/compositions/ or compositions/components/ .
5. Wiring
index.html to insert each effect at the appropriate timing. For specific HTML snippets and timing, refer to each sub-skill's "Wiring" section.
- Shader transition / transition variant / UI block:
<div data-composition-src="compositions/<file>.html" data-start="..." data-duration="..." data-track-index="1"> - Component overlay: Insert each component's HTML/CSS snippet inside the card or directly under root
6. Verification
npx hyperframes lint topics/<주제>
npx hyperframes render topics/<주제>
After confirming Lint 0 errors, re-render. The overview is static so transitions are not visible — verification is based on mp4 playback.
41 Sub-skill Catalog
For the full list, refer to references/catalog.md . Count by category:
- Shader Transitions: 14개 (
hyperframes-fx-whip-pan,-flash-through-white,-chromatic-radial-split,-cinematic-zoom,-cross-warp-morph,-domain-warp-dissolve,-glitch,-gravitational-lens,-light-leak,-ridged-burn,-ripple-waves,-sdf-iris,-swirl-vortex,-thermal-distortion) - Transition Variants: 13개 (
hyperframes-fx-transitions-3d,-blur,-cover,-destruction,-dissolve,-distortion,-grid,-light,-mechanical,-other,-push,-radial,-scale) - Component Overlays: 3개 (
hyperframes-fx-grain-overlay,-grid-pixelate-wipe,-shimmer-sweep) - UI Blocks: 11개 (
hyperframes-fx-app-showcase,-data-chart,-flowchart,-instagram-follow,-logo-outro,-macos-notification,-reddit-post,-spotify-card,-tiktok-follow,-ui-3d-reveal,-x-post,-yt-lower-third)
Quick combinations by tone (summary)
| 톤 | Recommended transition trio | Overlay | Accent |
|---|---|---|---|
| brand | whip-pan → sdf-iris → light-leak | grain-overlay (3–5%) | shimmer-sweep |
| news | flash-through-white → glitch → chromatic-radial-split | grain-overlay (5%) | Social proof UI block |
| tech | chromatic-radial-split → sdf-iris → cinematic-zoom | None | data-chart / ui-3d-reveal |
| minimalist | cross-warp-morph → transitions-scale → domain-warp-dissolve | None | None |
| emotional | light-leak → ripple-waves → transitions-blur | grain-overlay (4%) | shimmer-sweep |
Detailed recipes by card flow → references/card-flow-recipes.md
Tone matching principles → references/tone-presets.md
Principles
- No more than 3 transition types per deck — maintain rhythm
- Only one persistent overlay — prevent noise stacking
- Timing overlap 0.2–0.4 seconds — natural connection instead of a hard cut
- shader transition은 track-index 1 — overlay on top of the card (track-index 0)
- If in doubt, don't ask, just use the brand tone default — the safest option