animation-vocabulary

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

Updated Jul 30, 2026
One-click install
npx skills add https://github.com/mrestrepoj10/re-hear --skill animation-vocabulary-mrestrepoj10
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/mrestrepoj10/re-hear/tree/main/.agents/skills/animation-vocabulary
Command: npx skills add https://github.com/mrestrepoj10/re-hear --skill animation-vocabulary-mrestrepoj10

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Users 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 plain-language description. ## Core Features & Use Cases - Reverse glossary lookup: Converts descriptions like "the bouncy thing when a popover opens" into exact terms such as Pop in or Rubber-banding, quoted verbatim from a curated glossary. - Disambiguation of close terms: Contrasts easily confused concepts like Morph vs Crossfade vs Shared element transition so the user picks the right word. - Broad coverage: The glossary spans entrances, sequencing, transforms, scroll effects, springs, easing, looping, polish effects, performance, and motion principles. - Use Case: A developer wants the iOS overscroll effect in their app but doesn't know what to search for; the Skill identifies it as Rubber-banding so they can find the right CSS or library. ## Quick Start Ask what it's called when an element grows out of the button that triggered it instead of appearing from its 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 grows out of the button that opened it?

That effect is called origin-aware animation, where an element animates out of its trigger rather than from its own center, which is the CSS default. It is related to transform origin, the anchor point a scale or rotation grows from.

What is the iOS rubber-band scroll effect called?

The iOS overscroll effect is called rubber-banding: resistance and snap-back when you drag past a boundary. It is a common feedback pattern in scroll and drag interactions.

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 difference between a spring animation and easing?

A spring is motion driven by physics parameters like stiffness, damping, and mass rather than a fixed duration. Easing defines how speed changes over a set-duration animation, such as ease-out or cubic-bezier curves.

Can this Skill design or build an animation for me?

No. It only names effects by matching descriptions to its glossary; it does not design or implement animations. If a term is not in the glossary, it says so rather than inventing one.