/animation-vocabulary

name: animation-vocabulary
description: Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.

Animation Vocabulary

Initial Response

When this skill is first invoked without a specific question, respond only with:

> I'm ready to put a name to any motion effect you describe, my knowledge comes from Emil Kowalski's animation philosophy.

Do not provide any other information until the user asks a question.

Turn a vague description of a motion or effect into the precise term, so the user knows what to ask for.

Quick Start

The user describes an effect loosely. You return the matching term(s) in this format:

**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.

If several terms could fit, list the best match first, then 1–2 alternates with a one-line note on how they differ.

Instructions

1. **Read for intent, not keywords.** Users describe what they *see* or *feel* ("springy", "slides off", "draws itself in"), not the technical name. Map the sensation to the glossary below. 2. **Quote the glossary verbatim.** Its descriptions are authoritative — use them as-is, don't paraphrase. 3. **Disambiguate close terms.** When two compete (*Clip-path* vs *Mask*, *Pop in* vs *Bounce*, *Shared element transition* vs *Layout animation*), contrast them so the user can pick. 4. **When nothing matches exactly,** name the closest term and say plainly it's an approximation, or describe the effect in the glossary's vocabulary (e.g. "that's a *stagger* of *scale-in* entrances"). 5. **Stay within this glossary.** If a term genuinely isn't here, say so rather than inventing one — though you may explain the concept using these words. 6. **Keep it tight.** A naming question wants a name, not an essay. Lead with the term; expand only if asked.

Examples

**Example 1 — feel-based** User: "What's it called when a popover seems to grow out of the button you clicked instead of from its middle?" Output:

**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

**Example 2 — disambiguation** User: "The thing where one image turns into another image." Output:

**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.

Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.

**Example 3 — physics feel** User: "That iOS scroll where it resists and snaps back when you pull too far." Output:

**Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).

Glossary

_A curated snapshot mirroring the project's `/vocabulary` page; keep the two in sync when either changes._

Entrances & Exits — how elements appear and disappear

• **Fade in / Fade out** — Element appears or disappears by changing opacity.
• **Slide in** — Element enters by sliding in from off-screen (left, right, top, or bottom).
• **Scale in** — Element grows from smaller to full size as it appears, often paired with a fade.
• **Pop in** — Element appears with a slight overshoot, like it bounces into place.
• **Reveal** — Content is uncovered gradually, often by animating a clip-path or mask.
• **Enter / Exit** — The animation an element plays when it's added to or removed from the screen.

Sequencing & Timing — coordinating multiple elements or moments

• **Keyframes** — Defined points in an animation (0%, 50%, 100%) that the browser fills the gaps between.
• **Interpolation / Tween** — Generating all the in-between frames between a start and end value, so motion is continuous.
• **Stagger** — Animate several items one after another with a small delay between each, creating a cascade.
• **Orchestration** — Deliberately timing multiple animations so they feel like one coordinated motion.
• **Delay** — Time before an animation starts.
• **Duration** — How long an animation takes.
• **Fill mode** — Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards).
• **Stepped animation** — An animation that is divided into discrete steps, like a countdown timer.

Movement & Transforms — changing an element's position, size, or angle

• **Translate** — Move an element along the X or Y axis.
• **Scale** — Make an element bigger or smaller.
• **Rotate** — Spin an element around a point.
• **Skew** — Slant an element along the X or Y axis, shearing it out of its rectangular shape.
• **3D tilt / Flip** — Rotate in 3D space (rotateX / rotateY) to add depth.
• **Perspective** — How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.
• **Transform origin** — The anchor point a scale or rotation grows or spins from.
• **Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.

Transitions Between States — connecting one state, view, or element to another

• **Crossfade** — One element fades out as another fades in, in the same spot.
• **Continuity transition** — A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
• **Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.
• **Shared element transition** — An element travels and transforms from one positio