Add HyperFrames skills
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011h6NB8JQtfPc6eRCefEzBB
This commit is contained in:
964 files changed
+142321
No files matched your search
@@ -0,0 +1,38 @@
|
||||
# Builder contract — composition rules (detail behind agents/builder.md)
|
||||
|
||||
## Root must be sized
|
||||
|
||||
Root `#stage` (`data-composition-id`) needs `position: relative; width: <W>px; height: <H>px`. Without a resolved height, flex children collapse to ~0 and content piles into the top-left. Automated gates may miss it, so inspect proof snapshots.
|
||||
|
||||
## Layout before animation
|
||||
|
||||
1. Identify the **hero frame** (the moment most elements are visible) → build THAT in static CSS first, no GSAP.
|
||||
2. `.scene-content` fills the scene with padding, not offsets:
|
||||
```css
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 120px 160px;
|
||||
gap: 24px;
|
||||
box-sizing: border-box;
|
||||
```
|
||||
Never `position:absolute; top:Npx` on a content container (it overflows). Reserve absolute for decoratives. Keep ≥80px padding (title-safe margin).
|
||||
3. **Entrances**: use `gsap.from()` only for a non-clip element active from `t=0`. Inside `.clip`, in sub-compositions, and for later entrances, use explicit `fromTo()`. The CSS position is ground truth; the tween is the journey to it.
|
||||
4. **Exits**: only the final scene animates elements out; between scenes the transition IS the exit.
|
||||
|
||||
## Timeline / clip contract
|
||||
|
||||
- ONE `gsap.timeline({paused:true})` on `window.__timelines["<id>"]`; `tl.seek(0)`; never `tl.play()`.
|
||||
- Timed elements: `class="clip"` + `data-start`/`data-duration`/`data-track-index` + a stable `id`. Timeline-driven groups inside one full-duration clip don't each need timing attrs.
|
||||
- Deterministic only — no `Date.now()` / `Math.random()` / network. Count-ups tween a proxy object via `onUpdate` (seek-safe), never a wall-clock counter.
|
||||
|
||||
## Correctness
|
||||
|
||||
- **Seek-safe reveal of delayed elements**: on a non-clip element or wrapper inside a clip, use one registered timeline `fromTo()` with an explicit `{ autoAlpha: 0 }` start and `{ autoAlpha: 1, ... }` end. Do not page-load `gsap.set()` a later `.clip`, and never target `.clip` visibility; the framework owns its lifecycle. _(Eval finding.)_
|
||||
- **Count-ups** tween a proxy via `onUpdate`; they only render when the host advances the timeline **with events enabled** (`tl.time()` / non-suppressed seek). A bare `seek(t, true)` freezes them at 0 — the HF render host must seek with events on. _(Eval finding.)_
|
||||
- Clamp at tween bounds; don't let a spring overshoot past a held value.
|
||||
- Allowed eases: `power1–4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine` (`.in/.out/.inOut`).
|
||||
- One motif per scene. Run `hyperframes check`; mark intentional overflow `data-layout-allow-overflow="true"`.
|
||||
- **Palette discipline**: define all colors in one `palette` object / CSS custom properties — no inline hex scattered through the markup (for `asset-fusion`, eyedropper the palette from the asset).
|
||||
@@ -0,0 +1,47 @@
|
||||
# text module · motion vocabulary (primitive → GSAP)
|
||||
|
||||
<!-- registry-items: allow= -->
|
||||
|
||||
**The live search is the source of truth for what the registry has.** The table(s) below are a hand-maintained sample and under-cover by design: run `npx hyperframes catalog --query "<what you want>" --json` — it needs nothing installed — before concluding the registry lacks something. Item names here are checked against `registry/registry.json` by `bun run lint:skills`.
|
||||
|
||||
Named primitives the Director references in `motion` strings and the Builder implements. `code_hint`s are framework-neutral physics; the GSAP recipe is the HF implementation. Prefer an HF **registry component** (bottom) when one fits — don't reinvent.
|
||||
|
||||
## Entry
|
||||
|
||||
| primitive | GSAP recipe (into CSS end-state) | suits |
|
||||
| ----------------------------- | -------------------------------------------------------------- | ------------------------- |
|
||||
| `slide_bottom/top/left/right` | `from({ y:±150 / x:±200, opacity:0, ease:"power4.out" })` | calm, build, professional |
|
||||
| `scale_grow` | `from({ scale:0, opacity:0, duration:.6, ease:"power2.out" })` | calm, gentle |
|
||||
| `scale_punch` | `from({ scale:.6, opacity:0, ease:"back.out(2.2)" })` | impact, energetic |
|
||||
| `fade_in` | `from({ opacity:0, duration:.4 })` | subtle |
|
||||
| `fade_blur` | `from({ opacity:0, filter:"blur(14px)" })` | cinematic, dreamy |
|
||||
| `typewriter` | reveal via clip/`SplitText` width step | technical, narrative |
|
||||
| `word_reveal` | per-word `from({opacity:0,y:..}, stagger:.1)` | storytelling |
|
||||
| `wave` | per-letter `from({y:..}, stagger:{each:.04})` | flowing, musical |
|
||||
| `bounce_in` | `from({y:-120}, ease:"bounce.out")` | playful |
|
||||
| `slam` | `from({ y:-300, ease:"power4.out" })` + shake on land | impact, heavy |
|
||||
|
||||
## Emphasis (in place, often on a beat)
|
||||
|
||||
| primitive | GSAP recipe | suits |
|
||||
| ------------- | -------------------------------------------------------------------- | ------------------ |
|
||||
| `scale_pulse` | `to({ scale:1.12, yoyo:true, repeat:1, ease:"sine.inOut" })` at beat | rhythmic, peak |
|
||||
| `shake` | `to({ keyframes:[{x:-9},{x:9},{x:0}], ease:"none" })` | urgent, intense |
|
||||
| `glow` | `to({ textShadow:"0 0 46px <ink/accent>", yoyo:true, repeat:1 })` | important, magical |
|
||||
| `color_shift` | `to({ color:"<accent>" })` (or accent on the word in CSS) | dynamic |
|
||||
|
||||
## Exit
|
||||
|
||||
| primitive | GSAP recipe | suits |
|
||||
| ----------- | -------------------------------------------------- | ---------- |
|
||||
| `fade_out` | `to({ opacity:0, duration:.4, ease:"power2.in" })` | ending |
|
||||
| `slide_out` | `to({ y/x: off, opacity:0, ease:"power2.in" })` | transition |
|
||||
| `scale_out` | `to({ scale:1.06, opacity:0, ease:"power2.in" })` | transition |
|
||||
|
||||
## Accent graphics (not text)
|
||||
|
||||
`underline_sweep` `fromTo({scaleX:0},{scaleX:1}, transformOrigin:"left center")` · `bar_wipe` · `hold_breath` `to({scale:1.015, ease:"sine.inOut"})`.
|
||||
|
||||
## Prefer HF registry components when they fit
|
||||
|
||||
`caption-kinetic-slam` · `caption-editorial-emphasis` · `caption-neon-glow` · `caption-glitch-rgb` · `caption-particle-burst` · `caption-weight-shift` · `caption-matrix-decode` · `caption-pill-karaoke` · `shimmer-sweep`. These are pre-built, in-ecosystem, and already render-tested — the Builder should reach for them before hand-rolling an equivalent.
|
||||
@@ -0,0 +1,54 @@
|
||||
# shot-plan IR
|
||||
|
||||
The single contract between Director and Builder. One file: `PROJECT_DIR/shot-plan.json`.
|
||||
|
||||
```jsonc
|
||||
{
|
||||
// ── envelope (every category) ──
|
||||
"category": "kinetic-type | stat | charts | logo-reveal | lower-thirds | webpage | news | tweet | asset-fusion",
|
||||
"duration_s": 6,
|
||||
"fps": 30,
|
||||
"canvas": { "w": 1080, "h": 1920, "aspect": "9:16" },
|
||||
"style": "free-form visual direction (mood / energy / reference)",
|
||||
"palette": ["#…"], // or "derive-from-asset"
|
||||
"font": "<HF embed-list font>",
|
||||
"beats": [12, 37], // optional accent frames/seconds
|
||||
"export": "mp4", // or "alpha-overlay" (transparent webm/mov)
|
||||
|
||||
// ── sourcing seam (Director Part 1) — [] means skip the source phase ──
|
||||
"asset_needs": [
|
||||
{
|
||||
"role": "hero",
|
||||
"kind": "image|icon|logo|svg|news|web|tweet",
|
||||
"query": "…",
|
||||
"source": "…",
|
||||
"treatment": "cutout|recolor|vectorize|none",
|
||||
},
|
||||
],
|
||||
|
||||
// ── build directive (Director Part 2, reuse-first) ──
|
||||
"block": "<catalog block id, e.g. data-chart | caption-kinetic-slam>", // optional
|
||||
"customize": {
|
||||
/* what to change on the block: data, text, palette, positions */
|
||||
},
|
||||
|
||||
// ── category-specific content ──
|
||||
"content": {
|
||||
/* shape varies by category, below */
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
**Per-category `content` shapes:**
|
||||
|
||||
- `kinetic-type` → `scenes[]` `{ id, start, end, text, emphasis_words[], emotion, motion, beats[] }`
|
||||
- `stat` → `{ value, prefix, suffix, label, ring: bool }`
|
||||
- `charts` → `{ type: bar|line|pie|race|pct, data[], labels[], headline, axes: bool }`
|
||||
- `logo-reveal` → `{ logo: <asset path>, tagline, url }`
|
||||
- `lower-thirds` → `{ name, role, position, brand_colors[] }`
|
||||
- `webpage` → `{ url, capture, highlights: [ { selector|region, label } ] }` (step-highlight a real captured page)
|
||||
- `news` → `{ outlet, headline, body, keyword, layout: A|B, logo?, date?, subject? }` (article-highlight: lay text out readable — **no zoom** — then sweep a marker band over the keyword in place. Layout **A** = centered-emphasis 9:16 text-only; **B** = full article 16:9 with `logo` + `date` + `subject` (a person photo → `remove-background` cutout))
|
||||
- `tweet` → `{ author, handle, avatar, text, metrics }`
|
||||
- `asset-fusion` → `{ data_type, asset: <path>, affordance, element_positions: {center, extent, safe[], avoid[]}, derived_palette[], connectors[] }`
|
||||
|
||||
**Invariants:** `scenes` (if present) partition `[0, duration_s]` with no gaps/overlaps · empty `asset_needs` ⇒ Step 2 (source) is skipped · a named `block` ⇒ the Builder reuses + customizes it rather than hand-authoring.
|
||||
Reference in new issue
Block a user