Micro-interactions
Sigil
An SVG crest that traces itself in when it scrolls into view, stroke by stroke.
Install
Props
What It Demonstrates
- Line drawing
- An SVG path that draws itself in, like an invisible pen tracing it.
- Reveal
- Content is uncovered gradually, often by animating a clip-path or mask.
- Scroll reveal
- Elements fade or slide into place as they enter the viewport.
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
- Delay
- Time before an animation starts.
- Duration
- How long an animation takes.
- Fill mode
- Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards).
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
Related Components
Blueprint Card
A technical-drawing card. Dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.
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.
Intro AnimationPro
A 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.
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.