Review a described animation against the twelve animation principles and get a question for each one
Animation principles reviewFreeFor designers
25/day
free runs a day, no sign-in.
Before: what you give it
The example input, as typed in. You paste text, CSS, markup or notes.
description: A card lifts off the page in 250ms with a spring easing, casting a growing shadow, then settles with a small overshoot while its child icons follow 40ms later. A haptic tick confirms the save. purpose: ui
After: what comes back
The first lines of a real run on that input. Nothing here is edited by hand.
Principles touched by the description: 6 of 12 (keyword match, purpose: ui) - Squash and stretch: not mentioned. Ask: Does the object change shape to show weight or speed, with its volume kept steady? UI: Use sparingly: a button that compresses on press, a stretchy pull-to-refresh. - Anticipation: not mentioned. Ask: Is there a small move in the opposite direction before the main action? UI: A tiny dip before a lift, a drawer nudging before it opens. - Staging: not mentioned. Ask: Is it clear which one thing the eye should follow? UI: Dim the background, animate one element at a time, keep the rest still. - Straight ahead and pose to pose: not mentioned. Ask: Are the key poses (start, end, peak) defined before the in-betweens? UI: Define start and end states first, then pick the easing between them. - Follow through and overlapping action: mentioned. Ask: Do parts stop at different times so nothing halts all at once? UI: Let a card settle a beat after its shadow, or stagger child elements. - Slow in and slow out: mentioned. Ask: Does the speed change, rather than run at a constant rate? UI: Ease out for entrances, ease in for exits; linear only for opacity and progress. ... full output on the tool page
What you get
Which principles the description touches, a question per principle, and UI translations
What it cannot do
Keyword matching on your description: 'not mentioned' may still be in the design, and 'mentioned' proves nothing about quality.
Who it is for
- Designers
Free and Pro
| Free | 25 runs a day per IP address, up to 100,000 characters a run. |
|---|---|
| Pro | No daily limit, 300 requests a minute, up to 200,000 characters a run. |
Use it from your assistant
The tool is called review_animation_principles. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.
claude mcp add --transport http designers https://designers.allthepossibles.com/mcpcurl -X POST https://designers.allthepossibles.com/api/animation-principles-review -H 'content-type: application/json' -d '{"description":"A card lifts off the page in 250ms with a spring easing, casting a growing shadow, then settles with a small overshoot while its child icons follow 40ms later. A haptic tick confirms the save.","purpose":"ui"}'Try it here
The form starts with the same example input, so you can run it first and then swap in your own.
More in motion
- Motion check
Find autoplay, endless loops, possible flashing and long transitions, and get reduced-motion CSS to paste.
- Easing designer
Turn an easing name, cubic-bezier or spring into CSS timing functions with sampled progress and feel notes
- Duration scale
Pick an animation duration from distance, size and complexity, and get an enter and exit pair
- Motion CSS audit
Find animations in your CSS that force layout, ignore reduced motion or run forever without a pause
- Stagger planner
Plan staggered reveal delays for a list so the whole sequence fits a time budget
- Lottie JSON lint
Lint a Lottie file for size, expressions, embedded images and features that break on mobile players