UI Components that reacts before you click.
28 interactive React components — optics, raster, type, mechanics and motion. Each is driven by a model, not a keyframe, and installs as source.
Explore the components · Installation
Components
Text Animations
- Elastic Headline
- A headline strung on an elastic. Letters are nodes on a mass-spring chain pinned at both ends and coupled by the discrete Laplacian, so a pull travels outward and reflects off the ends — grab one and the whole line deforms, then rings out.
- Pressure Text
- Type that reacts to the cursor. Letters thicken and widen under the pointer while their neighbours give up the space, so the word keeps its overall width. Both axes are synthesised from a single cut, so it morphs rather than cross-dissolving between weights.
- Thread Pull
- A thread strung under a line of text that hangs in a real catenary when you pull it. Length is conserved, so dragging to one side starves that segment and floods the other; the parameter is solved by Newton each frame.
- Wet Ink
- A word written in ink that bleeds along the paper's fibres by anisotropic diffusion and dries darker at its rim, stepped under the explicit stability limit. Canvas 2D.
- Bitmap Text
- Type rasterised and dithered into particles. A grain control decides whether the letterforms read as solid or as a cloud that still resolves as words. Canvas 2D, no WebGL.
Backgrounds
- Magnetic Field
- Iron filings aligning to a dipole under the cursor. B proportional to (3(m·r̂)r̂ − m)/r³, so the pattern has two lobes and the loops between them — a radial fan has neither.
- Caustic Surface
- The net of light on a pool floor, lit by conservation of light rather than a texture: brightness is 1/|det(I + D(1 − 1/n)H)| of the refraction map, so the lines are where the surface folds the light. Pointer ripples bend the net. WebGL2.
- Brushed Metal
- A brushed metal panel under a light at the pointer, shaded with anisotropic GGX so the highlight streaks across the grain. Colour is the metal's F0; anisotropy 0 is polished. WebGL2.
- Bitmap Noise
- A self-generating dither field. Two drifting noise layers interfere to form patches of particles that appear, dissolve and reform in place. Canvas 2D, no WebGL.
- ASCII Field
- A canvas field of glyphs that scramble around the cursor and settle back to rest.
Components
- Magnifying Dock
- A dock whose items swell as the pointer nears, on springs. Distance drives the scale, so the row breathes rather than one icon popping.
- Ferrofluid Nav
- A nav whose active pill stretches out of one item, thins to a neck and gathers into the next. Two capsule fields blended with a polynomial smooth-minimum, evaluated per pixel — the neck is surface tension, not a translate.
- Gravity Menu
- Menu items on stable orbits, bent past the pointer by a softened inverse-square attraction. The softening term is what stops an item crossing the cursor being flung off screen in a single frame.
- Elastic Rail
- A scroll progress rail that bulges with overscroll and twangs back. It obeys the wave equation, so its pitch follows f = (1/2L)·√(T/μ) — a longer rail rings lower, with nothing tuned per page.
- Thrown Marquee
- A marquee you can grab and throw. Velocity decays exponentially toward the idle drift rather than toward zero, so a hard throw drops fast then creeps and the band returns to its resting speed with no special case.
- Sonar List
- A ping leaves the click and sweeps outward; each row rings as the wavefront reaches it. Arrival is d/c, a real propagation time, so rows near the click ring first whatever their index — and each row is its own damped oscillator, evaluated in closed form.
- Weight Grid
- A bento grid where the cell under the cursor takes area from its neighbours and the total never changes. Track weights are renormalised against their axis sum, so growing a cell is taking space off the ones beside it — not growing the grid.
- Folding Panel
- A panel that folds along real crease lines. Facets are placed by walking the fold outward so the paper stays connected, the panel foreshortens by cos θ as it closes, and each facet shades by Lambert's cosine law from its own normal.
- Depth of Field
- A card stack blurred by a real circle of confusion, so the near side defocuses harder than the far side — the asymmetry that makes a photograph read as one. The focal plane racks with the pointer.
- Prism Glass
- A GPU-accelerated refractive lens for images and rendered textures. Spectral dispersion, uniform frost and a directional rim light, from an SDF-defined shape — no 3D model required. It refracts the texture you give it, not the DOM behind it.
Animations
- Smear Cursor
- A cursor trail that is motion blur rather than a string of dots. Ribbon width falls as 1/(1+speed·k), the way a camera spreads the same exposure over more ground the faster the subject moves.
- Shatter Reveal
- An image that breaks into Lloyd-relaxed Voronoi shards when struck, each a rigid body with its own mass and polygon inertia, spun by the strike and slowed by quadratic drag. Reveals the content underneath. Canvas 2D.
- Liquid Transition
- A fluid front that sweeps over changing content: the middle leads by a Poiseuille profile, the edge rings under tension by the damped wave equation, and droplets trail the drain. Canvas 2D.
- Channel Switch
- Content changes like a CRT changing channel — collapse to a line and a dot, a phosphor feedback buffer decaying as e^(−Δt/τ), and a damped vertical hold rolling the new picture into lock. Children stay live DOM.
- Scroll Expand
- A framed panel pinned to the viewport that opens out to full bleed as you scroll past it, with the media inside settling back from a slight push-in. Progress is published as two CSS custom properties, so anything you drop inside can join the animation with one line of CSS.
- Halftone Screen
- Four-colour process halftone as a press prints it: CMYK screened at 15/75/0/45°, grey-component replacement, and dot area — not radius — matched to ink coverage, including where dots merge. A loupe under the pointer. WebGL2.
- Focus Peaking
- Lights an image's in-focus edges on hover, like a camera monitor: the Sobel gradient of luma, thresholded with a soft knee and tinted over a dimmed picture. WebGL2.
- Bitmap Image
- Converts an image into a dithered bitmap — ordered Bayer or true error diffusion (Floyd-Steinberg, Atkinson, Jarvis), which no shader can do. Canvas 2D, no WebGL.