Animated Video

Animated Video

Two paths depending on complexity. Decide first, tell the user which path you're taking.

Phase 0 — Context pre-flight (auto-detect, ONE question max)

Before deciding Path A vs B, silently check for context:

1. Read .claude/design-tokens.json if exists
2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — brand folder match
3. Glob codebase tokens
4. Scan brief for github / Figma / image / PRD attachment → dispatch ingestion skills

If nothing — ONE AskUserQuestion: design system / codebase / screenshot / Figma / none / decide. Report "Using . Proceeding."

Path A — Standalone HTML with Stage/Sprite

For any animation that can live in one HTML file (explainer reel, product intro, transition sequences, hero animations — <60s typical).

Uses the Remotion-compatible in-browser engine in starters/animations.jsx. Same mental model as Remotion — different runtime (no build step, runs under Babel standalone).

Available primitives:

Steps:

1. Invoke Skill: frontend-design for aesthetic direction
2. Create artifacts/<slug>.html with React + Babel + animations.jsx
3. Bash(cp starters/animations.jsx "$(dirname <html>)/") — copy starter next to the HTML
4. Run /serve (required for external .jsx CORS)
5. Compose the scene. Pattern:

jsxCopy code
function Scene() {
  const t = useTime();  // Stage-shared clock
  // drive properties via interpolate()
  const bg = interpolate(t, [0, 2000, 5000], ['#fef9f3', '#f3d8a8', '#8a5a22'], { easing: Easing.inOutCubic });
  return (
    <div style={{ position: 'absolute', inset: 0, background: bg }}>
      <FadeIn start={0} duration={500}>
        <h1>Entry stays visible after 500ms</h1>
      </FadeIn>
      <Reveal start={400} duration={700} from="bottom" distance={40}>
        <p>Fade + slide combo</p>
      </Reveal>
      <Sprite start={1500} end={3500} easing={Easing.outQuart}>
        {(local) => <div style={{ opacity: local, transform: `scale(${local})` }}>Bounded — disappears after 3500</div>}
      </Sprite>
    </div>
  );
}

function App() {
  return <Stage duration={5000} width={1920} height={1080} loop={false}><Scene/></Stage>;
}

6. /done http://127.0.0.1:4567/artifacts/<slug>.html — verify scrubber works, animation plays cleanly, console clean
7. For exporting frames/seeking for PPTX: external tools can send window.postMessage({ seekMs: N, playing: false }, '*') — Stage listens and jumps

Path B — Remotion (MP4 export, multi-scene video)

For long-form (>60s), multi-scene narrative, or MP4-export needs.

1. Delegate to Skill: remotion-best-practices — full Remotion workflow
2. Set up artifacts/<slug>-remotion/ as a separate Remotion project
3. Return a preview HTML and MP4 artifact when done

When to pick which

Popmotion fallback

For real spring physics, keyframe math, or gesture tracking beyond what Easing.spring() supports, add:

htmlCopy code
<script src="https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js"></script>

and use window.popmotion directly.

Verify

Path A: /done <url> — scrubber reaches end, clicking bar seeks, play/pause toggles, console clean. If the user wants PPTX frames of this animation: seek via postMessage before each screenshot.

Path B: Remotion preview server at localhost:3000 + exported MP4.