Catalog

Components

Every component is live and tunable. Dial in the parameters, share the URL, copy the source.

BackgroundsAbout Backgrounds →

Waves

A woven field of flowing waves rendered on a WebGL line shader.

Grainient

An animated grainy mesh-gradient rendered on a WebGL2 shader.

Light Rays

Volumetric god-rays from a configurable origin, optionally mouse-following.

Mask Blur

Progressive edge blur — stacked backdrop-filter layers dissolve content toward a chosen edge.

Side Rays

Corner-anchored two-color light rays with adjustable tilt and blend.

Dot Field

An interactive dot grid that bulges and glows around the cursor.

Strands

Glowing wavy light-strands with an optional glass refraction lens.

Ribbons

Flowing translucent ribbons drifting across a canvas.

World Map ASCII

A dot-matrix world map whose particles scatter from the cursor.

Constellation

A constellation network — drifting particles link by proximity, chase and flee the cursor, and glow.

Plus Grid

A canvas field of '+' glyphs — scroll or pointer motion injects a traveling wave that ripples and decays across the grid.

Barcode

A procedural barcode whose bars light up like piano notes — looping on autoplay or scrubbed by scroll.

Aurora

Flowing curtains of amethyst light drifting across a starless night sky — an fbm-warped WebGL2 field where luminous bands ripple, fold, and dissolve into fine grain, like a polar aurora seen from the dark side of the world.

Starfield

Depth-layered stars drifting through a slow warp, each layer parallaxing at its own pace, with the occasional shooting star streaking a bright amethyst tail across the dark before the field settles back to its patient glimmer.

Cinders

A dark field of embers and ash rising on the draft, aglow with amethyst.

Shadowflame

A black flame with an amethyst core, its body folded from domain-warped noise.

Cathode

A cathode-ray tube showing nothing worth watching: a beam that turns around at each edge, phosphor that holds after it has passed, and a hum bar rolling up the glass.

Turing

Gray-Scott reaction-diffusion on the GPU. Two reagents, four terms, and coral, labyrinths and colonies that settle and stop all fall out of the arithmetic — a background that grows rather than loops, and never reaches the same frame twice.

Quicksilver

Molten chrome. Every other shader background emits light; this one reflects a studio that does not exist, synthesised from the surface normal — sharp softbox edges, a conductor's Fresnel wash, thin-film iridescence, and a wake that keeps moving where you dragged.

Mycelium

A slime mould foraging in the dark. Every other field here is a differential equation on a grid; this one is a population — up to a million agents, each carrying a position and a heading, sampling the trail ahead of itself, turning toward whatever smells strongest and laying down more of it as it goes. The veins, the junctions and the slow reorganisation are nowhere in the code.

Contour

A topographic map of terrain that will not hold still. The lines are not drawn, they are found — a height field is sampled onto a grid every frame and marching squares walks it once per altitude, emitting segments wherever the land crosses that height. Nothing here knows what a ridge is; ridges are where the crossings bunch up. The pointer raises a hill the contours have to route around, and because the interval is fixed rather than the line count, that extra altitude produces extra rings instead of restretching the ones already on screen.

Rainglass

Rain on a window with a city somewhere behind it. There is no scene being blurred — the backdrop is built out of focus to begin with, so the drops have something to bend without a render target or a blur pass anywhere in the frame. Each drop is a pure function of time inside its own grid cell, which is why a thousand of them cost the same as one and a resize cannot lose the rain. They descend the way water actually does: holding by surface tension, breaking loose, running fast, stopping again — and the trail exists only above the drop that made it.

Stipple

A flowing luminance field crushed to ink and paper by error diffusion — each cell's quantization error is pushed onto its unvisited neighbours in a serpentine scan, so mid-tones resolve into the organic scattered grain of a stippled engraving instead of a fixed lattice. Atkinson forwards only three-quarters of the error, which is why the classic-Mac look keeps its blown highlights; Floyd–Steinberg and Sierra spread all of it for a smoother ramp. The field is diffused on the CPU into an ImageData at one cell per CSS pixel-group, then scaled up with smoothing off, so the grid survives retina intact.

Prism

