Catalog

Components

Every component is live and tunable. Dial in the parameters, share the URL, copy the source — or the full brief for your coding agent.

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 following the mouse.

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 slowed down until you can watch it work: the beam paints a test card line by line, and the phosphor it leaves behind fades until the next pass comes round.

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, built out of 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

Pro

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. 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.

Ferrofluid

A pool of magnetic fluid rendered as a per-pixel metaball field. A handful of blobs orbit on closed integer-harmonic paths and merge wherever their fields overlap. The cursor is a magnet held over the pool: the surface reaches toward it, and inside its influence the iso-edge erupts into the radial spike crown that makes ferrofluid unmistakable. Lighting is free, because the metaball gradient is analytic, so the same loop that sums the field also yields the surface normal for the specular sheen and the amethyst rim, with no extra field evaluations.

Lissajous

A phosphor oscilloscope tracing Lissajous figures. The beam dwells on one frequency ratio, then retunes to the next by sliding both frequencies continuously, and the chirp while the figure comes apart and re-locks is the same thing you see turning a real scope's timebase knob. Persistence is data, not paint. Instead of the classic translucent-fill fade, which never fully clears and cannot survive a paused repaint, the beam keeps a ring buffer of recent samples and redraws the whole trail from scratch each frame, so the phosphor hold re-grades live when you tune it and a still frame reproduces the exact screen.

Moire

Pro

Two lattices stacked at a fraction of a degree apart, beating against each other into live interference fringes. Every layer is band-limited in the shader, so what you see is the interference and not the sampling.

Dither

Pro

A live field crushed to one bit through an ordered threshold matrix. The only background here that looks better the cheaper it gets, and the only one that runs the same on a decade-old laptop as on a workstation.

Sakura Tree

Pro

A painterly toon-shaded 3D cherry-blossom scene with wind-driven falling petals.

Flock Field

Pro

A murmuration of hundreds of boids wheeling as one — separation, alignment, and cohesion resolved every frame through a spatial hash for the crowd, banking toward or scattering from your cursor, smeared into long trails of amethyst and cyan as the flock folds across the dark.

Caustics

Pro

Light through moving water. The filaments are the zero crossings of a noise field folded back on itself, not its peaks — which is why they stay thin and hard-edged at any brightness instead of blooming into blobs. The lattice is periodic, so the flow offset wraps and the motion never coarsens over a long session.

Voronoi Shatter

Pro

Lit cells that fracture apart under the pointer and knit back together behind it. The seam is drawn from the gap between the two nearest seeds rather than the distance to the nearest one, so it holds an even width right through the vertices where three cells meet — and the shatter displaces the space rather than the seeds, so no cell ever swaps neighbours mid-fracture.

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 shift font weight as the cursor gets closer.

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 clears its own word and leaves 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: 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, so it stays 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. This is 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.

Anaglyph

Stereoscopic channel-split type. The real headline stays put, selectable, one announcement to a screen reader, while two aria-hidden copies in opposing ink colors slide against each other under the pointer, and the blend mode resolves their overlap back toward white, so the depth lives entirely in the fringes, exactly as it does on a printed anaglyph. The channels chase the cursor through an exponential lerp written straight to transform, and once the pointer goes quiet a slow bounded-phase sway takes the target over so the split keeps breathing on an idle pane.

Inscribe

Text engraved stroke by stroke. Every character is a real SVG tspan with native kerning and selectable words, wearing the uniform-dash trick, because glyph outlines expose no pathLength and measuring their true perimeter has no API: the chisel simply travels each letter at its own apparent speed. When a stroke closes, its fill carves in after a beat, and the engraved finish darkens the fill and adds an inset relief so the word reads as cut into the panel rather than printed on it. The whole timeline runs on the animation-loop clock, so the bench pause freezes the chisel mid-stroke, and with no JavaScript at all the text simply sits there finished.

Marquee Velocity

Pro

A wrapping marquee whose drift speed and direction follow scroll velocity — fast scrolls whip the row along, upward scrolls reverse it.

Word Reveal

Pro

A scroll-scrubbed word reveal — each word brightens and rises as it enters the viewport, tied directly to scroll position.

Kinetic

Pro

Type with mass: every glyph is its own spring, and the squash and stretch are read back off that spring rather than authored.

Inlay

Pro

A live shader material poured into real letterforms — molten rock, aurora, chrome, embers, tide. The text stays a real text node at transparent, so it is still selectable, searchable and read aloud exactly once while something genuinely animated fills it.

Stretch Type

Pro

Type that deforms with how fast you are scrolling rather than how far. Each glyph springs toward the same velocity signal on a softer spring than the one before it, so the wave down the word is a consequence of the physics instead of a list of delays — change the string and it re-tunes itself.

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. A spinning ring, an 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, so 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 those 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, because 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 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.

Lever

An industrial breaker lever with a real over-centre mechanism. Displayed travel lags the raw pointer travel by a bump curve peaked at the threshold, so approaching it the handle drags heavier, and crossing it the lag collapses and the handle races ahead of the finger. That is why a half-hearted push falls back the way a real breaker does. Release projects the flick's velocity past the threshold before choosing a side, so momentum can finish a throw the finger only started, and the keyboard commits through exactly the same spring the hand uses. The throw is a motion value. React holds only the committed side.

Tear

