Animation Vocabulary (Animations.dev)

Emil Kowalski's named glossary of motion patterns — the prompt vocabulary layer for telling AI (and humans) exactly which animation to build.

@emilkowalski: "To get good animations from an AI you need to get good at telling it what you want" — stagger, direction-aware transitions, spatial consistency, crossfade, layout animation. Published at animations.dev/vocabulary (5,300 likes, 7,726 bookmarks). The broader course/source page is Animations.dev. Source: X/@emilkowalski, 2026-06-01; Source: animations.dev/vocabulary, 2026-06-13

The 2026-06-29 /animation-vocabulary skill adds an executable reverse-lookup layer: when a user can describe the sensation but not the term, the agent should answer with the exact glossary phrase first, then disambiguate nearby terms such as Morph vs Crossfade vs Shared element transition. This reinforces the existing local decision: Kevin's active executable owner stays design-engineering-polish; this page is the glossary/source authority. Source: X/@emilkowalski, 2026-06-29; Source: GitHub emilkowalski/skills, 2026-06-30

Local artifact review confirmed the visual taxonomy, not just the text link: the video/screenshot shows the glossary moving through state transitions such as Crossfade, Morph, Shared element transition, Layout animation, and Direction-aware transition, plus Sequencing & Timing and Feedback & Interaction sections. Save this as vocabulary Kevin's agents should use before asking for "smooth animation." Source: X/@emilkowalski visual artifact, 2026-06-01

Source Snapshot

As of 2026-06-30, emilkowalski/skills is MIT licensed, defaults to main at a47903a06a05d2e24c483bd8961c85969a51a494, has 3,858 stars and 292 forks, and has no public releases or tags. Brin returned caution for both repo and skill scans (repo score 65, skill score 58), so the repo remains a curated source/candidate rather than a blind bundle install. Source: GitHub API; git ls-remote; Brin API, 2026-06-30

Glossary sections

Section Example terms
Entrances & exits Fade in, slide in, scale in, pop in, reveal
Sequencing Stagger, orchestration, keyframes, fill mode
Movement Translate, origin-aware animation, 3D tilt
State transitions Crossfade, shared element, layout animation, direction-aware
Scroll Scroll reveal, parallax, view transition
Interaction Press feedback, drag to reorder, rubber-banding
Easing & springs Ease-out default, asymmetric easing, interruptible animation

Source: animations.dev/vocabulary, 2026-06-13

Prompt examples (how to use with agents)

Parallel to UI Component Vocabularyname the pattern, get the output:

Vague prompt Vocabulary-sharp prompt
"animate the list" "staggered fade-in, 40ms delay, ease-out, origin-aware slide from bottom"
"smooth page change" "direction-aware transition: forward slides left, back slides right; crossfade titles"
"button feels good" "press feedback: scale 0.97 on active, 150ms ease-out, interruptible"
"scroll section" "scroll reveal with parallax on background, 20% scrub"

Source: compiled from animations.dev glossary + design-engineering-polish principles, 2026-06-13

Stack fit (Kevin)

  • Load through skills/engineering/design-engineering-polish/SKILL.md before Frontend and Design Skills or Frontend and Design Skills agent tasks — paste relevant glossary terms into prompts.
  • Use the upstream reverse-lookup skill shape when Kevin asks "what is this animation called?" Answer with the term first, then one or two close alternates.
  • Enforce in Interface Micro-Polish reviews: reject "add animation" tickets without named patterns.
  • Pairs with Frontend and Design Skills for scroll section vocabulary (pin, scrub) vs Framer for component motion.

Timeline