A raymarched glass prism splitting a beam into its spectrum — an SDF solid turned in a hazy volume, a white shaft entering one face and a fan of spectral bands leaving another, each band bent by its own wavelength-dependent deviation so the fan spreads the way dispersion actually spreads. The beams are analytic capsule glows integrated against the view ray, not a second march, which is what keeps sixty-four steps and eight bands inside a frame budget. Drag orbits the solid with momentum; the haze is what makes the shafts readable at all, because light in clean air is invisible until it hits something.

Text AnimationsAbout Text Animations →

Morphing Text

A gooey blur-morph that cross-dissolves between a list of words.

Animated Number

Animated numeric transitions with flip, slide, fade, and bounce styles.

Marquee Text

A marquee that scrolls only when its text overflows the container.

Variable Proximity

Text whose letters interpolate font weight by cursor proximity.

Letters Pull

A per-letter pull-up reveal — letters rise, sharpen from a blur, and fade in with a stagger.

Scramble Text

Ciphered glyphs boiling out of noise and resolving into words — a decode cascade that settles character by character, a hover that re-scrambles on demand, or a continuous low glitch that keeps the type restless, each freshly-resolved letter flashing accent before it cools to ink.

Long Shadow

Text that casts a long shadow sweeping like a sundial through the hours.

Specter

Spectral RGB-split echoes drift off the letters and dissolve into the dark.

Lumen

Copy that lights up as you read it — words ahead sit dim and unfocused, and stay lit once you pass them.

Redact

Copy that arrives fully classified under solid bars, then declassifies word by word — each bar clearing its own word and leaving an amethyst edge behind as the only evidence it was ever there.

Split Flap

A Solari departure board. Every column walks the charset one flap at a time until it reaches its letter, so the word is never revealed — it is arrived at, with a real hinged half falling away as the next one seats behind it.

Teletype

A line of type arriving one character at a time, at a rate that varies and with a beat at every mark.

Reflow

Text whose words keep their identity when the line breaks move — narrow the measure and the sentence travels instead of re-wrapping.

Metallic Text

Chrome poured into a headline — a metal ramp clipped to real glyphs, a specular travelling across them, and a tinted wake following a beat behind.

Molten

Type that melts. Letters sag under their own weight, string out, and fuse into one surface where they touch — because the glyphs are a coverage field cut by a threshold rather than shapes being moved, so two stems raise the coverage between them past the cut and one outline closes over both. The word underneath is a real text node the whole time: selectable, searchable, and read correctly aloud while it runs.

Neon

A neon sign, with everything that is wrong with a neon sign. Tubes strike one at a time rather than together, each settling at its own moment inside the ignition; the steady state carries a mains hum; and every so often one tube gives up for a third of a second and comes back. The glow is baked once per letter into a sprite, so a frame is a handful of draws no matter how wide the word — and the word itself never stops being a real, selectable text node underneath.

Rime

Hoarfrost taking a word — Molten's opposite number, the same idea of type as a coverage field run cold. Crystal tips seeded on the glyph edges creep across the letters, fork at a fixed lattice angle, and die where they run out of glyph or hit ice already there, so the cost tracks the growing edge rather than the area. The text underneath is never redrawn: it stays a real span at its real colour the whole time, which makes the thaw nothing more than fading the ice off type that was always there.

Micro-interactionsAbout Micro-interactions →

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.

Morph Dialog

A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.

Blueprint Card

A technical-drawing card — dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.

Corner Letters

Four glyphs pinned to the container corners that blur-and-scale in on mount and dissolve out on exit.

Hover List

A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.

Preloader

A percentage-counting load overlay — spinning ring, eased counter, and a fade-out that reveals the page beneath.

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.

Magnetic Button

A button that leans into your cursor — caught in a magnetic field it slides toward the pointer while an amethyst aura swells with proximity, then snaps home on a spring and answers every click with a dark ripple bursting outward from the point of contact.

Shadow Cursor

A custom cursor with a shadow at its heel — a precise dot leads while a lagging blade trails on a spring, and when it crosses an interactive element the trail pools and swells around it, inverting whatever lies beneath. Scoped entirely to its own stage; the page cursor is never touched.

Torchlight

Content hidden in darkness; the cursor is a torch that reveals only what it touches.

Dissolve

An element disintegrates into drifting shadow-motes on dismiss, and reforms on command.

Tilt

