LoopyLuci Animation Vocabulary
Turn a vague description of a motion or effect into the precise term.
How to Use
- Read for intent, not keywords — Users describe what they see or feel, not the technical name
- Quote the glossary verbatim — Descriptions are authoritative
- Disambiguate close terms — Contrast similar terms so the user can pick
- When nothing matches — Name the closest term and say it's an approximation
Example Output Format
**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.
Disambiguation Example
**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.
Close alternates:
- **Crossfade** — if they simply fade over each other
- **Shared element transition** — if an element travels and transforms
Glossary
Entrances & Exits
- Fade in/out — Element appears/disappears by changing opacity
- Slide in — Element enters by sliding from off-screen
- Scale in — Element grows from smaller to full size
- Pop in — Element appears with slight overshoot, like it bounces
- Reveal — Content uncovered gradually by animating clip-path or mask
Sequencing & Timing
- Stagger — Animate items one after another with small delays
- Orchestration — Deliberately timing multiple animations
- Keyframes — Defined animation points (0%, 50%, 100%)
Movement & Transforms
- Translate — Move element along X or Y axis
- Scale — Make element bigger or smaller
- Rotate — Spin element around a point
- Origin-aware animation — Element animates from its trigger
Transitions Between States
- Crossfade — One fades out as another fades in
- Morph — One shape turns into another
- Shared element transition — Element travels and transforms
- Layout animation — Element animates to new position/size
Scroll
- Scroll reveal — Elements animate as they enter viewport
- Parallax — Background/foreground move at different speeds
Feedback & Interaction
- Hover effect — Visual change on cursor hover
- Press feedback — Subtle scale-down on click
- Rubber-banding — Resistance at scroll boundaries
- Ripple — Circle expanding from tap point
Easing
- Ease-out — Starts fast, ends slow (default for UI)
- Ease-in — Starts slow, ends fast (avoid for UI)
- Spring — Physics-based motion (tension, mass, damping)
Common Pitfalls
- ❌ Paraphrasing glossary terms — Use verbatim descriptions
- ❌ Giving an essay instead of a name — Lead with the term
- ❌ Inventing terms — If it's not in glossary, say so
- ❌ Matching keywords instead of intent — Read for the sensation
Verification Checklist
- User's description mapped to correct term
- Glossary quoted verbatim (not paraphrased)
- Disambiguation provided when multiple terms fit
- Output leads with the matching term, not an explanation
- If no match, closest term named with honest caveat