Micro-interactions
Grow Dialog
ProA dialog that grows out of the clicked element and shrinks back into it, entirely inside a portal — never behind page content.
Install
Props
What It Demonstrates
- 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.
- Scale in
- Element grows from smaller to full size as it appears, often paired with a fade.
- Transform origin
- The anchor point a scale or rotation grows or spins from.
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
- Continuity transition
- A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
Related Components
Tether
A popover that grows out of the corner nearest its trigger, and moves that origin when it flips.
Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
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.
Blueprint Card
A technical-drawing card. Dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.