A machined card that leans toward the pointer in 3D while a specular sheet slides across its face.

Sigil

An SVG crest that traces itself in when it scrolls into view, stroke by stroke.

Rift

A draggable tear between two overlaid scenes — push past an edge and it resists, then snaps back.

Approach

A tile whose overlay enters from the exact edge your cursor crossed, and leaves the way you go.

Hold

A confirm that has to be earned — the ring fills while you hold, snaps shut when it commits, and empties on a different curve entirely if you let go early.

Aperture

A camera iris. Blades pivot on a ring of pins and one shared angle drives the whole mechanism — wide open at 64% of the housing, past the centre and light-tight at zero, cutting the scalloped polygon a real iris makes on the way through.

Segmented

A segmented control whose indicator travels on a shared layout id and smears in the direction it is moving.

Tether

A popover that grows out of the corner nearest its trigger, and moves that origin when it flips.

Inline Edit

Text that becomes its own input with nothing moving — one padded box, two contents, sized in CSS.

Crossing

A gallery-to-detail crossing on the View Transitions API, where one element is the same object in both views.

Reorder

A sortable list that answers to a finger and to a keyboard equally — grab a row, and the rest step aside to make the space.

Holofoil

Holographic trading-card foil over real content. The diffraction band travels against the tilt while the specular follows it, and the flake only lights where the rainbow currently falls — which is what stops the whole thing reading as one gradient sliding around.

Lens

A glass lens you drag across live content, bending it through an SVG displacement field with a real bevel and three-channel dispersion. It refracts a live duplicate of its own children rather than the page backdrop — which is the only version of this effect that works in Chrome, Safari and Firefox alike.

Passcode

A one-time-code field whose cells answer every keystroke: each character lands compressed and springs back, a paste distributes across the row rather than filling it on one frame, a wrong code shakes and clears itself, and a right one folds the whole row into a tick. Underneath there is exactly one real input holding the whole code — which is what keeps SMS autofill, password managers, select-all and a screen reader working, none of which survive six inputs with maxLength one.

Dial

A machined rotary knob: angular drag with detents you can feel on the way past, inertia on a flick, and a spring that settles into the nearest stop. The angle lives in a motion value rather than in React state — a drag writes it sixty times a second and a spring more often than that — so the only thing React holds is the detent index, and only when that integer actually changes. Arrow keys step through the same spring the hand does, so the keyboard is not a second, worse path to the same control.

Refract

A frosted-glass slab you drag across a live scene, refracting it through a real shader optic — a rounded-rect height field whose gradient bends three separately-sampled color channels, 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: 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.

Power-User SystemsAbout Power-User Systems →

Command Palette

A cmdk command menu with a plain or liquid-glass surface and hotkey trigger.

Physics Engine

A from-scratch 2D rigid-body physics lab — fixed-timestep impulse solver, drag-to-throw bodies, force and velocity overlays, and a live energy readout on a blueprint grid.

Black Hole

A real-time Schwarzschild black hole raytraced per-pixel in a WebGL2 shader — null geodesics bend a lensed accretion disk over the event horizon, with Doppler beaming, gravitational redshift, a photon ring, and a lensed starfield, all under a cinematic orbit.

Vortex Bloom

A molten-gold-and-obsidian vortex funnel spiraling into a luminous SDF core — lotus, gem, or flame — raymarched per-pixel in a WebGL2 shader, with a GPU dust field spiraling down the flow toward the throat, all under a draggable orbit and a real two-pass bloom.

Smoke Field

A real-time GPU fluid you can stir — semi-Lagrangian advection, a Jacobi pressure solve, and vorticity confinement run every frame across ping-ponged float buffers, injecting a dark amethyst plume that curls, billows, and bleeds through the frame wherever you drag.

Ripple Field

A pool of dark, moonlit water you disturb by hand — a leapfrog solve of the 2D wave equation runs on a ping-ponged float field, ringing every pointer move outward, reflecting the swell off the walls, and lighting the surface with gradient-normal refraction, curvature-focused caustics, and a Fresnel glint riding each wavefront.

Umbral Orrery

An orrery of moons casting real eclipse shadows across a shadowed world; drag to orbit.

Parallax Rail

A pinned section where scrolling down drives content sideways across depth planes moving at different rates.

Approval Flow

