Micro-interactions
Radial Menu
ProPress 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.
Install
Props
What It Demonstrates
- Hold to confirm
- A progress effect that fills up while the user holds a button.
- Press / Tap feedback
- A subtle scale-down when an element is clicked, so it feels physical.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
- Origin-aware animation
- An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
- Spring
- Motion driven by physics (tension, mass, damping) rather than a set duration.
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
- Direction-aware transition
- Content slides one way going forward and the opposite way going back, so navigation has a sense of direction.
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.
Tether
A popover that grows out of the corner nearest its trigger, and moves that origin when it flips.
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.
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.
Dissolve
An element disintegrates into drifting shadow-motes on dismiss, and reforms on command.