skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

animation-vocabulary

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

3|Updated Apr 20, 2026
Search Tags:#css#glossary#animation#transitions#motion design#terminology#ui animation
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill animation-vocabulary-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-vocabulary
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/animation-vocabulary
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill animation-vocabulary-langgenius

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 sensory descriptions ("the bouncy thing when a popover opens") into exact terms ("Pop in") drawn from a curated glossary covering entrances, springs, easing, scroll effects, and more. - Disambiguation of close terms: Contrasts easily confused concepts like Clip-path vs Mask, or Morph vs Shared element transition, so the user picks the right word. - Use Case: A developer wants to recreate the iOS overscroll effect but doesn't know what to search for. They describe it, and the Skill returns "Rubber-banding" with its authoritative definition. ## Quick Start Ask the assistant what it's called when an element grows out of the button that triggered it, 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 a popover grows out of the button that opened it?▼

That effect is called origin-aware animation. The element animates out of its trigger rather than from its own center, which is the default behavior in CSS.

What is the iOS rubber-band scroll effect called?▼

The iOS overscroll effect is called rubber-banding. It describes the resistance and snap-back felt when dragging past a scroll boundary.

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 ease-out and a spring animation?▼

Ease-out is a fixed-duration curve that starts fast and ends slow, the default for most UI. A spring is physics-based motion driven by stiffness, damping, and mass rather than a set duration, producing more natural movement.

When should I not use this animation naming glossary?▼

Do not use it to design or build animations; it only names effects. If a term genuinely is not in the glossary, the Skill says so rather than inventing one, so highly niche or proprietary effects may fall outside its scope.

Related Skills

Explore More Design & Creative Skills→
HorusGoulHorusGoul
8

animation-vocabulary

Identify precise web animation and motion effect terms from vague descriptions.

Community
Basic
elophantoelophanto
116

12-principles-of-animation

Audit web animation code against Disney's 12 principles for quality gaps.

Community
Intermediate
wpsadiwpsadi

fixing-motion-performance

Audit and fix animation performance issues in web UIs.

Community
Advanced
AO-HySAO-HyS

animation-vocabulary

Identifies the precise animation term matching a described visual motion effect.

Official
Basic