ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-14 00:00:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(skills): surface Code Animations blocks to agents (#1485)

Browse Source 
The 9 Code Animation blocks shipped to the registry but were referenced
in zero agent-facing skills, so agents rebuilt code scenes from scratch
instead of installing them.

- discovery.md: add a Code Animations (9) section to the block inventory
  and fix the stale block count (88 -> 97)
- motion-graphics/catalog-map.md: add a code / code-reveal row to the
  Director -> block map
- pr-to-video visual-design: install code-diff / code-morph /
  code-highlight / code-typing / code-scroll before hand-authoring a code window
This commit is contained in:
Miguel Ángel
2026-06-16 01:25:22 -04:00
committed by GitHub
parent 36b24acf20
commit d595010388
3 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
skills/hyperframes-registry/references/discovery.md
+24 -1
View File
@@ -38,7 +38,7 @@ Where `<type-dir>` is `examples`, `blocks`, or `components`.
### Blocks ### Blocks
For an always-current list run `npx hyperframes catalog --type block`. The tables below group the 88 blocks by category. **Block name ≠ shader name**: shader-transition blocks (e.g. `domain-warp-dissolve`) wrap a HyperShader runtime whose internal name omits the `-dissolve`/`-warp` suffix — see the showcase HTML installed alongside the block for the canonical name. For an always-current list run `npx hyperframes catalog --type block`. The tables below group the 97 blocks by category. **Block name ≠ shader name**: shader-transition blocks (e.g. `domain-warp-dissolve`) wrap a HyperShader runtime whose internal name omits the `-dissolve`/`-warp` suffix — see the showcase HTML installed alongside the block for the canonical name.
#### Shader transitions (14) #### Shader transitions (14)
@@ -180,6 +180,29 @@ A code/terminal window that **types a code or shell session per-character**. The
| `code-snippet-apple-terminal-silver-aerogel` | Dark grey bg, white text | | `code-snippet-apple-terminal-silver-aerogel` | Dark grey bg, white text |
| `code-snippet-apple-terminal-solid-colors` | Deep purple bg, white text | | `code-snippet-apple-terminal-solid-colors` | Deep purple bg, white text |
#### Code Animations (9)
The richer, motion-first counterpart to the static `code-snippet-*` window themes above: each is a self-contained 1920×1080 block (~5–8s) with a paused, deterministic GSAP timeline that _animates_ code — typing, diffing, morphing, spotlighting, or GPU hero reveals — rather than typing a fixed snippet inside editor/terminal chrome. **Reuse-first**: `npx hyperframes add <name>`, then customize the baked code/diff content in place; hand-author only when no block covers the motion you need.
**DOM / text reveal (6):**
| Name | Description |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `code-typing` | Token-streamed typing reveal, caret tracks the frontier (no CSS animation) — live-coding on screen |
| `code-diff` | An edit shown as a colored diff: removed lines collapse red, added expand green — before/after at line level |
| `code-morph` | One snippet transforms into another, tokens glide between positions (Shiki Magic Move) — a refactor / one state to another |
| `code-highlight` | A highlight band sweeps a target line while surrounding context dims — spotlight one line |
| `code-scroll` | Camera scrolls a long file to center + spotlight a target line — walk through a real module |
| `code-snippet-flight` | Discrete snippets fly in from the side and assemble into a stacked program (block-level FLIP) |
**GPU / WebGL hero reveals (3):** heavier, for a title-card / hero code moment.
| Name | Description |
| ------------------------ | --------------------------------------------------------------------------------------------------------------- |
| `code-3d-extrude` | Syntax-highlighted code on a lit beveled 3D slab that rotates through real space and settles (true WebGL depth) |
| `code-shader-dissolve` | Code resolves out of seeded noise with a chromatic dissolve front + edge glow, then holds crisp |
| `code-particle-assemble` | Thousands of GPU points fly to the exact glyph pixels and resolve into readable syntax-highlighted code |
### Components ### Components
| Name | Description | Tags | | Name | Description | Tags |
skills/motion-graphics/catalog-map.md
+2 -1
View File
@@ -11,12 +11,13 @@ After classifying intent → category, the **Director names the block(s) + what
## Category → block(s) ## Category → block(s)
| Category | Borrow from catalog | Customize | Gaps → hand-author | | Category | Borrow from catalog | Customize | Gaps → hand-author |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
| **kinetic-typo** | one of **18 `caption-*`** (kinetic-slam, editorial-emphasis, clip-wipe, gradient-fill, neon-glow, glitch-rgb, matrix-decode, particle-burst, weight-shift, pill-karaoke, highlight, blend-difference…) | words; `emphasis_words` → `word--emphasis`; palette; font; timing | a motif none of the 18 cover | | **kinetic-typo** | one of **18 `caption-*`** (kinetic-slam, editorial-emphasis, clip-wipe, gradient-fill, neon-glow, glitch-rgb, matrix-decode, particle-burst, weight-shift, pill-karaoke, highlight, blend-difference…) | words; `emphasis_words` → `word--emphasis`; palette; font; timing | a motif none of the 18 cover |
| **charts** | `data-chart` (bar+line, staggered, value labels) | edit the data array + headline/subtitle; `--bg`/`--text` | pie/donut, bar-chart-race, ring/% | | **charts** | `data-chart` (bar+line, staggered, value labels) | edit the data array + headline/subtitle; `--bg`/`--text` | pie/donut, bar-chart-race, ring/% |
| **stat** | `apple-money-count` (finance: $ counter + burst + SFX) **or** our generic `stat-motion` (any %/number + ring) | target, prefix/suffix, label, palette | — | | **stat** | `apple-money-count` (finance: $ counter + burst + SFX) **or** our generic `stat-motion` (any %/number + ring) | target, prefix/suffix, label, palette | — |
| maps/geo | **vector lane**: `us-map` (+bubble/hex/flow), `world-map`, `spain-map` + **hand-author** `geo-highlight`/`geo-flow`/`flag-borders`/`pin-rollout` (NOT in registry — build per `categories/maps/module.md`). **basemap lane** (real satellite/dark / zoom-to-place): bake via `categories/maps/bake-basemap.mjs` → `<video>` + geo-aligned SVG overlay (border draw-on + colour-block fills) | regions/data, palette, callouts/connectors, basemap style | (basemap lane now covers real imagery + zoom-to-address — was the gap) | | maps/geo | **vector lane**: `us-map` (+bubble/hex/flow), `world-map`, `spain-map` + **hand-author** `geo-highlight`/`geo-flow`/`flag-borders`/`pin-rollout` (NOT in registry — build per `categories/maps/module.md`). **basemap lane** (real satellite/dark / zoom-to-place): bake via `categories/maps/bake-basemap.mjs` → `<video>` + geo-aligned SVG overlay (border draw-on + colour-block fills) | regions/data, palette, callouts/connectors, basemap style | (basemap lane now covers real imagery + zoom-to-address — was the gap) |
| diagram | `flowchart` (SVG connectors + nodes) | nodes, edges, labels | — | | diagram | `flowchart` (SVG connectors + nodes) | nodes, edges, labels | — |
| **code / code-reveal** | one of the **9 Code Animations** blocks: `code-typing` (live typing), `code-diff` (a change), `code-morph` (a refactor), `code-highlight` (spotlight a line), `code-scroll` (walk a file), `code-snippet-flight` (assemble); GPU hero reveals `code-3d-extrude` / `code-shader-dissolve` / `code-particle-assemble` for a title-card moment; for a static themed code/terminal window use a `code-snippet-*` block | the baked code string / diff / theme | a code motion none cover |
| **brand reveal** | `logo-outro` (piece assembly + glow + tagline + URL pill) | logo asset, tagline, URL, palette | — | | **brand reveal** | `logo-outro` (piece assembly + glow + tagline + URL pill) | logo asset, tagline, URL, palette | — |
| transitions | 15+ shader transitions (domain-warp, whip-pan, sdf-iris, glitch…) | direction, timing | — | | transitions | 15+ shader transitions (domain-warp, whip-pan, sdf-iris, glitch…) | direction, timing | — |
| social overlay | ig / tiktok / yt / x / reddit / spotify / macos cards | handle, metrics, avatar | — | | social overlay | ig / tiktok / yt / x / reddit / spotify / macos cards | handle, metrics, avatar | — |
skills/pr-to-video/agents/visual-design.md
+2
View File
@@ -13,6 +13,8 @@ You are the **faceless-explainer** Phase 3 / visual-design subagent. The full co
> **Output file shape (mandatory):** `section_plan.md` = an optional one-line H1 title + **one `## Film Direction` block** (film-level invariants written once — palette system, type roles, motion defaults + budget, ambient system, film negative list, transition vocabulary, asset coverage table, stillness allocation; guide §4.1) + `## Scene N:` blocks of **delta prose only** (≤150 words target; guide §4.2), **nothing else**. Film Direction IS read downstream (prep forwards it to every worker + finalize); any **other** preface — "Project-level system commitments" / cross-scene summary — is a validator fatal (guide §2 "Whole-file shape"). The litmus test for every scene sentence: could it appear verbatim in another scene? Yes → it belongs in Film Direction. (Per scene you apply the `voice.md` register to DOM text; keep that judgment in your head, not in the file.) > **Output file shape (mandatory):** `section_plan.md` = an optional one-line H1 title + **one `## Film Direction` block** (film-level invariants written once — palette system, type roles, motion defaults + budget, ambient system, film negative list, transition vocabulary, asset coverage table, stillness allocation; guide §4.1) + `## Scene N:` blocks of **delta prose only** (≤150 words target; guide §4.2), **nothing else**. Film Direction IS read downstream (prep forwards it to every worker + finalize); any **other** preface — "Project-level system commitments" / cross-scene summary — is a validator fatal (guide §2 "Whole-file shape"). The litmus test for every scene sentence: could it appear verbatim in another scene? Yes → it belongs in Film Direction. (Per scene you apply the `voice.md` register to DOM text; keep that judgment in your head, not in the file.)
> **Code beats — reach for a Code Animation block first (mandatory):** this is a code-change film, so the **Code Animations** registry blocks are your primary vocabulary — before hand-authoring any code-window / diff / before-after / code panel, name the block whose motion matches the beat: a diff hunk → `code-diff`; a refactor (one state → another) → `code-morph`; spotlight a changed line → `code-highlight`; type the change on screen → `code-typing`; walk a long changed file → `code-scroll`; a hero/title code moment → `code-3d-extrude` / `code-shader-dissolve` / `code-particle-assemble`. The worker installs via `npx hyperframes add <block>` and customizes the baked code/diff content in place; hand-author a code panel only for a custom layout no block covers (side-by-side diff, file-tree + panel).
## Self-Validation ## Self-Validation
The `Schema validator:` provided by dispatch is an absolute path. After writing: The `Schema validator:` provided by dispatch is an absolute path. After writing: