animation-vocabulary

Maps vague descriptions of web animations to their exact motion design terms.

1|Updated Jul 13, 2026
One-click install
npx skills add https://github.com/dineshrevunuru/SuperSkills --skill animation-vocabulary-dineshrevunuru
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/dineshrevunuru/SuperSkills/tree/main/animation-vocabulary
Command: npx skills add https://github.com/dineshrevunuru/SuperSkills --skill animation-vocabulary-dineshrevunuru

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers, developers, and AI users often know what an animation looks or feels like but not what it is called, making it impossible to search for, specify, or prompt for the effect accurately. This Skill reverse-looks-up a loose description ('the bouncy thing when a popover opens') and returns the precise industry term ('Pop in'). ## Core Features & Use Cases - Reverse-lookup glossary: Covers entrances/exits, sequencing, transforms, transitions, scroll effects, feedback, easing, springs, looping, polish effects, performance, and motion principles, with verbatim authoritative one-line definitions. - Disambiguation of close terms: Contrasts confusable pairs like Morph vs Crossfade vs Shared element transition so the user picks the right word. - Register-neutral naming: Names effects without judging whether they fit a design system, deferring fit decisions to taste rules and build work to motion-craft skills. - Use Case: A user asks 'what's the iOS scroll that resists and snaps back called?' and receives 'Rubber-banding — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).' ## Quick Start Ask the assistant to name the animation effect you are describing, for example: 'What's it called when a thumbnail 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
How do I find the name of a UI animation I can only describe?

Describe what the animation looks or feels like, such as 'slides in from the side' or 'bounces into place', and the glossary maps that sensation to the exact term like Slide in or Pop in. The answer leads with the bolded term and its one-line definition.

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 rubber-band scroll effect called?

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

Does this skill generate CSS or animation code for the named effect?

No. It only names the effect and provides its definition. Designing and building the animation, including choreography, stagger math, and CSS, GSAP, or Framer Motion code, is handled by a separate motion-craft skill.

When should I use ease-out versus ease-in for UI animation?

Ease-out starts fast and ends slow and is the default for most UI and anything responding to the user. Ease-in starts slow and ends fast, is usually avoided because it can feel sluggish, and linear easing is reserved for spinners or marquees.