animation-vocabulary

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

Updated Sep 5, 2023
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill animation-vocabulary-eyenalxai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/animation-vocabulary
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill animation-vocabulary-eyenalxai

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 curated glossary of web animation vocabulary. ## Core Features & Use Cases - Reverse glossary lookup: Converts feel-based descriptions ("the bouncy thing when a popover opens") into exact terms ("Pop in") with verbatim authoritative definitions. - Disambiguation of close terms: Contrasts easily confused concepts like Morph vs Crossfade vs Shared element transition so users pick the right word. - Comprehensive coverage: Glossary spans entrances, sequencing, transforms, transitions, scroll effects, feedback, easing, springs, looping, polish, performance, and design principles. - Use Case: A product manager wants an iOS-style overscroll effect in their app. They describe "the scroll that resists and snaps back" and receive the term "Rubber-banding" to use in their design brief. ## Quick Start Describe a motion effect you have seen, such as asking what it is called when a thumbnail expands into a full card, and receive the exact animation term with its definition.

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 an element 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 overshoot and settling, the related spring term is Bounce.

How do I find the right name for a UI animation effect?

Describe what you see or feel, such as springy, slides off, or draws itself in, and the glossary maps that sensation to the exact term. Close matches are listed with one-line differences so you can pick the right word.

What is the difference between a morph and a crossfade?

A Morph is one shape smoothly turning into another shape, like Dynamic Island. A Crossfade is one element fading out as another fades in at the same spot, with no shape transformation involved.

What is the iOS scroll effect that snaps back called?

It is called Rubber-banding, the resistance and snap-back you feel when dragging past a scroll boundary. It is the signature iOS overscroll behavior.

Does this skill help design or build animations?

No, it only names effects. It is a reverse-lookup glossary for finding the correct term to use in prompts or briefs, not a tool for designing, coding, or implementing animations.

What happens when no glossary term matches my description?

The closest term is named and clearly flagged as an approximation, or the effect is described using existing glossary vocabulary such as a stagger of scale-in entrances. New terms are never invented.