Micro-interactions
Blueprint Card
A technical-drawing card — dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.
Install
bun add clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/blueprint-card/blueprint-card.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| accentColor | string (hex) | "#a855f7" | Accent color for the frame, nodes, and glow. |
| dashed | boolean | true | Dashed outer border; solid when off. |
| dotSize | number | 4 | Diameter of the corner nodes. |
| glowIntensity | number | 0.15 | Strength of the bottom gradient glow. |
| animated | boolean | true | Draw the frame in on mount. |
| duration | number | 0.6 | Draw-in animation duration. |
What It Demonstrates
- Line drawing
- An SVG path that draws itself in, like an invisible pen tracing it.
- 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.
Related Components
Sigil
An SVG crest that traces itself in when it scrolls into view, stroke by stroke.
Corner Letters
Four glyphs pinned to the container corners that blur-and-scale in on mount and dissolve out on exit.
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.
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.