diff --git a/docs/superpowers/plans/2026-03-25-emotion-to-motion-iter3.md b/docs/superpowers/plans/2026-03-25-emotion-to-motion-iter3.md new file mode 100644 index 0000000000..aa7f52b026 --- /dev/null +++ b/docs/superpowers/plans/2026-03-25-emotion-to-motion-iter3.md @@ -0,0 +1,804 @@ +# Emotion-to-Motion Iteration 3 Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Add multi-scene choreography phases, mood transitions, and intra-scene choreography patterns to the emotion-to-motion skill, then evaluate with 30-60s compositions. + +**Architecture:** The existing SKILL.md gets three new sections appended (phases, transition matrix, intra-scene choreography). A new evals.json replaces the old one with 2 multi-scene test cases. A/B compositions (with_skill vs without_skill) are generated, deployed to HyperFrames Studio, and graded against 8 criteria. + +**Tech Stack:** GSAP 3.14.2 (CustomEase, SplitText, CustomBounce, CustomWiggle), HyperFrames composition format, HyperFrames Studio for preview + +**Spec:** `docs/superpowers/specs/2026-03-25-emotion-to-motion-iter3-design.md` + +--- + +## File Structure + +| Action | Path | Responsibility | +|--------|------|---------------| +| Modify | `~/.claude/skills/emotion-to-motion/SKILL.md` | Add 3 new sections after existing mood recipes | +| Modify | `~/.claude/skills/emotion-to-motion/evals/evals.json` | Replace with 2 multi-scene test cases | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/eval_metadata.json` | Test case 1 metadata | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/with_skill/outputs/index.html` | Test case 1 with-skill composition | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/with_skill/outputs/grading.json` | Test case 1 with-skill grading | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/with_skill/timing.json` | Test case 1 with-skill token/time metrics | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/without_skill/outputs/index.html` | Test case 1 without-skill composition | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/without_skill/outputs/grading.json` | Test case 1 without-skill grading | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/without_skill/timing.json` | Test case 1 without-skill token/time metrics | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/eval_metadata.json` | Test case 2 metadata | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/with_skill/outputs/index.html` | Test case 2 with-skill composition | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/with_skill/outputs/grading.json` | Test case 2 with-skill grading | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/with_skill/timing.json` | Test case 2 with-skill token/time metrics | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/without_skill/outputs/index.html` | Test case 2 without-skill composition | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/without_skill/outputs/grading.json` | Test case 2 without-skill grading | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/without_skill/timing.json` | Test case 2 without-skill token/time metrics | +| Create | `~/.claude/skills/emotion-to-motion-workspace/iteration-3/benchmark.json` | Aggregate scores across both test cases | +| Create | `packages/studio/data/projects/high-contrast-arc-with-skill/index.html` | Studio preview for case 1 with-skill | +| Create | `packages/studio/data/projects/high-contrast-arc-without-skill/index.html` | Studio preview for case 1 without-skill | +| Create | `packages/studio/data/projects/gradual-escalation-with-skill/index.html` | Studio preview for case 2 with-skill | +| Create | `packages/studio/data/projects/gradual-escalation-without-skill/index.html` | Studio preview for case 2 without-skill | + +--- + +### Task 1: Update SKILL.md — Add Choreography Phases Section + +**Files:** +- Modify: `~/.claude/skills/emotion-to-motion/SKILL.md` (append after line 269, after the "Punchy / Bold" recipe) + +- [ ] **Step 1: Read the existing SKILL.md to confirm current end** + +Read `~/.claude/skills/emotion-to-motion/SKILL.md` — verify it ends at line 269 with the Punchy/Bold recipe and there's no existing multi-scene content. + +- [ ] **Step 2: Append the Choreography Phases section** + +Add the following after the last line of SKILL.md: + +```markdown + +## Multi-Scene Compositions: Choreography Phases + +For compositions longer than 15 seconds or with multiple moods, decompose the prompt into **phases** — ordered segments, each with its own mood and choreography. + +### Phase Structure + +Each phase has: +- **Mood** — one canonical mood (dramatic, playful, elegant, energetic, calm, tense, punchy) +- **Duration** — seconds in the master timeline +- **Content** — what's visually happening +- **Entrance → Emphasis → Exit** — choreography pattern (see Intra-Scene Choreography below) + +### Mood Synonym Resolution + +Resolve evocative language to canonical moods before decomposing: + +| Synonym | Canonical Mood | +|---------|---------------| +| explosive, intense, fierce | punchy | +| serene, peaceful, tranquil | calm | +| triumphant, victorious, celebratory | playful | +| suspenseful, ominous, creeping | tense | +| luxurious, refined, sophisticated | elegant | +| exciting, dynamic, high-energy | energetic | +| cinematic, epic, grand | dramatic | + +### Phase Decomposition + +Handle two input styles: + +**Explicit per-scene moods** — extract mood (resolving synonyms), duration, and content directly: +> "Scene 1 (tense, 15s): text fragments drift. Scene 2 (punchy, 10s): title shatters. Scene 3 (calm, 20s): debris floats." + +**Arc-based descriptions** — decompose into phases: +> "Build from quiet unease to cathartic release to calm aftermath" + +1. Map mood anchors: quiet unease → tense, cathartic release → dramatic, calm aftermath → calm +2. Allocate durations by weight: + +| Mood | Weight | +|------|--------| +| calm, elegant | 1.2 | +| dramatic, tense | 1.0 | +| energetic, playful | 0.9 | +| punchy | 0.7 | + +Formula: `phase_duration = (weight / sum_of_all_weights) * target_total`, rounded to nearest second. + +**Minimum phase duration:** 6s — clamp and redistribute from the longest phase. + +Expect 3-5 phases for 30-60s compositions. Allow up to 7 if the prompt explicitly calls for more. + +### Edge Cases + +- **Single mood for 30-60s:** One phase, no transitions. Apply entrance/emphasis/exit across the full duration. +- **Adjacent same-mood phases:** Merge unless content descriptions feature different primary subjects (e.g., "product close-up" vs "lifestyle scene"). If kept separate, use a soft transition. +- **More than 7 phases:** Consolidate phases with similar moods. +``` + +- [ ] **Step 3: Verify the append** + +Read `~/.claude/skills/emotion-to-motion/SKILL.md` from line 269 onward — confirm the Choreography Phases section is present and correctly formatted. + +- [ ] **Step 4: Commit** + +```bash +cd ~/.claude/skills/emotion-to-motion && git add SKILL.md && git commit -m "feat(skill): add choreography phases section for multi-scene compositions" +``` + +(If not a git repo, skip commit — this is a local skill file.) + +--- + +### Task 2: Update SKILL.md — Add Transition Matrix Section + +**Files:** +- Modify: `~/.claude/skills/emotion-to-motion/SKILL.md` (append after Choreography Phases section) + +- [ ] **Step 1: Append the Transition Matrix section** + +Add immediately after the Edge Cases subsection: + +```markdown + +## Transition Matrix + +Transitions between phases are inferred from the mood delta. Three categories: + +### Hard Transitions (high contrast) +- **Overlap:** 0.3-0.8s +- **Technique:** Scene N's elements snap out (opacity: 0, scale: 0.95) while Scene N+1's elements slam in simultaneously +- **GSAP pattern:** +```js +// Phase N exit — hard snap out +phaseTl.to(".phase-n-elements", { opacity: 0, scale: 0.95, duration: 0.3, ease: "power3.in" }, exitStart); +// Phase N+1 entrance — slam in (overlaps exit by 0.3-0.8s) +nextPhaseTl.from(".phase-n1-elements", { opacity: 0, scale: 1.1, duration: 0.4, ease: "power4.out" }, 0); +``` + +### Soft Transitions (low contrast) +- **Overlap:** 1.5-3s +- **Technique:** Scene N's elements slowly fade/drift out while Scene N+1's elements gradually emerge underneath +- **GSAP pattern:** +```js +// Phase N exit — slow fade out +phaseTl.to(".phase-n-elements", { opacity: 0, y: -20, duration: 2, ease: "sine.inOut" }, exitStart); +// Phase N+1 entrance — fade in underneath (overlaps by 1.5-3s) +nextPhaseTl.from(".phase-n1-elements", { opacity: 0, y: 20, duration: 2, ease: "sine.inOut" }, 0); +``` + +### Escalation Transitions (building intensity) +- **Overlap:** 0.8-1.5s +- **Technique:** Scene N's elements accelerate their exit, Scene N+1's entrance inherits that momentum +- **GSAP pattern:** +```js +// Phase N exit — accelerating out +phaseTl.to(".phase-n-elements", { opacity: 0, x: -100, duration: 0.8, ease: "power3.in" }, exitStart); +// Phase N+1 entrance — momentum carry (overlaps by 0.8-1.5s) +nextPhaseTl.from(".phase-n1-elements", { opacity: 0, x: 100, duration: 0.6, ease: "power3.out" }, 0); +``` + +### Lookup Table + +| From ↓ To → | dramatic | playful | elegant | energetic | calm | tense | punchy | +|-------------|----------|---------|---------|-----------|------|-------|--------| +| dramatic | soft | hard | soft | escalation | soft | soft | hard | +| playful | hard | soft | hard | soft | hard | hard | hard | +| elegant | soft | hard | soft | escalation | soft | escalation | hard | +| energetic | hard | soft | hard | soft | hard | hard | hard | +| calm | escalation | hard | soft | escalation | soft | escalation | hard | +| tense | escalation | hard | soft | escalation | soft | soft | hard | +| punchy | hard | soft | hard | hard | hard | hard | soft | + +**Rationale for non-obvious entries:** +- playful→punchy = hard: flowing → staccato, a cut emphasizes the shift +- energetic→punchy = hard: sustained → staccato, textural change needs a cut +- tense→elegant = soft: both share restraint, low contrast +- punchy→energetic = hard: staccato → sustained, fundamental rhythm change + +**Overlap budget constraint:** Transition overlap is drawn from the exit of phase N and entrance of phase N+1 (not additional time). If combined overlap on both sides of a phase exceeds 50% of its entrance + exit allocation, clamp to 50%. +``` + +- [ ] **Step 2: Verify the append** + +Read the SKILL.md from the "## Transition Matrix" heading — confirm all subsections are present and the lookup table renders correctly. + +- [ ] **Step 3: Commit** + +```bash +cd ~/.claude/skills/emotion-to-motion && git add SKILL.md && git commit -m "feat(skill): add transition matrix for multi-scene mood transitions" +``` + +--- + +### Task 3: Update SKILL.md — Add Intra-Scene Choreography Section + +**Files:** +- Modify: `~/.claude/skills/emotion-to-motion/SKILL.md` (append after Transition Matrix section) + +- [ ] **Step 1: Append the Intra-Scene Choreography section** + +Add immediately after the Transition Matrix section: + +```markdown + +## Intra-Scene Choreography + +Each phase has three acts: **entrance**, **emphasis**, and **exit**. The mood determines the default pattern for each. + +### Act Duration Proportions + +| Mood | Entrance | Emphasis | Exit | +|------|----------|----------|------| +| dramatic | 25% | 55% | 20% | +| playful | 20% | 60% | 20% | +| elegant | 20% | 65% | 15% | +| energetic | 15% | 65% | 20% | +| calm | 20% | 65% | 15% | +| tense | 25% | 50% | 25% | +| punchy | 15% | 60% | 25% | + +### Entrance Patterns + +**Cascade** (energetic, playful): Rapid staggered entrances, 0.05-0.1s gaps between elements. +```js +tl.from(".phase-elements", { + opacity: 0, y: 30, scale: 0.9, + duration: 0.4, ease: "back.out(1.7)", + stagger: { each: 0.07, from: "center" } // playful: from center; energetic: from start +}, entranceStart); +``` + +**Slow reveal** (dramatic, tense): Elements emerge one at a time with long pauses between. +```js +elements.forEach((el, i) => { + tl.from(el, { + opacity: 0, y: 15, duration: 0.8, ease: "power2.out" + }, entranceStart + i * 1.2); // 1.2s between each — builds anticipation +}); +``` + +**Ensemble** (elegant, calm): Elements fade in together or in 2-3 groups. +```js +tl.from(".phase-elements-group1", { + opacity: 0, y: 10, duration: 1.2, ease: "sine.inOut" +}, entranceStart); +tl.from(".phase-elements-group2", { + opacity: 0, y: 10, duration: 1.2, ease: "sine.inOut" +}, entranceStart + 0.4); // slight offset, but feels unified +``` + +**Impact** (punchy): Hero element hits first and hard, supporting elements follow in quick succession. +```js +tl.from("#hero", { + opacity: 0, scale: 1.3, duration: 0.15, ease: "power4.out" +}, entranceStart); +tl.from(".supporting", { + opacity: 0, y: 20, duration: 0.2, ease: "power3.out", + stagger: 0.04 +}, entranceStart + 0.1); +``` + +### Emphasis Patterns + +**Pulse** (energetic, punchy): Subtle scale or brightness oscillation on key elements. +```js +tl.to("#hero", { + scale: 1.02, duration: 0.4, ease: "sine.inOut", + repeat: -1, yoyo: true +}, emphasisStart); +// Note: use repeat count based on emphasis duration, not -1, in compositions +``` + +**Drift** (calm, elegant): Slow continuous motion — gentle float, rotation, or parallax shift. +```js +tl.to(".bg-element", { y: -15, duration: emphasisDuration, ease: "sine.inOut" }, emphasisStart); +tl.to(".mid-element", { y: -8, rotation: 0.5, duration: emphasisDuration, ease: "sine.inOut" }, emphasisStart); +``` + +**Tension hold** (tense, dramatic): Near-stillness with micro-tremor on one element. +```js +gsap.registerPlugin(CustomWiggle); +CustomWiggle.create("microTremor", { wiggles: 12, type: "uniform" }); +tl.to("#tension-element", { + x: 2, ease: "microTremor", duration: emphasisDuration +}, emphasisStart); +``` + +**Play** (playful): Secondary action — idle wobbles, bounces, rotation on supporting elements. +```js +gsap.registerPlugin(CustomWiggle); +CustomWiggle.create("wobble", { wiggles: 4, type: "easeOut" }); +tl.to(".supporting", { + rotation: 3, ease: "wobble", duration: 1.5, + stagger: { each: 0.3, repeat: -1 } +}, emphasisStart); +// Floating idle on decorative elements +tl.to(".decorative", { + y: -8, duration: 1.2, ease: "sine.inOut", + yoyo: true, repeat: -1 +}, emphasisStart); +``` + +### Exit Patterns + +**Scatter** (playful, energetic): Elements exit in different directions with stagger. +```js +tl.to(".phase-elements", { + opacity: 0, x: "random(-100,100)", y: "random(-80,80)", + rotation: "random(-15,15)", duration: 0.5, ease: "power2.in", + stagger: 0.05 +}, exitStart); +``` + +**Fade recede** (calm, elegant): Opacity + slight scale down, elements sink back. +```js +tl.to(".phase-elements", { + opacity: 0, scale: 0.95, y: 10, + duration: 1.2, ease: "sine.inOut", stagger: 0.1 +}, exitStart); +``` + +**Snap out** (dramatic, punchy): Hard opacity to 0, no ease out — just gone. +```js +tl.to(".phase-elements", { + opacity: 0, duration: 0.08, ease: "none" +}, exitStart); +``` + +**Compress** (tense): Elements slowly contract inward before the next scene hits. +```js +tl.to(".phase-elements", { + scale: 0.9, x: 0, y: 0, opacity: 0.3, + duration: 1.5, ease: "power4.in" +}, exitStart); +``` + +### Mood-to-Default-Pattern Mapping + +| Mood | Entrance | Emphasis | Exit | +|------|----------|----------|------| +| dramatic | slow reveal | tension hold | snap out | +| playful | cascade | play | scatter | +| elegant | ensemble | drift | fade recede | +| energetic | cascade | pulse | scatter | +| calm | ensemble | drift | fade recede | +| tense | slow reveal | tension hold | compress | +| punchy | impact | pulse | snap out | + +Prompt-level overrides take precedence: if the prompt says "the title slams in," use impact entrance regardless of mood default. + +### Timeline Assembly + +Compose phases into a single master timeline: + +```js +const master = gsap.timeline({ paused: true }); + +// Phase 1 (0s - 15s) +const phase1 = gsap.timeline(); +// ... entrance/emphasis/exit choreography for phase 1 ... +master.add(phase1, 0); + +// Transition 1 overlap: phase1 exit overlaps phase2 entrance +// Look up transition type from matrix: e.g., tense→punchy = hard (0.3-0.8s) +const t1Overlap = 0.5; // within hard range + +// Phase 2 (14.5s - 24.5s) — starts t1Overlap before phase1 ends +const phase2 = gsap.timeline(); +// ... entrance/emphasis/exit choreography for phase 2 ... +master.add(phase2, 15 - t1Overlap); + +// Continue for remaining phases... +``` + +Each phase is a nested `gsap.timeline()` added to master at the correct position. This keeps phase choreography self-contained while the master timeline handles inter-phase timing. +``` + +- [ ] **Step 2: Verify the full SKILL.md** + +Read the SKILL.md and verify: +1. Original 12 principles + mood recipes are intact (lines 1-269) +2. Choreography Phases section follows +3. Transition Matrix section follows +4. Intra-Scene Choreography section follows with all patterns and GSAP code examples +5. No duplicate content or broken markdown + +- [ ] **Step 3: Add the script placement reminder** + +Append at the very end of SKILL.md: + +```markdown + +## Important: Script Placement + +All ` + + + + + +``` +``` + +- [ ] **Step 4: Commit** + +```bash +cd ~/.claude/skills/emotion-to-motion && git add SKILL.md && git commit -m "feat(skill): add intra-scene choreography patterns and script placement guide" +``` + +--- + +### Task 4: Update evals.json with Multi-Scene Test Cases + +**Files:** +- Modify: `~/.claude/skills/emotion-to-motion/evals/evals.json` + +- [ ] **Step 1: Read the existing evals.json** + +Read `~/.claude/skills/emotion-to-motion/evals/evals.json` — note the existing format so we match it. + +- [ ] **Step 2: Replace evals.json with iteration-3 test cases** + +Write the following (replaces entire file — iteration 1/2 evals are preserved in the workspace): + +```json +{ + "skill_name": "emotion-to-motion", + "iteration": 3, + "evals": [ + { + "id": 0, + "name": "high-contrast-arc", + "prompt": "A thriller title sequence: open with creeping unease as fragments of text drift in darkness, then SNAP — explosive reveal of the title with shattering glass, then settle into calm aftermath with slow floating debris. Total duration ~45 seconds. The title is 'SHATTERED'. Dark background, white and red accents.", + "expected_phases": [ + { "mood": "tense", "duration_s": 15, "entrance": "slow reveal", "emphasis": "tension hold", "exit": "compress" }, + { "mood": "punchy", "duration_s": 10, "entrance": "impact", "emphasis": "pulse", "exit": "snap out" }, + { "mood": "calm", "duration_s": 20, "entrance": "ensemble", "emphasis": "drift", "exit": "fade recede" } + ], + "expected_transitions": [ + { "from": "tense", "to": "punchy", "type": "hard", "overlap_range": [0.3, 0.8] }, + { "from": "punchy", "to": "calm", "type": "hard", "overlap_range": [0.3, 0.8] } + ], + "grading_criteria": [ + "phase-presence", + "entrance-choreography", + "emphasis-choreography", + "exit-choreography", + "transition-technique", + "duration-fidelity", + "mood-appropriate-easing", + "valid-hyperframes" + ] + }, + { + "id": 1, + "name": "gradual-escalation", + "prompt": "A luxury fitness brand launch: begin with elegant product beauty shots of a sleek fitness tracker called 'APEX', slowly build energy as athletes appear in motion, crescendo into triumphant celebration with the brand tagline 'Rise Above'. Total duration ~40 seconds. Black and gold palette, modern sans-serif typography.", + "expected_phases": [ + { "mood": "elegant", "duration_s": 15, "entrance": "ensemble", "emphasis": "drift", "exit": "fade recede" }, + { "mood": "energetic", "duration_s": 12, "entrance": "cascade", "emphasis": "pulse", "exit": "scatter" }, + { "mood": "playful", "duration_s": 13, "entrance": "cascade", "emphasis": "play", "exit": "scatter" } + ], + "expected_transitions": [ + { "from": "elegant", "to": "energetic", "type": "escalation", "overlap_range": [0.8, 1.5] }, + { "from": "energetic", "to": "playful", "type": "soft", "overlap_range": [1.5, 3.0] } + ], + "grading_criteria": [ + "phase-presence", + "entrance-choreography", + "emphasis-choreography", + "exit-choreography", + "transition-technique", + "duration-fidelity", + "mood-appropriate-easing", + "valid-hyperframes" + ] + } + ] +} +``` + +- [ ] **Step 3: Verify the JSON is valid** + +```bash +python3 -c "import json; json.load(open('$HOME/.claude/skills/emotion-to-motion/evals/evals.json'))" && echo "Valid JSON" +``` + +Expected: `Valid JSON` + +- [ ] **Step 4: Commit** + +```bash +cd ~/.claude/skills/emotion-to-motion && git add evals/evals.json && git commit -m "feat(evals): update test cases for iteration 3 multi-scene compositions" +``` + +--- + +### Task 5: Create Iteration-3 Workspace and Eval Metadata + +**Files:** +- Create: `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/eval_metadata.json` +- Create: `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/eval_metadata.json` + +- [ ] **Step 1: Create directory structure** + +```bash +mkdir -p ~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/{with_skill/outputs,without_skill/outputs} +mkdir -p ~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/{with_skill/outputs,without_skill/outputs} +``` + +- [ ] **Step 2: Create eval_metadata.json for high-contrast-arc** + +Write to `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/eval_metadata.json`: + +```json +{ + "eval_id": 0, + "eval_name": "high-contrast-arc", + "prompt": "A thriller title sequence: open with creeping unease as fragments of text drift in darkness, then SNAP — explosive reveal of the title with shattering glass, then settle into calm aftermath with slow floating debris. Total duration ~45 seconds. The title is 'SHATTERED'. Dark background, white and red accents.", + "expected_phases": ["tense (15s)", "punchy (10s)", "calm (20s)"], + "expected_transitions": ["tense→punchy: hard", "punchy→calm: hard"] +} +``` + +- [ ] **Step 3: Create eval_metadata.json for gradual-escalation** + +Write to `~/.claude/skills/emotion-to-motion-workspace/iteration-3/gradual-escalation/eval_metadata.json`: + +```json +{ + "eval_id": 1, + "eval_name": "gradual-escalation", + "prompt": "A luxury fitness brand launch: begin with elegant product beauty shots of a sleek fitness tracker called 'APEX', slowly build energy as athletes appear in motion, crescendo into triumphant celebration with the brand tagline 'Rise Above'. Total duration ~40 seconds. Black and gold palette, modern sans-serif typography.", + "expected_phases": ["elegant (15s)", "energetic (12s)", "playful (13s)"], + "expected_transitions": ["elegant→energetic: escalation", "energetic→playful: soft"] +} +``` + +- [ ] **Step 4: Verify directory structure** + +```bash +find ~/.claude/skills/emotion-to-motion-workspace/iteration-3 -type f | sort +``` + +Expected output shows both `eval_metadata.json` files and the empty output directories. + +--- + +### Task 6: Generate "High Contrast Arc" WITHOUT Skill + +**Files:** +- Create: `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/without_skill/outputs/index.html` +- Create: `~/.claude/skills/emotion-to-motion-workspace/iteration-3/high-contrast-arc/without_skill/timing.json` + +**Important:** This composition must be generated by a **fresh subagent that does NOT have access to the emotion-to-motion SKILL.md**. The subagent should only receive the prompt and the HyperFrames composition format requirements. + +- [ ] **Step 1: Dispatch a fresh subagent with ONLY the prompt** + +The subagent receives: +- The prompt from eval_metadata.json +- HyperFrames composition format rules: `data-composition-id` attribute, `gsap.timeline({ paused: true })`, `window.__timelines["id"] = tl`, 1920x1080 viewport, GSAP 3.14.2 from jsdelivr CDN, all ` + + + + + + + + + + +
+ + +
+ +
+
SPLIT
+
+
+
EVERY
+
+
+
LETTER
+
+ +
+
SPLIT
+
+ +
+
SplitText — per-character reveal with mask, stagger, and 3D rotation
+
+ + +
+ + + + + + + + + + + + + + + + +
MorphSVGPlugin — rotational interpolation with echo trail
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 24.0m + 16.5m + +
DrawSVGPlugin — progressive architectural reveal
+
+ + +
+ + + + + + + + + + + + +
+
+
+ +
+
+
+
MotionPathPlugin — double helix with trailing particles
+
+ + +
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
PENDULUM
CustomWiggle
+
NEWTON'S CRADLE
CustomEase
+
SQUASH & STRETCH
CustomBounce
+
+ + +
+ + + + + + + +
+
Seven Plugins. One Timeline.
+
+
+ + + + diff --git a/my-video/compositions/captions.html b/my-video/compositions/captions.html new file mode 100644 index 0000000000..1761d4a24f --- /dev/null +++ b/my-video/compositions/captions.html @@ -0,0 +1,141 @@ + diff --git a/my-video/compositions/graphics.html b/my-video/compositions/graphics.html new file mode 100644 index 0000000000..2e1bdea0a7 --- /dev/null +++ b/my-video/compositions/graphics.html @@ -0,0 +1,163 @@ + diff --git a/my-video/compositions/intro.html b/my-video/compositions/intro.html new file mode 100644 index 0000000000..83e9c181cf --- /dev/null +++ b/my-video/compositions/intro.html @@ -0,0 +1,85 @@ + diff --git a/my-video/index.html b/my-video/index.html new file mode 100644 index 0000000000..fbaa0100f4 --- /dev/null +++ b/my-video/index.html @@ -0,0 +1,275 @@ + + + + + + Warm Grain - Hyperframes + + + + +
+ +
+
+ +
+ + + + + +
+ +
+ +
+ + + + + + + +
+ + diff --git a/my-video/meta.json b/my-video/meta.json new file mode 100644 index 0000000000..08d49a81b0 --- /dev/null +++ b/my-video/meta.json @@ -0,0 +1,5 @@ +{ + "id": "my-video", + "name": "my-video", + "createdAt": "2026-03-25T22:43:12.140Z" +} \ No newline at end of file diff --git a/packages/cli/package.json b/packages/cli/package.json index 93a2d5fdc8..7f2f0c815b 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -14,7 +14,7 @@ "build": "bun run build:studio && tsup && bun run build:runtime && bun run build:copy", "build:studio": "cd ../studio && bun run build", "build:runtime": "tsx scripts/build-runtime.ts", - "build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli dist/templates/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true) && (cp -r ../../.claude/skills/compose-video ../../.claude/skills/captions ../../.claude/skills/transitions ../../.claude/skills/media ../../.claude/skills/social-media dist/skills/ 2>/dev/null || true)", + "build:copy": "mkdir -p dist/studio dist/docs dist/templates dist/skills && cp -r ../studio/dist/* dist/studio/ && cp -r src/templates/warm-grain src/templates/play-mode src/templates/swiss-grid src/templates/vignelli dist/templates/ && (cp src/docs/*.md dist/docs/ 2>/dev/null || true) && (cp -r ../../skills/compose-video ../../skills/captions ../../skills/transitions ../../skills/media ../../skills/social-media dist/skills/ 2>/dev/null || true)", "typecheck": "tsc --noEmit" }, "dependencies": { diff --git a/packages/cli/src/commands/install-skills.ts b/packages/cli/src/commands/install-skills.ts index 2cd93435c9..84ffe0ce49 100644 --- a/packages/cli/src/commands/install-skills.ts +++ b/packages/cli/src/commands/install-skills.ts @@ -54,7 +54,7 @@ const GSAP_CACHE = join(homedir(), ".cache", "hyperframes", "gsap-skills"); function getBundledSkillsDir(): string { const dir = dirname(fileURLToPath(import.meta.url)); - const devPath = resolve(dir, "..", "..", "..", "..", ".claude", "skills"); + const devPath = resolve(dir, "..", "..", "..", "..", "skills"); const builtPath = resolve(dir, "skills"); return existsSync(devPath) ? devPath : builtPath; } diff --git a/packages/studio/data/projects/gradual-escalation-with-skill/index.html b/packages/studio/data/projects/gradual-escalation-with-skill/index.html new file mode 100644 index 0000000000..6174c28025 --- /dev/null +++ b/packages/studio/data/projects/gradual-escalation-with-skill/index.html @@ -0,0 +1,1121 @@ + + + + + + APEX - Rise Above + + + +
+ + +
+
+
+ + +
+
+
+
+
+
+
+
+ +
+
+
+
+
12:48
+
APEX
+
+
+
+ +
APEX
+
Precision Engineered Performance
+ + +
+ +
+
+
+ +
+
+
+
+
+ +
+
185
+
BPM
+
+
+
42.8
+
KM
+
+
+
98%
+
VO2
+
+ +
PUSH BEYOND
+ +
+
+
+
+
+
+
+
+
+
+ + +
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + + +
+ +
+
+
+ +
+
Rise Above
+
+
+ + +
The Future of Fitness Technology
+ +
+ + + + + + + + + + diff --git a/packages/studio/data/projects/gradual-escalation-without-skill/index.html b/packages/studio/data/projects/gradual-escalation-without-skill/index.html new file mode 100644 index 0000000000..846096b22f --- /dev/null +++ b/packages/studio/data/projects/gradual-escalation-without-skill/index.html @@ -0,0 +1,988 @@ + + + + + +APEX Fitness Tracker - Rise Above + + + + +
+ + +
+
+
+ + +
+
+
+
+
+
+
+
+
+
10:24
+
BPM
+
72
+
+
+
+
+
APEX
+
Precision Engineered Performance
+ +
+
+
+
+ + +
+
Battery Life
+
14 Days
+
+
+
Water Resist
+
100m
+
+
+
Weight
+
38g
+
+
+
Display
+
AMOLED
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Run
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ride
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
Lift
+
+
+
+
+ + +
+
+
+
+
+
+ +
+ + + +
+ +
+
0
+
Beats Per Minute
+
+
+
0
+
Daily Steps
+
+
+
0
+
Calories Burned
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
Rise
+
+
Above
+
+
+ + +
+
APEX
+
+
Fitness Technology
+
Rise Above
+
+
+
+
+
+ +
+ + + + + + + + + diff --git a/packages/studio/data/projects/high-contrast-arc-v2/index.html b/packages/studio/data/projects/high-contrast-arc-v2/index.html new file mode 100644 index 0000000000..d6bc7c09f0 --- /dev/null +++ b/packages/studio/data/projects/high-contrast-arc-v2/index.html @@ -0,0 +1,686 @@ + + + + + + SHATTERED — Title Sequence + + + +
+ + +
+ + +
+ + +
+ + +
NOTHING
+
IS SAFE
+
THE TRUTH
+
BREAKS
+
EVERY MIRROR
+
LIES
+
BENEATH
+
THE SURFACE
+ + +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+ + +
+
SHATTERED
+
SHATTERED
+
SHATTERED
+
+ + +
A THRILLER
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + + + diff --git a/packages/studio/data/projects/high-contrast-arc-with-skill/index.html b/packages/studio/data/projects/high-contrast-arc-with-skill/index.html new file mode 100644 index 0000000000..59d7ffc83a --- /dev/null +++ b/packages/studio/data/projects/high-contrast-arc-with-skill/index.html @@ -0,0 +1,702 @@ + + + + + + SHATTERED - Thriller Title Sequence + + + + +
+ + +
+
+ + +
no escape
+
the truth
+
beneath the surface
+
broken
+
who are you
+
silence
+
shattered
+
in the dark
+ +
+ + +
+ +
+
SHATTERED
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
SHATTERED
+
a thriller
+ +
+ + + + + + + + + + diff --git a/packages/studio/data/projects/high-contrast-arc-without-skill/index.html b/packages/studio/data/projects/high-contrast-arc-without-skill/index.html new file mode 100644 index 0000000000..282395de9c --- /dev/null +++ b/packages/studio/data/projects/high-contrast-arc-without-skill/index.html @@ -0,0 +1,747 @@ + + + + + +SHATTERED - Thriller Title Sequence + + + + +
+ + +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+ + +
no escape
+
broken
+
fear
+
silence
+
shatter
+
the truth
+
lies
+
blood
+
darkness
+
hidden
+
revenge
+
nothing left
+ + +
+
SHATTERED
+
+ + +
EVERY TRUTH HAS A BREAKING POINT
+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + + + diff --git a/packages/studio/data/projects/infographic-a b/packages/studio/data/projects/infographic-a new file mode 120000 index 0000000000..74d9d56084 --- /dev/null +++ b/packages/studio/data/projects/infographic-a @@ -0,0 +1 @@ +/Users/vanceingalls/src/hyperframes/examples/infographic-a \ No newline at end of file diff --git a/packages/studio/data/projects/infographic-b b/packages/studio/data/projects/infographic-b new file mode 120000 index 0000000000..76dd749b29 --- /dev/null +++ b/packages/studio/data/projects/infographic-b @@ -0,0 +1 @@ +/Users/vanceingalls/src/hyperframes/examples/infographic-b \ No newline at end of file diff --git a/packages/studio/data/projects/infographic-eval b/packages/studio/data/projects/infographic-eval new file mode 120000 index 0000000000..90ea199df5 --- /dev/null +++ b/packages/studio/data/projects/infographic-eval @@ -0,0 +1 @@ +/Users/vanceingalls/src/hyperframes/examples/infographic-eval \ No newline at end of file diff --git a/packages/studio/data/projects/metrics-no-skill b/packages/studio/data/projects/metrics-no-skill new file mode 120000 index 0000000000..8896bdede2 --- /dev/null +++ b/packages/studio/data/projects/metrics-no-skill @@ -0,0 +1 @@ +/Users/vanceingalls/src/hyperframes/examples/metrics-no-skill \ No newline at end of file diff --git a/packages/studio/data/projects/metrics-with-skill b/packages/studio/data/projects/metrics-with-skill new file mode 120000 index 0000000000..e2423aa47e --- /dev/null +++ b/packages/studio/data/projects/metrics-with-skill @@ -0,0 +1 @@ +/Users/vanceingalls/src/hyperframes/examples/metrics-with-skill \ No newline at end of file diff --git a/packages/studio/data/projects/openclawd-no-skill/index.html b/packages/studio/data/projects/openclawd-no-skill/index.html new file mode 100644 index 0000000000..0bc625672d --- /dev/null +++ b/packages/studio/data/projects/openclawd-no-skill/index.html @@ -0,0 +1,1243 @@ + + + + + + + + + +
+ + +
+
+
+
+
+
+ Terminal +
+
+
$
+ +
OpenClawd v1.2.0 — AI Desktop Agent
+
SDK backends: anthropic, openai, google, ollama
+
Loaded 20 providers / 80+ models
+
Models: Opus 4.6, GPT-5.3, Gemini 3, DeepSeek-V4, Llama 4 Scout
+
MCP servers: 12 connected
+
Opening desktop app on :3001
+
+
+
+ + +
+
+
OpenClawd
+
Open Source Alternative to Claude Cowork
+
+ Ask anything or type / for commands... +
+ +
+
+
+
Claude Code
+
Opus 4.6
+
Attach
+
+
+
+ + +
+
+
Chat History
+
Review my API code
+
Refactor auth module
+
Debug WebSocket issue
+
Write unit tests
+
Deploy pipeline setup
+
+
+
Review my API code for potential security issues and suggest improvements
+
+
+
C
+ Claude · Opus 4.6 +
+
+
+
+
+
Progress
+
✓
Reading source files
+
✓
Analyzing patterns
+
✓
Security scan complete
+
Tool Calls
+
read_file("src/api/auth.ts")
+
grep("SQL.*query", "src/")
+
analyze_security("src/api/")
+
+
+ + +
+
+
Providers
+
Claude Code
+
OpenCode
+
OpenAI
+
Gemini
+
DeepSeek
+
Llama 4
+
MiniMax
+
Ollama
+
+
+
Models
+
Opus 4.6
Most capable, complex reasoning
+
Sonnet 4.5
Balanced speed & quality
+
GPT-5.3
OpenAI flagship
+
Gemini 3 Pro
Google multimodal
+
DeepSeek-V4
Open-weight powerhouse
+
Llama 4 Scout
Meta open source
+
Mistral Large 3
European excellence
+
+
Switch providers & models in one click
+
+ + +
+
+
MCP Server Catalog
+
20+ servers available — connect your AI to everything
+
+
All
+
Dev Tools
+
Databases
+
Communication
+
Browser
+
+
+
+
📁
+
Filesystem
+
No auth required
+
Install
+
+
+
🔌
+
Git
+
No auth required
+
Install
+
+
+
🐙
+
GitHub
+
OAuth token
+
Install
+
+
+
🗃
+
PostgreSQL
+
Connection string
+
Install
+
+
+
💬
+
Slack
+
Bot token
+
Install
+
+
+
🌐
+
Puppeteer
+
No auth required
+
Install
+
+
+
+
+ + +
+
Your AI, everywhere you chat
+
Deploy OpenClawd as a bot on your favorite platforms
+
+
+
📲
+
WhatsApp
+
● Connected
+
VoiceImagesGroups
+
+
+
✈
+
Telegram
+
● Connected
+
CommandsInlineFiles
+
+
+
🔒
+
Signal
+
● Connected
+
E2EPrivate
+
+
+
💬
+
iMessage
+
● Connected
+
macOSTapback
+
+
+
+ + + + + +
+
100% OPEN SOURCE
+ +
+
★
+
★
+
★
+
★
+
+
Star us on GitHub
+
github.com/openclawd/openclawd
+
+ +
+ + + + + + + diff --git a/packages/studio/data/projects/openclawd/index.html b/packages/studio/data/projects/openclawd/index.html new file mode 100644 index 0000000000..321cca2f4c --- /dev/null +++ b/packages/studio/data/projects/openclawd/index.html @@ -0,0 +1,1598 @@ + + + + + +OpenClawd Product Showcase + + + +
+ + + + +
+
+
+
+
+
+ Terminal +
+
+
+ +
◆ OpenClawd v2.1.0
+
✓ Claude Code SDK connected
+
✓ OpenCode SDK connected
+
✓ 20+ providers · 80+ models loaded
+
  Opus 4.6 · GPT-5.3 · Gemini 3 · DeepSeek R2
+
✓ MCP servers connected (5/5)
+
→ Opening desktop app on :3001
+
+
+
+ + + + +
+
+
+
+
+
+ OpenClawd +
+
+
OpenClawd
+
Open Source Alternative to Claude Cowork
+
+ What would you like to build? +
+
+
+
Claude Code
+
Opus 4.6
+
Attach
+
+
+
+
+ + + + +
+
+
+
+
+
+ OpenClawd — Chat +
+
+
+
MCP Integration
+
Code Review
+
Deploy Script
+
API Design
+
Bug Analysis
+
+
+
Review my API code
+
+
+
+
Progress
+
✓
Reading files
+
✓
Security analysis
+
●
Applying fixes
+
○
Creating PR
+
+
Tool Calls
+
✓ filesystem.read
+
✓ bash.exec
+
→ github.create_pr
+
+
+
+
+
+ + + + +
+
+
+
+
+
+ OpenClawd — Settings +
+
+
+
Providers
+
Claude Code✓
+
OpenCode
+
OpenAI
+
Gemini
+
DeepSeek
+
Llama 4
+
MiniMax
+
Ollama
+
+
+
Models
+
Opus 4.6Latest flagship
+
Sonnet 4.5Fast & capable
+
GPT-5.3 CodexCode specialist
+
Gemini 3 ProMultimodal
+
DeepSeek R2Reasoning
+
Llama 4 ScoutOpen source
+
MiniMax-01Efficient
+
+
+
Claude Code + OpenCode SDK — 20+ providers · Open Source models
+
+
+ + + + +
+
+
+
MCP Server Catalog
+
20+ servers available
+
+
+
All
+
Core
+
Database
+
Developer
+
Communication
+
+
+
+
📁
Filesystem
+
No Auth

+ Install +
+
+
🔀
Git
+
No Auth

+ Install +
+
+
🐙
GitHub
+
Requires Auth

+ ✓ Installed +
+
+
🐘
PostgreSQL
+
Requires Auth

+ Install +
+
+
💬
Slack
+
Requires Auth

+ Install +
+
+
🎭
Puppeteer
+
No Auth

+ Install +
+
+
+
+ + + + +
+
+
Your AI, everywhere you chat
+
Full tool access · Memory · Scheduling
+
+
+
💬
+
WhatsApp
+
Connected
+
ToolsFilesVoice
+
+
+
✈
+
Telegram
+
Connected
+
BotsGroupsCode
+
+
+
🔒
+
Signal
+
Connected
+
E2EPrivateSecure
+
+
+
📱
+
iMessage
+
Connected
+
AppleNativeSiri
+
+
+
+
+ + + + + + + + + +
+
+
100% OPEN SOURCE
+
+ + + + ✦ + ✦ + ✦ + ✦ +
+
Star us on GitHub
+
github.com/rohitg00/openclawd
+
+
+ +
+ + + + + + + + + diff --git a/packages/studio/data/projects/vignelli b/packages/studio/data/projects/vignelli new file mode 120000 index 0000000000..e94b9babd7 --- /dev/null +++ b/packages/studio/data/projects/vignelli @@ -0,0 +1 @@ +/Users/vanceingalls/src/hyperframes/examples/vignelli \ No newline at end of file