Interfaces that move. Refractive glass, motion and depth for React — a GPU-accelerated prism lens and a cursor-reactive ASCII field, with every setting exposed as a prop.
A canvas field of glyphs that scramble around the cursor and settle back to rest.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A dock whose items swell as the pointer nears, on springs. Distance drives the scale, so the row breathes rather than one icon popping.
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.
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.
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.
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.
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.
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.
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.
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.