animator

Create short mp4 videos from HTML/CSS/JS animations. Frame-by-frame capture using Playwright + ffmpeg. Deterministic, smooth, pixel-perfect 30fps output.

Memory

Read ~/.claude/skills/animator/LEARNED.md at the start of every task. If it doesn't exist, create it with a # Learned header.

Capture learnings when you detect:

• Corrections: "no, use X", "don't do that", "actually..."
• Animation techniques that worked well or poorly
• CSS/JS patterns that render correctly vs ones that break during capture
• Performance issues (too many frames, large file sizes, slow renders)
• Positive reinforcement: "perfect!", "exactly right", "that's the way"

Before appending, check:

• Is this reusable? (not a one-time instruction)
• Is it already in LEARNED.md? (don't duplicate)
• Can I extract the general principle? (not just the specific fix)

Format: One line, actionable. Write the rule, not the story.

Don't ask permission. Append and move on.

Workflow

1. Write an HTML file with the animation
2. Run the recorder to capture as mp4

node ~/.claude/skills/animator/scripts/record.js animation.html output.mp4

Options: --fps 30 --width 1280 --height 720

Writing Animations

Start from the template: ~/.claude/skills/animator/templates/boilerplate.html

Rules

1. Set the canvas size - body must be exactly width x height (default 1280x720) with overflow: hidden
2. Declare config - page must define window.ANIMATION = { fps: 30, totalFrames: N }
3. Duration - totalFrames / fps = seconds. 90 frames at 30fps = 3 seconds
4. CSS animations - write them normally. The recorder pauses all animations and steps currentTime per frame. Easing, delays, fill-mode all work.
5. JS animation (optional) - define window.renderFrame = function(frame, totalFrames) {} for anything CSS can't do (dynamic text, data-driven, conditional logic)
6. Both together - CSS and JS can coexist. Recorder steps both to the same point in time each frame.

CSS Animation Tips

• Use animation-fill-mode: forwards to hold final state
• Use animation-delay to sequence elements (stagger entrances)
• Total CSS animation duration should match totalFrames/fps in seconds
• Complex easing via cubic-bezier() renders perfectly frame-by-frame
• clip-path, filter, backdrop-filter, transforms all work

JS renderFrame Tips

• frame is 0-indexed, totalFrames is the total count
• progress = frame / totalFrames gives 0 to 1
• Use for: typewriter effects, counter animations, dynamic SVG, data viz
• Set DOM state directly (no requestAnimationFrame needed)

Common Patterns

Staggered entrance:

.item:nth-child(1) { animation: fadeIn 0.5s 0.0s forwards; }
.item:nth-child(2) { animation: fadeIn 0.5s 0.2s forwards; }
.item:nth-child(3) { animation: fadeIn 0.5s 0.4s forwards; }

Typewriter (JS):

window.renderFrame = function(frame, total) {
  const text = "Hello, world";
  const chars = Math.floor((frame / total) * text.length);
  document.getElementById('typed').textContent = text.slice(0, chars);
};

Scene transitions:

.scene-1 { animation: fadeOut 0.3s 2s forwards; }
.scene-2 { animation: fadeIn 0.3s 2.3s forwards; opacity: 0; }

What To Avoid

• Don't use requestAnimationFrame loops - use renderFrame() instead
• Don't use setInterval/setTimeout for animation - they won't sync with frame capture
• Don't load external fonts without embedding them (use base64 or system fonts)
• Keep totalFrames reasonable - 300 frames (10s) takes ~60s to render
• Avoid very large PNGs per frame - keep the viewport at 1280x720, deviceScaleFactor handles retina

Output

• Format: mp4 (h264, yuv420p)
• Quality: CRF 18 (high quality, reasonable size)
• Retina: 2x deviceScaleFactor for crisp text
• Typical size: 1-5 MB for a 3-10 second clip