Name the motion. Drop it in. Get the same feel everywhere.
Each card is a distinct, named move — not another fade. Click a card to replay it, then Copy the snippet, or say the keyword while vibe coding (/ss-motion toggle-flip) and the same recipe lands in your code.
Which motion when
a starting point, not a mandateTwo rules override the table: pick one seed and keep it across the product, and never animate the payload— don’t bounce a balance, price, or search result into view.
| Use case | Reach for | Why |
|---|---|---|
| Primary button / CTA press | spring · press | Tactile, confident feedback — the press should feel like it 'gives'. |
| Modal / dialog / bottom sheet enter | silk · entrance | Smooth and composed; never bounce serious or destructive content in. |
| Dropdown / popover / menu | snap · entrance | Instant and precise — frequent UI shouldn't make you wait. |
| Toast / inline notification | spring · entrance | A small friendly arrival that catches the eye without blocking. |
| List / feed items appearing | stagger-cascade | Choreograph many items so the eye follows the order, gently. |
| Feature / marketing card hover | tilt-3d | Depth and flair are welcome on content-light marketing surfaces. |
| Dashboard / data card hover | snap · hover | A subtle lift only — restraint keeps a dense data UI calm. |
| Like / favorite / reaction | like-burst | A celebratory one-shot; reward the tap. |
| Live / online / recording dot | pulse-beat | A looping heartbeat signals 'alive' without stealing focus. |
| Loading / skeleton | shimmer | Calm, directional progress — communicates work without anxiety. |
| Success / confirmation | pop-in | A positive little arrival that says 'done'. |
| Toggle / tab / segment switch | toggle-flip | A distinctive, recognizable switch tied to one handle. |
| Page / route transition | silk · entrance | Smooth and minimal; get out of the way fast. |
| Number / balance / KPI / price reveal | none | Don't animate the payload — the user came to read it instantly. |
Flair
Showy, cursor-aware, scroll-stopping moves.tilt-3dCard tilts in 3D toward the cursor — depth on hover
magneticButton drifts toward the cursor, springs back on leave
glow-pulseBreathing neon glow — draws the eye to a hot CTA
gradient-sweepAnimated gradient flows through text or a surface
blob-morphOrganic shape endlessly morphs — living background blob
spotlightRadial light follows the cursor across a card
text-scrambleLetters decode into place — hacker/terminal reveal
confetti-popParticle burst on success — celebrate the click
Toggle
One control, many ways to switch state.toggle-flip3D Y-axis card flip between two faces
toggle-slideOld value slides out, new slides in from the side
toggle-morphShape morphs — pill ⇄ circle, width + radius
toggle-curtainTop→bottom clip-path wipe reveals the panel
Reveal
How an element arrives on screen.reveal-blurFocus-pulls into place from a soft blur
reveal-riseMasked clip-path rise — text climbs into view
reveal-unfoldscaleY from the top edge, like an accordion
pop-inSpring overshoot from zero — bouncy arrival
Press
Tactile feedback on tap/click.press-squishScale-down + tiny skew — jelly press
tap-rippleMaterial-style radial ripple from the tap point
Attention
Looping or one-shot focus pulls.pulse-beatLooping scale pulse — alive, rhythmic
wiggleQuick horizontal shake — error / wrong input
shimmerSkeleton loading sweep across a surface
List
Choreography across many items.stagger-cascadeChildren fade-up one after another