Micro-interactions
Corner Letters
Four glyphs pinned to the container corners that blur-and-scale in on mount and dissolve out on exit.
Install
bun add motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| visible | boolean | true | Mounts and unmounts the glyphs — toggle to replay. |
| stiffness | number | 120 | Spring stiffness of the entrance. |
| blur | number | 8 | Blur the glyphs travel from and to. |
| scaleFrom | number | 1.5 | Starting scale of each glyph. |
| offset | number | 4 | Inset from the corners. |
| size | number | 32 | Glyph font size. |
| color | string (hex) | "#a855f7" | Glyph color. |
What It Demonstrates
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
- Blur
- A blur filter used to soften an element or mask tiny imperfections.
- Scale in
- Element grows from smaller to full size as it appears, often paired with a fade.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
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.
Blueprint Card
A technical-drawing card — dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.
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.
Approach
A tile whose overlay enters from the exact edge your cursor crossed, and leaves the way you go.
Tether
A popover that grows out of the corner nearest its trigger, and moves that origin when it flips.