claude-motion-design renders a video from one seek(t) function

The whole film is a pure function of time

The README states the premise in one line: a Claude Code skill to make motion design videos in pure code, HTML plus Playwright plus ffmpeg, with no After Effects, no Remotion license and no editing app. The promise is that every frame is computed from time, rendered frame by frame, blended for motion blur, and cut to the beat of the music, with every sound effect landing on its measured peak.

The engineering consequence is stated in the list of reasons to use code instead of an editor. The film is deterministic, because the whole thing is one seek(t) function, so the same input gives the same frames every time and you can fix one scene without touching the rest. It is free, because the toolchain is Chromium, ffmpeg and Python with no licence and no subscription. It is beat-synced by construction, because scenes are placed on a beat map, the music drop is aligned to the key visual moment, and sound effects are placed by peak. And it is iterable by an AI, because requests like making the transitions faster, changing the music or adding a 3D cube on the drop are code changes rather than a new editing session.

That last point is the reason this project exists as a Claude Code skill. A video described as code is something a coding agent can edit, and the diff of a pull request is the review artefact.

The reference work is the launch video of Howseen, which tracks whether ChatGPT, Gemini and Perplexity recommend a brand. The README says it was made with Claude Opus 5.5 and this skill in five iterations, and that the full source is in the examples directory.

The engine forbids CSS transitions and timers

The engine rules are the interesting part of the skill, and the first one is a prohibition. The engine is seek(t) only, with no CSS transitions and no timers. Everything in the film is a function of the time value, and the renderer advances that value and takes a picture.

That rule is what makes the subframe motion blur and the frame-accurate audio possible, because there is no hidden state in a transition that only the browser's animation engine knows about. The rest of the engine follows from it: closed-form springs, so a spring animation has a value at any t rather than a state that has to be integrated frame by frame, a camera keyed in log space, shared-element handoffs between scenes, colour floods that clear the farthest corner, and masked word-by-word text.

It also ports components from another ecosystem. The skill includes ports of 21st.dev components, specifically Animated Beam and Border Beam, rewritten to seek(t). That tells you the target of the technique: the kind of motion design that usually ships as a React library with its own animation runtime, rewritten so it can be sampled at an arbitrary time.

The cost of the approach is that the designer has to express everything as a value rather than as a transition. There is no easing curve the browser picks for you, and nothing happens unless it is a function of t. For a skilled motion designer that is a constraint rather than a problem. For someone who thinks in timeline panels, it is a different way of working.

Rendering with Playwright and encoding with ffmpeg

The render rules describe a careful pipeline, and each entry exists because of a specific failure it prevents.

Frames are Playwright screenshots, taken with fonts ready, Web Animations paused, and two requestAnimationFrame ticks after each seek, which gives the browser time to apply the state before the picture is taken. There is a fast 540p draft before the master render, so an iteration does not cost a full encode. Motion blur comes from N subframes per frame on a 180 degree shutter, blended with tmix, and the README is explicit that the blend must never cross a hard cut, since averaging frames from two different shots produces a smear rather than a blur.

The encode is BT.709 TV-range, and there is pop detection plus one-frame flash detection, which are checks for artifacts that are easy to introduce with a frame-accurate pipeline and hard to see by eye. There is a loop seam check in both position and velocity, so a looping animation does not jump at the wrap point. The WebGL rendering uses WEBGL=1 SwiftShader flags, which makes rendering work in a headless environment without a GPU.

The audio side has the same level of care. The real drop is found by band energy and the README says never to trust an auto beat grid. The song is started so the drop hits the key frame, each sound effect is placed by its measured peak, and the mix is normalised with a two-pass loudnorm to -14 LUFS.

The result is a pipeline that is deterministic by construction and checked at the points where a generated video usually breaks.

The flow, from brief to approved stills

Before any code is written, the skill asks for a brief and a set of facts. The flow is: inputs, then a beat map, then four stills approved, then the full render, then a pop scan, then audio, and finally the final file. The four approved stills are a checkpoint, and putting it before the expensive step is the point.

The brief and QA material is the other half. There is a brand folder plus a sourced facts.md, which keeps the claims in the video traceable to a source rather than to the model's memory. There is a director's brief, with a named reference style, timed states, a layer list and a sound plan, and it comes before any code. There are anti-AI-motion rules, which is a recognition that the default output of a generated animation has recognisable tells. There is a prompt library covering one-shot, branded, UI morph, launch reveal and LinkedIn loop work, and a symptom to fix table, which is the kind of debugging aid that only exists when somebody has already hit the failures.

The techniques list also says where the ideas came from. GSAP and Web Animations seeking, adaptive subframes, cut seams, captions, poster frame 0 and B-roll over a voice-over are all borrowed from other public skills, which is an efficient way to build a skill and an honest thing for a README to say.

