Micro-interactions
Live Activity
ProA live activity tracker in one black shape. A timer, a download, a delivery, a song and an AI agent take turns in it, and tapping it opens a full card. The text fades out before the shape moves and comes back after it stops, so it never stretches during the resize. The small pill and the big card share one clock and one state, so if you pause in the card, the pill is paused too. The agent is the main show. Three sparkles circle on a tilted orbit, the front one big and the back ones small, and they spin faster on every new step. The pill widens to show each new step's name, then shrinks back to the step count, and the card types out the command the agent is running.
Install
Props
What It Demonstrates
- Morph
- One shape smoothly turns into another shape, e.g. Dynamic Island.
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.
- Spring
- Motion driven by physics (tension, mass, damping) rather than a set duration.
- Bounce
- A spring that overshoots and settles, adding playfulness.
- Crossfade
- One element fades out as another fades in, in the same spot.
- Blur
- A blur filter used to soften an element or mask tiny imperfections.
- Interruptible animation
- An animation that can be smoothly redirected mid-flight instead of finishing first.
- Press / Tap feedback
- A subtle scale-down when an element is clicked, so it feels physical.
- Tabular numbers
- Fixed-width digits so numbers don't shift around as they change. Essential for tickers, timers, and counters.
- Number ticker
- Digits rolling or counting up to a value.
- Skeleton / Shimmer
- A placeholder with a moving sheen shown while content loads.
- Typewriter
- Text appearing one character at a time, as if being typed.
- Reduced motion
- Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
Related Components
Reorder
A sortable list that answers to a finger and to a keyboard equally. Grab a row, and the rest step aside to make the space.
Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
Stagger Menu
A menu overlay that blooms open as a clip-path circle spring while items stagger in with blur and rotation, then collapses back to its pill.
Magnetic Button
A button that leans into your cursor. Caught in a magnetic field it slides toward the pointer while an amethyst aura swells with proximity, then snaps home on a spring and answers every click with a dark ripple bursting outward from the point of contact.
Hold
A confirm that has to be earned. The ring fills while you hold, snaps shut when it commits, and empties on a different curve entirely if you let go early.