Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
SkillScore80Maintained
Automatic
◆Frontend / UI pack
Last verified 8/10/2026
What it changes
Passed 20 of 25 test cases with the skill, and 18 of 25 without it.
Without skill72%
With skill80%
Checks it passed that the model alone missed
Recommends batching DOM layout reads and writes.
Recommends a duration range between 800ms and 1600ms for hero sequences.
Recommends a duration range between 400ms and 800ms for page section entrances.
3 fixed17 passed either way4 still failing1 broke
Pass-rate lift
+8 pp
Tokens
+51%
Agent turns
0%
Response time
-18%
Model gemini-3.6-flashMeasured 8/10/2026v120 of 25 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
Our marketing team wants a hero scene animation that lasts 5 seconds (5000ms) without internal beats, playing continuous looping motion. What duration range and structural requirement should be used for hero scene sequences?
What was checked, without and with the skill
Checked
Without skill
With skill
Recommends a duration range between 800ms and 1600ms for hero sequences.
Missed
Passed
Specifies organizing the hero sequence into internal beats.
Passed
Passed
case-15 · gemini-3.6-flash · 8/10/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md182 linessingle file
Animation Systems (Stripe × Linear × Apple × Vercel)
This skill helps you ship tasteful, product-grade motion.
Not “more animation.”
Better animation: clarity, hierarchy, feedback, and delight—without jank.
The goals (why motion exists)
Use animation to:
Explain hierarchy (what matters)
Confirm action (feedback)
Guide attention (where to look next)
Maintain continuity (spatial relationships)
Add polish (craft signals)
If an animation doesn’t serve one of these, delete it.
The Stripe/Linear/Apple/Vercel style (shared traits)
1) Restraint
Fewer animations, better chosen.
One strong hero moment; the rest is supporting motion.
2) Clear choreography
Primary element moves first.
Secondary elements follow with small stagger.
Motion establishes a “reading order.”
3) Physical but not cartoony
Use easing that feels human (soft acceleration + gentle settle).
Avoid bouncy defaults for serious product UI.
4) Texture + depth (subtle)
Small parallax, soft shadows, blur fades, light beams.
Advanced motion and animation design skill for AI agents. Covers scroll-storytelling, physics-grade interactions, Three.js/WebGL, GSAP choreography, and cinematic page transitions. Use alongside bexa when MOTION_DEPTH >= 8 is needed.