The assets side is deliberately restricted. Only free sources are used, with Mixkit for music, sound effects and video, Pexels and Unsplash for stock, svgl for logos and simple-icons for icon sets, and scripts that search and download them.

Remake mode, phase by phase

The remake mode is the most ambitious feature, and it is described in enough detail to be judged. It does a frame-locked 1:1 remake of any launch video for your brand, producing an original and an Opus 5.5 copy side by side in a split-screen.

Phase 0 extracts every frame from the reference, detects the cuts and writes a shot-by-shot spec. Phase 1 builds a shared seek(F) engine with a palette filter. Phase 2 runs four build agents, one per shot group, each verifying side-by-side compare sheets against the reference, plus one audio agent that stretches a royalty-free track to the reference BPM and synthesises sound effects on the reference hit times. Phase 3 renders, encodes the split-screen and produces a stacked sync check.

The verification loop is the part that makes the claim plausible. Each shot group agent checks its work against compare sheets, and the audio agent works from the reference's own timings rather than from a beat detector. The final stacked sync check is the output a reviewer would want to see.

There is a line in the README that matters more than the phase list. The reference's music, voice and people photos are never reused. The remake reproduces timing, structure and visual language while sourcing its own audio and imagery, which is both the legal requirement and the thing that makes the output usable rather than a copy.

There is also an honesty rule attached to the output. Illustrative data is labelled as Example data on screen, and captions stay true. For a project that generates marketing material with an agent, that is a reasonable self-imposed constraint.

Installing the skill and rendering the example

Installation is three steps. The skill directory is copied into Claude Code:

mkdir -p ~/.claude/skills && cp -r skill/motion-design ~/.claude/skills/

The Python dependencies are installed, along with the Chromium build that Playwright drives:

pip install playwright imageio-ffmpeg numpy pillow && python -m playwright install chromium

Then, in Claude Code, you ask for a video or type the /motion-design command.

The example directory is the fastest way to see the whole chain work, and the README gives the sequence:

cd examples/howseen-launch
python fetch_assets.py              # downloads the free music, SFX, logos and font (not redistributed here)
python -m http.server 8000 &        # serve the film
python render.py probe 1 8 15 20    # quick stills -> probe/sheet.png
python render.py full               # 24 s, 60 fps, subframe motion blur -> out/video.mp4
python audio.py                     # music + SFX by peak, -14 LUFS -> out/audio.wav

The probe command renders a few stills at chosen timestamps into a contact sheet, which is the fast feedback loop. The full command produces a 24 second, 60 fps video with subframe motion blur. The audio command builds the music and sound effect mix. The two outputs are then muxed with ffmpeg into the final file, with the video stream taken from the first input and the audio from the second, H.264 video at CRF 16, AAC audio, and the shortest stream ending the output.

The fetch_assets.py comment is worth noticing. The free music, sound effects, logos and font are not redistributed in the repository, they are downloaded at run time, which keeps the repository itself free of third-party media and its licence obligations.

Licensing, credits and the shape of the repository

The licence is MIT for the code, and the README is careful to separate that from the media. Third-party media is downloaded by fetch_assets.py and stays under its own licence, with the Mixkit free licence, the Pexels and Unsplash licences, and the OFL for Geist. Brand logos belong to their owners, and the Howseen mark in the example belongs to Howseen AI.

That distinction is the one to hold on to. The code is permissively licensed and you can fork it. The rendered video is a different object, because it contains assets that were downloaded from elsewhere, and each of those assets keeps its own terms. A team shipping a launch video built with this skill has to check the licences of the music and the stock footage that ended up in the cut, and the ones the script picks are free rather than cleared for every use, which is usually but not always the same thing.

The repository itself is small. The top-level entries are the skill directory, the examples directory with the Howseen launch source, the README, the licence and a gitignore. There are no releases, and the last push was on 2026-10-04, with the project not archived.

The project is made by Raphaël Aubry, founder of Howseen, and the homepage is howseen.ai. The example is the proof of concept, and the skill is the reusable part. Whether the skill is worth adopting depends on whether you want motion design that lives in a repository and can be regenerated, which is a real advantage for a product whose launch video changes with the product, and a poor fit for a one-off brand piece that a designer would rather art direct by hand.

Editorial conclusion

claude-motion-design fits a developer or designer who wants a launch video or product animation they can version, diff and regenerate, and who is willing to accept that the output is produced by a headless browser rather than by hand in an editor. It is the wrong tool for a video that has to be art-directed frame by frame, and it is the wrong tool if you cannot install Chromium and ffmpeg on the machine that renders it. Before adopting it, read the skill directory rather than the README, since the engine rules live there, and remember that the third-party media keeps its own licence, so the shipped video inherits the terms of every asset that fetch_assets.py pulls in.

Frequently asked questions

Official sources

1. howseen-ai/claude-motion-design on GitHub
2. Issues
3. License: MIT
4. Project website
5. README