A ticket with a perforated stub you tear off for real. The ticket is drawn twice and cut from one seeded jag polygon: an attached layer holds everything still connected, the body plus the stub below the tear front, and a flap layer holds only the freed part, rotated about the frontmost attached point, so the torn edges mate tooth for tooth and the swing can never overlap the body. The seam fights back through a resistance curve, a failed tear springs shut, and a completed one lets the stub fall under gravity carrying the release velocity. The jag array comes from a seeded PRNG so the edge never boils between renders.

Grow Dialog

Pro

A dialog that grows out of the clicked element and shrinks back into it, entirely inside a portal — never behind page content.

Dismiss

Pro

Throw the top card away and the stack closes up behind it. Distance commits, but so does speed — a fast flick from barely anywhere counts, and anything short of both rubber-bands home carrying the velocity you let go at.

Flip Card

Pro

A grid card that flips out of its cell — GSAP Flip carries it to viewport center while it rotates to reveal its back face, then returns on close.

Unfold

Pro

A row of slats that open on approach while their neighbours give up the room on a spring.

Intro Animation

Pro

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.

Magnetic Dock

Pro

A dock whose items swell under the pointer and carry their neighbours part of the way with them. One shared value drives the whole row, so nothing re-renders while you sweep across it — and focusing an item writes the same value, which is why the keyboard gets the identical effect rather than a substitute for it.

Radial Menu

Pro

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.

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, either 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, with 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, with no snapshot and 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. 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, and everything older folds into one static text node, so a long answer never accumulates a thousand springs. 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, and 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, from the world transform to the backdrop plane to the 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.

Patchbay

A modular-synth patch bay. The jacks are real DOM buttons, focusable, labelled and keyboard-patchable, and only the cables live on a canvas underneath the pointer's reach, because a cable is pure paint: a quadratic Bézier whose control point hangs below the midpoint by a sprung sag. Drag from any jack and a live cable follows the hand. Release near a jack on the opposite bank and it seats with an overshoot-and-settle wobble, elsewhere it retracts. Seated cables carry signal pulses on a bounded phase, grabbing an occupied input picks its cable up to repatch, and resizing the bay shakes every cable, which is follow-through, cheaply.

Keycast

A streamer-style keyboard HUD: every chord you press appears as a row of keycaps and ages away, with a hammered key folding into one cap wearing a ×n badge. The listener is display-only by contract. It never prevents or stops an event, bails inside editable targets and mid-IME composition, and ignores lone modifiers, so the page underneath keeps every shortcut it had and the HUD merely reports what the hands did. Entry timestamps ride the loop clock rather than the wall clock, so pausing the bench freezes the stack mid-fade instead of evicting it all on resume, and a scripted demo reel keeps the pane alive whenever the real keyboard goes quiet.

File Explorer

Pro

A persistent three-pane file manager that stores real image, video, and blob uploads 100% client-side — OPFS when available, IndexedDB everywhere else — with nested folders, search, sort, drag-and-drop upload, move, and a live preview panel.

Elastic

Pro

Throw the top card and the speed you released it at carries into the spring — throw it far enough and it cycles to the back of the deck instead of coming home.

Masonry

Pro

A Pinterest-style grid where every item drops into the shortest column, packed by measurement rather than by a shared row baseline.

Rubiks Cube

Pro

A Rubik's cube that scrambles and solves itself on an endless loop while spinning like a planet. Two independent rotation layers, and every quarter-turn is quantised back to exact integers, so an hour of turns drifts by nothing at all.

Timeline Scrubber

Pro

Drag the head, snap it to markers, zoom into the track and let the viewport follow playback. One derived number — pixels per second — places the ticks, the pips, the head, the drag target and the follow scroll, so nothing on screen can disagree about where a time actually is.

Data Grid

Pro

A virtualised grid over thousands of rows: resizable columns, multi-key sorting, range selection and keyboard navigation. Header and body share one scroller so they can never desync, selection is keyed by row id so it survives a re-sort, and focus stays on the viewport so a recycled row can never take the arrow keys down with it. Give it a parent with a bounded height — like every windowing implementation, in an auto-height parent it quietly stops windowing and renders every row.

Hero Templates

Monolith

Pro

A monumental slab floating over a reflective grid floor, rendered as a fogged 3D scene you can orbit.

Shard Orbit

Pro

A giant crystal monolith turning on its axis in a glitter field, or a halo or helix of instanced shards lit by the pulsing core, drag-orbited beside left-aligned copy, fully GPU-driven.

Grid Horizon

Pro

A synthwave horizon in one fragment shader. A glowing grid floor, a banded sun, parallax ridges and a pulse rolling out of the vanishing point.

Warp Run

Pro

A star-streak tunnel rendered as velocity-stretched lines; the pointer steers, dragging banks the ship.

Depth Stage

Pro

A DOM hero stage where any children become parallax layers in real 3D. Pointer-tracked tilt, spring physics, a following spotlight, depth of field, staggered entrance, zero canvas.

Eclipse Flare

Pro

A total eclipse under liquid-glass copy: a streamered corona, a diamond-ring flare on the breath, god-rays marched through drifting cirrus in one jittered pass.

Tidal

Pro

A dusk ocean under flat, left-aligned copy: noise-warped swells with wind ripple, sunlit crests, a sun path and breaking foam, raymarched in one bounded pass.

Liquid Chrome

Pro

A liquid-chrome form of fused spheres over a black mirror floor: rectangular studio softboxes, one mirror bounce and soft occlusion, sphere-traced in one pass beside left-aligned copy.

Hanami

Pro

A painterly 3D cherry-blossom hero: a toon-shaded tree over an unbroken meadow, wind-driven petals drifting across left-anchored copy, orbitable by drag.