skills.rest
quanthubbr
quanthubbrOFFICIAL
Explore all skills by this author →
GitHub

animation-vocabulary

Maps vague descriptions of web motion effects to their exact animation terminology.

Updated Jul 14, 2026
Search Tags:#glossary#animation#transitions#motion design#easing#UI terminology#web animation
One-click install
npx skills add https://github.com/quanthubbr/tron-claude-config --skill animation-vocabulary-quanthubbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/quanthubbr/tron-claude-config/tree/main/managed/skills/emilkowalski/animation-vocabulary
Command: npx skills add https://github.com/quanthubbr/tron-claude-config --skill animation-vocabulary-quanthubbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designers and developers often know what a motion effect looks or feels like but not its proper name, making it hard to prompt an AI, brief a designer, or search for implementation guidance. This Skill reverse-looks-up the precise term from a curated glossary of web animation vocabulary. ## Core Features & Use Cases - Reverse Glossary Lookup: Describe an effect loosely ("the bouncy thing when a popover opens") and get the exact term ("Pop in") with its authoritative definition. - Disambiguation of Close Terms: When multiple terms could fit, it contrasts them (e.g., Morph vs Crossfade vs Shared element transition) so you can pick the right one. - Use Case: You want to recreate the iOS overscroll feel in your app but don't know what to search for. Describe it, and the Skill returns "Rubber-banding" with a precise definition you can use in a prompt or design brief. ## Quick Start Ask the skill what it is called when an element grows out of the button that triggered it instead of from its own center.

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 bounces into place?▼

That effect is called Pop in, where an element appears with a slight overshoot like it bounces into place. If the motion is physics-driven with oscillation, the related spring concept is called Bounce.

How do I find the name of a UI animation effect?▼

Describe what you see or feel in plain language, such as springy, slides off, or draws itself in. The skill maps that sensation to the exact glossary term and quotes its authoritative definition verbatim.

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, which is the resistance and snap-back you feel when dragging past a boundary, the signature iOS overscroll behavior.

Does this skill help design or build animations?▼

No, it only names effects. It returns the correct term and definition so you know what to ask for, but it does not provide implementation code, design guidance, or animation construction steps.

What happens if my described effect is not in the glossary?▼

The skill names the closest matching term and states plainly that it is an approximation, or describes the effect using existing glossary vocabulary. It will not invent new terms that are not in the glossary.

Related Skills

Explore More Design & Creative Skills→
AO-HySAO-HyS

animate

Adds purposeful animations, micro-interactions, and motion effects to existing UI features.

Official
Basic
langgeniuslanggenius

apple-design

Implements Apple-style fluid interfaces with spring animations, gesture tracking, and translucent materials for the web.

Official
Intermediate
Joao-Camilo-MallmannJoao-Camilo-Mallmann

motion-design

Applies motion design principles to create UI animations, transitions, and micro-interactions.

Community
Intermediate
pproencapproenca
193

emilkowal-animations

Guide web animation best practices for easing, timing, and transform optimization.

Community
Intermediate