animation-vocabulary

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

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/beelabstudio/ai --skill animation-vocabulary-beelabstudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/animation-vocabulary
Command: npx skills add https://github.com/beelabstudio/ai --skill animation-vocabulary-beelabstudio

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 acts as a reverse-lookup glossary that converts informal descriptions into exact animation terms. ## Core Features & Use Cases - Reverse term 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 several terms could fit, it lists the best match first plus alternates with one-line contrasts (e.g. Morph vs Crossfade vs Shared element transition). - Curated glossary coverage: Terms span entrances/exits, sequencing, transforms, transitions, scroll, feedback, easing, springs, looping, polish effects, performance, and motion principles. - Use Case: A product manager writing a spec says "the iOS scroll that resists and snaps back" and receives the term "Rubber-banding" to use in the ticket. ## Quick Start Ask the assistant to name the motion effect you are describing, for example: what's it called when a list of items appears one after another with a small delay?

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 effect I can only describe?▼

Describe what the effect looks or feels like in plain words, such as "springy" or "slides off". The skill maps that sensation to the exact glossary term, like Spring, Pop in, or Swipe to dismiss, with its 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 scroll effect that snaps back called?▼

That effect 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 category of motion effects.

Can this skill design or build the animation for me?▼

No, it only names effects. Its scope is reverse-lookup terminology: turning a vague description into the correct term so you can prompt an AI or brief a designer, not designing or implementing the animation.

What happens if the effect I describe 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 does not invent new terms outside the glossary.