Micro-interactions
Preloader
A percentage-counting load overlay. A spinning ring, an eased counter, and a fade-out that reveals the page beneath.
Install
Props
What It Demonstrates
- Loop
- An animation that repeats, a set number of times or infinitely.
- Number ticker
- Digits rolling or counting up to a value.
- Fade in / Fade out
- Element appears or disappears by changing opacity.
- Easing
- The rate at which an animation speeds up or slows down.
- Perceived performance
- The right animation makes an interface feel faster, even when it isn't.
Related Components
Refract
A frosted-glass slab you drag across a live scene, refracting it through a real shader optic. A rounded-rect height field bends three separately-sampled color channels along its gradient, with a Fresnel-bright rim, a travelling specular streak, and a frost that is a genuine multi-tap blur of what sits beneath the pane. Where Lens bends its DOM children through an SVG displacement map and magnifies, Refract is a flat pane over a scene texture with true angle-of-incidence refraction, dispersion and glare, and the scene it bends is drawn in the same shader, because no browser lets WebGL read the rendered page. Throw it and it glides on momentum, rubber-banding off the container walls.
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.
Pixel Transition
Reveal a second layer through a random pixelated dissolve on hover.
Border Glow
A cursor-proximity gradient border with an outer glow.
Spotlight Shell
A card shell with 3D magnetic tilt, radial glow, and a shimmer sweep.
Animated Hamburger
A three-bar hamburger that morphs to an X, driven by a toggle prop.