Micro-interactions
Intro Animation
ProA wind front sweeps the wordmark right to left. The instant it reaches a glyph the text hands off to a baseline-aligned field of GPU grain — same pixels, same colour, no seam — which peels crown-first and drifts away as smoke through a curl field. The backdrop opens behind it to reveal the page. Mount it over your app and unmount on onDone.
Install
Props
What It Demonstrates
- Reveal
- Content is uncovered gradually, often by animating a clip-path or mask.
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
- Page transition
- An animation that plays when navigating from one page or route to another.
- Perceived performance
- The right animation makes an interface feel faster, even when it isn't.
- Hardware acceleration
- Animating transform and opacity lets the GPU keep motion smooth.
- Linear
- Constant speed. Avoid for UI; reserve for spinners or marquees.
- Reduced motion
- Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
Related Components
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.
Dissolve
An element disintegrates into drifting shadow-motes on dismiss, and reforms on command.
Sigil
An SVG crest that traces itself in when it scrolls into view, stroke by stroke.
Blueprint Card
A technical-drawing card. Dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.
Corner Letters
Four glyphs pinned to the container corners that blur-and-scale in on mount and dissolve out on exit.
Radial MenuPro
Press and hold anywhere and the options fan out from the point you pressed. Selection is resolved from the pointer's angle rather than by hit-testing the options, so every target is an infinite wedge — commit to a direction and you can throw the pointer as hard as you like and still land it.