A step-by-step approval checklist for agent permissions — radio and checkbox groups, an "Other…" escape hatch that grows a field in place, and per-step validation that blocks the commit. Answering a step sends the chosen option flying into a running record of what you have already decided, so the screen accumulates a decision trail instead of replacing itself.

Diff Review

A review surface for a patch an agent has proposed — accept or reject each hunk, fold long runs of unchanged lines away, and flip between unified and split. Switching views does not redraw the diff: every line is a shared element that flies from the stream into its column and back, so you never lose the line you were reading.

Ledger

A live activity log for a working agent. Consecutive events from the same source fold into one block instead of stacking as identical rows, the window holds a fixed number and lets the rest fall off the top, and the scroll stays pinned to the newest line only until you scroll away from it — after that it keeps running and tells you how far behind you are.

Rotunda

Real HTML panels on a drag-spun 3D cylinder. A hand-rolled perspective projection written onto DOM elements rather than a canvas — so the text stays selectable, the links stay clickable, and a screen reader still reads every panel while the ring turns.

Ascii Engine

A lit, raymarched 3D solid rendered at exactly one pixel per character cell, then quantised into a glyph ramp drawn once with fillText. Drag to orbit it through a full three-sixty. Real geometry underneath, terminal on top — and no scene graph, no mesh, and no second library to get there.

Swarm

Up to a quarter of a million particles integrated entirely on the GPU, morphing between words and solids, with a drag-orbit camera. Position and velocity live in floating-point textures and never come back to the CPU; text targets are sampled once out of an offscreen canvas, so the shape can be any string with no font atlas.

Mirage

Live, fully interactive HTML seen through moving air. An animated turbulence field displaces the real DOM subtree per pixel — no snapshot, no canvas replica — so the text stays selectable, the button still takes focus and the link is still a link while the whole panel shimmers.

Submerge

Live content held under water. A slow current bends it continuously, a press drops a stone and a drag leaves a wake that trails behind the cursor — and the text underneath stays selectable, the button still answers and the link is still a link, because the water bends the real tree rather than a picture of it.

Weave

A sheet of cloth on a position-based solver — particles and distance constraints relaxed to convergence every fixed step, with no forces, no rotations and no contacts. Drag it, load it, and pull until the constraints fail and the tear runs. Every quad is shaded by its own extension against the tear threshold, so the load path through the sheet is visible long before anything breaks.

Telemetry

A metric board that behaves as one instrument instead of eight sparklines. Hovering any tile broadcasts a single timestamp and every other tile resolves its own value at that same instant, so a latency spike and a queue backing up are visibly the same event rather than two coincidences. Threshold breaches are recorded on the sample rather than on a pixel, so the scar travels with its data and is still there forty seconds after the value recovered.

Rewind

An undo history you can scrub, and that refuses to throw the future away. Drag the head and the interface reverts live under your finger rather than on release; act from a past point and the abandoned future stays drawn on the rail as a branch you can walk back onto, instead of being silently destroyed the way every real undo stack destroys it. Controlled in the same shape as Ledger — it owns the rail, the gesture and the branch graph, and your reducer owns the states.

Stream

An AI response surface that streams the way live chat UIs stream — a shimmer while the model thinks, tokens arriving on an irregular clock and blurring into place, a generation caret riding the last word, and stop and regenerate controls that actually interrupt. The cadence rides the animation clock rather than timer chains, so pausing the bench freezes generation mid-word. Only the trailing window of tokens are live animated elements — everything older folds into one static text node, so a long answer never accumulates a thousand springs — and an invisible ghost of the full answer holds the final height, so neither the thinking-to-streaming swap nor the stream itself ever moves layout.

Infinite Canvas

A pannable, zoomable infinite board holding real DOM cards — one world element under a single translate-and-scale, so focus survives and nothing ever remounts when the camera moves. Drag the background to pan with inertia; the wheel zooms to the cursor by holding the world point under it fixed; cards drag independently and glide onto the grid on release; the corner minimap mirrors the extent and jumps the camera where you click. Camera state lives in one ref written by handlers and the loop, and every consumer — world transform, backdrop plane, minimap — derives from it in a single write pass per frame, so React never renders a camera frame. Arrow keys pan and plus and minus zoom when the board holds focus.