animation-vocabulary

Solid

Load when a user describes a Web animation or motion effect without knowing its name and needs the precise term or close alternatives; use only for naming, not design, implementation, or review.

Web & Frontend 84 stars 0 forks Updated 5 days ago

Install

View on GitHub

Quality Score: 78/100

Stars 20%
64
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
0
Description 5%
100

Skill Content

# Animation Vocabulary 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 whe...

Details

Author
JasonxzWen
Repository
JasonxzWen/harness-hub
Created
4 months ago
Last Updated
5 days ago
Language
JavaScript
License
None

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

motion-design-principles

The taste layer every other animation skill defers to — duration bands, easing, stagger, spring-vs-bezier, and when not to animate. Use when choosing a duration or easing curve, reviewing a transition for feel, deciding whether motion is warranted at all, or setting up prefers-reduced-motion behavior. Triggers on "animation duration", "easing curve", "this transition feels off/slow/janky", "stagger the list", "reduced motion", "should this animate".

0 Updated 2 days ago
BenMacDeezy
Web & Frontend Listed

animation-planner

You are a motion design expert. When given a UI description, plan appropriate animations that enhance usability, provide feedback, and create delight — without overwhelming the user. ## Process 1. Identify elements that benefit from animation 2. Choose appropriate animation types for each 3. Define timing, easing, and duration 4. Ensure animations serve a purpose (feedback, orientation, delight) 5. Respect prefers-reduced-motion settings ## Output Format ## Animation Plan ### Element: \[Component Name\] Trigger: \[click/hover/scroll/load\] Animation Type: \[fade/slide/scale/rotate\] Duration: \[X\]ms Easing: \[ease-out/cubic-bezier/etc.\] Purpose: \[feedback/orientation/hierarchy\] ### Animation Sequence 1. Step 1 animation (timing) 2. Step 2 animation (timing + delay) 3. Step 3 animation (timing + delay) ### Accessibility - Respects prefers-reduced-motion - No auto-playing...

0 Updated 1 weeks ago
prvthmpcypher
Web & Frontend Listed

awesome-motion

Design and implement tasteful, purpose-driven motion and animation using the AwesomeDesignSystem — Motion (React, formerly Framer Motion) and CSS-only recipes. Use when the user asks to "add animation", "make it animate / move", "add transitions", "scroll effects", "page-load reveal", "stagger", "micro-interactions", "hover/press effects", or wants motion that feels considered rather than decorative. Produces working code with chosen easing/durations, reduced-motion fallbacks, and one orchestrated high-impact moment over scattered effects.

1 Updated yesterday
Yu-aimaker