animation-vocabulary

Maps vague descriptions of web motion effects to precise animation terminology.

Updated Aug 9, 2026
One-click install
npx skills add https://github.com/jwinar/carpet_gato --skill animation-vocabulary-jwinar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/jwinar/carpet_gato/tree/main/.claude/skills/emil-kowalski-design/animation-vocabulary
Command: npx skills add https://github.com/jwinar/carpet_gato --skill animation-vocabulary-jwinar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Users often know what a motion effect looks or feels like but not its name, making it hard to prompt an AI, brief a designer, or search for implementation guidance. This Skill acts as a reverse-lookup glossary that converts informal descriptions into exact animation terms. ## Core Features & Use Cases - Reverse Term Lookup: Matches feel-based descriptions like "the bouncy thing when a popover opens" to the correct term, such as Pop in or Bounce. - Disambiguation of Close Terms: Contrasts easily confused concepts like Clip-path vs Mask, or Shared element transition vs Layout animation, so users pick the right word. - Curated Glossary Coverage: Covers entrances, sequencing, transforms, transitions, scroll effects, feedback, easing, springs, looping, polish effects, performance, and motion principles. - Use Case: A user asks "what's it called when an iOS scroll resists and snaps back?" and receives the term Rubber-banding with its authoritative one-line definition. ## Quick Start Ask what the effect is called when a thumbnail smoothly expands into a full card when tapped.

Frequently Asked Questions about animation-vocabulary

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is it called when a popover grows out of the button that opened it?▼

That effect is called origin-aware animation, where an element animates out of its trigger instead of from its own center, which is the CSS default. It makes popovers and menus feel physically connected to their source.

How do I find the name of an animation effect I can only describe?▼

Describe what you see or feel, such as springy, slides off, or draws itself in, and the glossary maps that sensation to a term like spring, swipe to dismiss, or line drawing. Close matches are listed with one-line differences.

What is the difference between a morph and a shared element transition?▼

A morph is one shape smoothly turning into another shape, like Dynamic Island. A shared element transition is an element traveling and transforming from one position into another, like a thumbnail expanding into a card.

What is the iOS scroll effect that resists and snaps back called?▼

It is called rubber-banding: resistance and snap-back when you drag past a boundary, the signature iOS overscroll feel. It belongs to the feedback and interaction category of motion effects.

Does this glossary cover animation performance topics?▼

Yes, it includes performance terms such as frame rate, jank, dropped frames, compositing, will-change, and layout thrashing. These explain why motion stutters and how GPU-accelerated transform and opacity animations stay smooth.

When should I not use this animation naming glossary?▼

Do not use it to design or build animations, since it only names effects rather than implementing them. If a term genuinely is not in the glossary, it says so instead of inventing one.