What is the web-motion-design skill?
The web-motion-design skill from dylantarre's animation-principles repository turns Disney's 12 principles into web rules. Micro interactions get 100 to 200ms, standard transitions 200 to 400ms, linear easing is out for UI, and only transform and opacity should animate where possible. Its SKILL.md covers CSS, JavaScript and React or Vue motion.
The web-motion-design skill lives at skills/01-by-domain/web-motion-design in dylantarre's animation-principles repository. Its SKILL.md applies Disney's 12 animation principles to CSS, JavaScript and frontend frameworks, and it is meant for any browser based animation work.
The SKILL.md is specific about numbers. Micro-interactions run 100 to 200ms, standard transitions 200 to 400ms, complex sequences 400 to 700ms and page transitions 300 to 500ms. It also bans linear easing for UI motion.
The principles as web code
- Squash and Stretch uses
scaleYcompression on button press andscaleXstretch on hover, keeping volume constant. - Anticipation shrinks a dropdown 2 to 3% before it expands, or moves content 5px right before sliding it left.
- Slow In and Slow Out sets standard easing to
cubic-bezier(0.4, 0, 0.2, 1), enter tocubic-bezier(0, 0, 0.2, 1)and exit tocubic-bezier(0.4, 0, 1, 1). - Exaggeration scales hover states to 1.05 to 1.1 and moves error shakes 10 to 20px.
- Follow Through staggers child animations with decreasing
animation-delayvalues. - Solid Drawing keeps
transform-originconsistent and usesperspectivefor depth.
Performance rules in the skill
- Animate only
transformandopacityfor GPU acceleration. - Use
will-changesparingly and remove it after the animation. - Prefer CSS over JavaScript when the animation is predictable.
- Test on low-powered devices.
Related: animation-vocabulary, improve-animations, review-animations and fixing-motion-performance.
Who the web-motion-design skill is for
Best for
- Developers building CSS animations, JavaScript transitions or React and Vue motion, which is the trigger in the skill description.
- Teams who want concrete duration bands and easing curves in the agent's context.
- Anyone who wants hover, press and dropdown motion that follows named principles.
Not for
- Framework specific guidance. The repository has separate skills for framer-motion, gsap-greensock, react-spring and lottie-bodymovin, Related: gsap-core.
- Mobile touch, game or data visualization work, which have their own skills in the same repository.
Use it with UiChemy
Motion rules apply while your agent writes front end code. To move the page into WordPress, route the build through Figma, Composer, or an AI build plus MCP, then convert, and review the animations yourself. Click Get Started on uichemy.com.
How to install Web Motion Design Skill: Disney’s Principles for the Browser
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principlesAdd it as a plugin
In your Claude Code settings, add
animation-principles@github:dylantarre/animation-principlesto the plugins list. The README shows this as the plugin route.Or clone it by hand
Run
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principles, as the README describes for manual installation.Find the skill folder
The skill sits at skills/01-by-domain/web-motion-design inside the clone. The same repository holds 144 skills across 12 categories.
Ask for browser animation
The description says to use it for CSS animations, JavaScript transitions, React or Vue motion and other browser animation work. The README also shows naming a skill directly in a prompt.
Check that it loaded
Ask the agent to animate a button and a dropdown. Check that it uses transform and opacity, avoids linear easing and picks durations from the timing bands.
Key features
- Twelve principles, mappedA quick reference table pairs each of Disney's 12 principles with a web implementation, from transform scale to motion paths.
- Timing bandsGives durations for micro-interactions, standard transitions, complex sequences and page transitions, each with its own range.
- Named easing curvesSupplies standard, enter and exit cubic-bezier values and tells the agent never to use linear easing for UI motion.
- Squash and stretch recipeIncludes a CSS pattern that applies
scale(0.95, 1.05)on:activewith a 100ms transition. - Anticipation and exaggeration numbersStates percentages and pixel distances, such as a 2 to 3% dropdown shrink and 10 to 20px error shakes.
- CSS or JavaScript guidanceRecommends CSS keyframes for predictable pose to pose animation and JavaScript or GSAP for dynamic, physics based motion.
- Stagger and overlapTells the agent that child elements should finish after the parent stops, and to stagger with
animation-delay. - Four performance rulesCovers transform and opacity only, sparing will-change, CSS first, and testing on low-powered devices.
- Smooth 60fps targetFrames appeal as smooth 60fps motion with subtle personality from custom easing curves.
Frequently asked questions
What does the web-motion-design skill do?
It teaches an AI coding agent to apply Disney's 12 animation principles to CSS, JavaScript and frontend frameworks. The SKILL.md maps each principle to a web technique, sets timing bands and easing curves, includes two CSS patterns and ends with four performance rules.
How do I install the web-motion-design skill?
The README shows two routes. Add animation-principles@github:dylantarre/animation-principles to the plugins list in Claude Code settings, or clone the repository into the plugins directory by hand. The skill is in skills/01-by-domain/web-motion-design inside the clone.
What timing does the skill recommend?
Micro-interactions run 100 to 200ms and standard transitions 200 to 400ms. Complex sequences take 400 to 700ms and page transitions 300 to 500ms. The skill also says to avoid linear easing for UI motion and gives specific cubic-bezier curves for standard, enter and exit.
Which properties does it tell the agent to animate?
Its performance rules say to animate only transform and opacity for GPU acceleration, to use will-change sparingly and remove it afterward, to prefer CSS over JavaScript when the animation is predictable, and to test on low-powered devices.
Is web-motion-design the same as the other skills in the repository?
No. The repository holds 144 skills in 12 categories. This one covers the web domain generally. Others cover specific tools such as framer-motion, gsap-greensock and react-spring, or other contexts like mobile touch, games and data visualization.
Does it work outside Claude Code?
The README describes the repository as a skill marketplace for Claude Code, and the topics include claude. It does not state support for other agents. The skill is a SKILL.md file, so other tools that read that format might load it, but that is untested here.
What license does the repository use?
GitHub lists dylantarre/animation-principles under the MIT license, and the README repeats it under its License heading. Check the license file in the repository again before you copy skill text into a product or redistribute it.