motion-web is a Claude skill for building websites with real physics, and it has 556 stars in three weeks

A landing page written by a coding agent almost always animates the same way: every element fades in from opacity 0 to 1 on a linear curve. The reason lies in the instructions the model was given about how motion should behave, before it ever wrote any code.

motion-web is an agent skill by a developer known as feitangyuan that gives Claude Code and Codex a physics library and a set of hard rules for using it. The GitHub repository has 556 stars and 42 forks, 21 days after it was created on 8 September. It ships as a directory of seven complete example pages the model can copy from, plus a Playwright test script that fails any output that reverts to linear easing.

The seven cases each show a different physical rule. string-clock draws a clock whose hands are soft ropes and whose tips land on the exact minute, so the visual is loose and the reading stays accurate. char-curtain hangs 576 characters on 24 independent Verlet ropes, and the pointer moving across the page pushes each column of characters sideways. ink-crowd puts 620 capsule bodies through a WebGL2 geometry pass and traces contour lines only where the depth changes. wheel-rail intercepts the mouse wheel and moves labels along an SVG curve with three depth planes at a 7 to 1 parallax ratio. press-stack uses nine position: sticky panels to stack vinyl records on top of each other as the reader scrolls, drawn as pure vector on a 2D canvas. Each case is a single HTML file, with no build step, no CDN, and no external font.

The verification part is what most similar tools skip. scripts/verify_case.py opens each case in a headless Chromium, sends real pointer and wheel events, and checks measured quantities: displacement ratios, spring overshoot anchors, state convergence. A page that returns the same six pixels of movement regardless of what the user does fails these checks. The skill's own README describes them as a hard test against "AI slop, synthetic drifts, and dead interactions".

For a small team building a marketing site, this is a way to ask an agent for motion without accepting the standard flat output. Point Claude at the skill, describe the section, and the model has both a working reference case and a script that will tell it when the output is wrong. The seven cases together cover most of what a hero section, a features grid or a scroll story asks for, and a designer who prefers a different physical model can add one by writing a new checker beside it. The licence is CC BY-NC 4.0, so commercial use needs the author's permission before release.

Source

Primary source: feitangyuan/motion-web on GitHub.