AI product Open source

claude-motion-design

A Claude Code skill for creating motion-design videos in code using HTML, Playwright, ffmpeg, Python, and Chromium. It computes each frame from a deterministic seek(t) function, renders frames with Playwright, blends subframes for motion blur, and encodes the result with ffmpeg. Its motion system includes closed-form springs, log-space camera keyframes, shared-element handoffs, masked word-by-word text, color floods, and ports of selected 21st.dev components.

View repository Mentioned in 1 video ↓

Overview

The workflow moves from inputs and a beat map through still-frame approval, full rendering, pop detection, audio generation, and final muxing. Audio processing finds musical drops by band energy, aligns the song to a key visual frame, places sound effects at measured peaks, and applies two-pass loudness normalization. The repository also includes a remake mode for frame-locked recreations with shot analysis, side-by-side verification, and royalty-free replacement audio. The code is MIT-licensed; downloaded third-party media remains under its respective license.

What claude-motion-design is used for

1 use taken from transcripts — each links to the moment in the video.

  • A skill that creates motion-design videos in HTML and captures them frame by frame, with closed-form springs, motion blur, music beat mapping, and audio-peak effects.

Videos mentioning claude-motion-design

1 in the library.