ui-motion
Adds animations and movements to interface elements. Makes the experience more dynamic and pleasant.
What it does
This tool adds animations to visual elements on a website or app. You can choose from preset styles like 'spring' or 'silk', or use specific movements like 'flip' or 'blur'.
When to use it
- ✓When you want a button to feel more 'bouncy' when clicked.
- ✓To make a menu appear smoothly and elegantly.
- ✓When displaying a notification that should quickly 'pop' in.
Example of what to ask your AI
“Make a 'Buy' button look like it jumps when clicked.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool selects an animation style (like 'spring' for bouncy or 'silk' for smooth) or a specific movement (like 'flip' for a toggle). It then applies this animation to the element you specified.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill ui-motionOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/ui-motion/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Motion Seed Applier
When to Use
Use this skill when you need apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe...
When NOT to use
- For general framer-motion docs or learning → use the framer-motion site
- For non-React motion (CSS-only transitions, GSAP) — this skill targets
motion.XJSX only - For full scroll-linked timelines or parallax — out of scope per DESIGN-LANGUAGE.md Rule 59
- For tweaking the existing FadeIn/FadeUp/Stagger wrappers — edit
engine/components/ui/motion.tsxdirectly
Vibe → Seed mapping
Translate the user's prompt to one of the five seeds before applying. Use this lookup table from engine/motion/index.ts:
| Words the user might say | Seed |
|---|---|
| bouncy, springy, playful, energetic, alive | Spring |
| smooth, silky, fluid, elegant, composed, continuous | Silk |
| snappy, quick, instant, decisive, sharp, precise | Snap |
| floaty, gentle, weightless, dreamy, ambient, drifting | Float |
| rhythmic, punchy, pulsing, heartbeat, beat | Pulse |
| "Toss style", "Arc style" | Spring (per brand default) |
| "Stripe style", "Notion style" | Silk |
| "Linear style", "Raycast style", "Vercel style" | Snap |
If the user says only a brand name, use that brand's default seed from BRAND_DEFAULT_SEED. If the user is explicit about a seed name (spring, silk, etc.), respect it verbatim.
Recommend mode — use-case → motion (when the user describes the moment, not the vibe)
If the user describes what the thing is ("a like button", "a modal", "the loading
state", "items in a feed") rather than a feeling, recommend from the use-case map
(MOTION_BY_USECASE in engine/motion/library.ts, exported from @engine/motion):
| Use case | Reach for | Why |
|---|---|---|
| Primary button / CTA press | spring · press |
tactile, confident — the press should "give" |
| Modal / dialog / sheet enter | silk · entrance |
smooth; never bounce serious/destructive content |
| Dropdown / popover / menu | snap · entrance |
instant, precise — frequent UI shouldn't wait |
| Toast / inline notification | spring · entrance |
small friendly arrival, non-blocking |
| List / feed items appearing | stagger-cascade |
choreograph order, gently |
| Feature / marketing card hover | tilt-3d |
depth/flair OK on content-light marketing |
| Dashboard / data card hover | snap · hover |
a subtle lift only — keep dense UI calm |
| Like / favorite / reaction | like-burst |
a celebratory one-shot; reward the tap |
| Live / online / recording dot | pulse-beat |
looping heartbeat = "alive" |
| Loading / skeleton | shimmer |
calm directional progress |
| Success / confirmation | pop-in |
positive little "done" |
| Toggle / tab / segment switch | toggle-flip |
distinctive, recognizable switch |
| Page / route transition | silk · entrance |
smooth, minimal, get out of the way |
| Number / balance / KPI / price reveal | none | don't animate the payload — it must read instantly |
Two anti-rules override the table (state them if you deviate):
- One seed per product. If the project already uses a seed, match it — don't introduce a second personality.
- Never delay the payload. Don't animate a balance, price, or search result into view; motion is for affordance, not content.
Named motion keywords (distinctive moves)
Seeds set a personality (how a fade/scale feels). The motion library in
engine/motion/library.ts adds distinctive moves — a flip, a curtain wipe, a
morph — each behind a unique keyword. Prefer a keyword when the user wants a
specific, recognizable motion rather than a generic feel.
engine/motion/library.ts (exported as MOTION_LIBRARY / MOTION_BY_KEY from
@engine/motion) is the single source of truth — every keyword carries its
own runnable snippet. Pull the snippet from there; never hand-write the params.
| Keyword | Move | Say it when the user wants… |
|---|---|---|
toggle-flip |
3D Y-axis card flip | a switch/toggle to flip between two faces |
toggle-slide |
slide-stack swap | a value to slide out and the next to slide in |
toggle-morph |
pill ⇄ circle morph | a control to change shape on toggle |
…
FAQ
What are 'StyleSeeds'?
These are animation styles with personalities, like 'Spring' for energetic or 'Silk' for smooth.
Can I use this for any animation?
No, this tool is specifically for animations in React code and won't work for CSS-only animations or other languages.
What if I ask for an animation that doesn't exist?
The tool will try to find the closest matching animation or suggest an alternative.
Details
Original description by the author
Apply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …).
Popularity
- GitHub stars
- 48k
- Ranking position
- #4425
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC