AI NewsOpen sourceAnnouncement
howseen-ai released claude-motion-design, a Claude Code skill that renders motion-graphics videos from HTML and Playwright
howseen-ai, a company that tracks whether AI assistants mention a brand, published a Claude Code skill that lets Claude plan and render a motion-graphics video from HTML, Playwright and ffmpeg, with no After Effects and no Remotion license.
Image: GitHub
Why it mattersShort launch videos and explainer clips are a step most teams outsource, and a MIT skill that lets Claude render them from code puts that step inside the same loop a developer already uses to write code.
Making a 20-second launch video for a product update has meant hiring a motion designer or paying for After Effects, and the engineering alternative, Remotion, requires a paid company licence once a for-profit team passes three employees.
howseen-ai, a company that tracks whether ChatGPT, Gemini and Perplexity mention a brand, published claude-motion-design on GitHub on September 27 and the repository has picked up 207 stars in six days. The founder is Raphael Aubry. It is a Claude Code skill: install it into ~/.claude/skills/motion-design/, point Claude at it, and the model plans a video and renders it to an MP4 using HTML, Playwright and ffmpeg. The README names the project's own launch video, a 24-second clip at 60 frames per second, as the worked example, and says it was built in five iterations with Claude Opus 5.5.
How the render works
The skill builds every clip around a seek(t) function that computes each frame from a time value. The README calls this a deterministic model: the same inputs produce the same frames, so Claude can regenerate any single frame on its own to debug it. Springs are closed-form step responses for the same reason: a formula returns the position at time t directly, so every value stays reproducible. A headless Chromium captures N sub-frames per output frame across a 180-degree shutter and ffmpeg's tmix blends them for motion blur. A draft mode renders at 540p for fast iteration before a final pass. Audio runs through two-pass loudness normalisation targeting -14 LUFS, with drop detection by band energy so that sound effects land on the beat.
The repository ships with ports of two 21st.dev motion components, Animated Beam and Border Beam, plus closed-form helpers for camera moves, text animations, colour transitions and shared-element handoffs. It is MIT-licensed. Media fetched by the install scripts (Mixkit, Pexels, Unsplash, OFL fonts) keeps the original licence. Dependencies are modest: Python with playwright, imageio-ffmpeg, numpy and pillow, plus Chromium and ffmpeg on the machine.
Why the clip has to be code
The target reader is a developer who already uses Claude Code and wants a short video out at the end of a session. The payoff is that an edit becomes a code change: "make the transitions faster" or "add a 3D cube" is a prompt, and Claude types the code. The cost is that every effect has to exist as code in the skill or be added to it, so the first project of a new kind takes longer than a template in After Effects would. The deterministic frame function is what makes the AI iteration loop work: without it, Claude cannot regenerate one frame on its own, and every change forces a full re-render of the clip.
Source
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.