A skill that teaches Claude to make motion-graphics videos with plain JavaScript instead of an animation library.
Ask an AI for a motion graphic and it reaches for an animation library: a timeline API, a tween engine, a React video framework. That library is what holds the result back. The model starts thinking in the library's vocabulary instead of in motion. It spends its effort on an API it only half-remembers. And the hidden state (playheads, callbacks, real-time loops) means nobody can say what frame 431 looks like without playing everything before it.
A simple JS script works much better. One pure function, seek(t), sets everything on screen
from the time t, using math, CSS, SVG and canvas, which the model knows deeply. Because any
frame is one call away, the model can render a few stills, look at them, and fix its own work
before rendering the video. That loop is where the quality comes from.
This skill carries that workflow. It downloads the small open-source engine raw-motion (headless-Chrome renderer, real motion blur, synthesized soundtrack, zero npm dependencies), scaffolds a scene, writes it, checks stills, and builds a 60 fps MP4. It also includes the craft notes and pitfalls from making ~20 video ads this way.
git clone https://github.com/eneskirca/raw-motion-skill /tmp/raw-motion-skill
cp -R /tmp/raw-motion-skill/raw-motion ~/.claude/skills/Then just ask: "make a 12 second 9:16 launch video for my app", "animate our logo",
"turn this changelog into a 15s promo". The first run clones the engine into ~/.raw-motion.
Requirements: Node ≥ 22, Google Chrome or Chromium, ffmpeg, python3 with numpy. macOS and Linux.
raw-motion/
├── SKILL.md the workflow: plan → scaffold → write seek(t) → check stills → build
├── scripts/ensure-engine.sh clone/update the engine and check dependencies
└── references/craft.md easing, overlap, staggering, type, 9:16 safe zones, pitfalls
MIT