crucıble

Components

176 components, forged for copy-paste and CLI install. See the backgrounds gallery or theme them with the palette tool.

Category
Engine
Tier

176 components

backgrounds

View all
Arc

An electric-storm background: seeded midpoint-displacement lightning bolts fork down from a faint cloud glow toward random ground points, drawn as layered strokes (wide glow, colored haze, white-hot core) with flicker re-strikes and afterimage persistence. Click to call a strike to your cursor. Photosensitivity-safe by design: shaped pulse trains (max 3 peaks, 130ms+ apart), a hard 1.25s strike cooldown, and a flashCap clamp on full-frame luminance. Canvas 2D, idle-silent between strikes, offscreen-paused, reduced-motion poster frame.

canvas
Arcade

8-bit attract-mode background: a chunky pixel starfield drifting on three parallax depth layers, seeded space-shooter sprites gliding across on a two-frame flap, and a faint pixel grid receding to a horizon. Crisp unsmoothed pixels. Canvas 2D, seeded, offscreen-paused, reduced-motion-safe.

canvas
Aureole

Volumetric god rays through drifting atmosphere: a light source anchored to a frame edge or corner pours a bundle of shafts into the dark, an angular noise mask slowly churns so individual beams brighten, split, and die like sun through smoke, and sparse dust motes twinkle only inside the lit volume. Inverse power-law bloom at the source, radial falloff keeping the far field text-safe, and a gentle searchlight re-aim toward the pointer. An original OGL fragment shader — DPR-clamped, offscreen-paused, with a composed static frame under reduced motion.

oglPro
Ballast

A physics ballpit background in sea-glass celadon: frosted spheres pour in from a corner and drift under low gravity like objects underwater, jostling softly while the pointer stirs gentle currents. Instanced rigid bodies, DPR-clamped, offscreen-paused, reduced-motion-safe.

r3fPro
Blast

An audio-reactive furnace: a horizon coal bed whose glow and flame-lick height follow amplitude, with bass strikes hurling ember volleys upward and treble adding spark flicker. Degrades to a gently breathing coal bed without audio — never black. Mic capture only behind an explicit user gesture, with full AudioContext and GL teardown on unmount.

oglPro
Bloom

A centerpiece sphere of luminous plasma — the white-hot bloom drawn from a bloomery furnace. Layered fresnel shells wrap domain-warped turbulence convecting upward inside the volume, a molten seam migrates slowly across the surface, and a wide soft halo seats the orb in the dark. Hover leans the orb toward the cursor and quickens the convection; click sends a slow shockwave ripple crawling across the shell. Original OGL fragment shader with all fragment work bounded to the orb+halo region, tanh soft-clip tone mapping, position/size knobs for hero layouts, full palette control — DPR-clamped, offscreen-paused, with a composed poster frame under reduced motion.

oglPro
Bokeh

Dreamy out-of-focus lights: a parallax field of soft circular light discs — each with a brighter aperture rim — drifting slowly through the dark, sized and layered by depth like night lights through a defocused lens, with a few sharp in-focus specks. 2D canvas with additive blending, seeded PRNG for a deterministic scatter, pauses offscreen, honors prefers-reduced-motion with a still scatter.

canvas
Cascade

Digital code rain: monospace glyph columns fall with bright white-hot heads and exponentially-fading cyan-steel trails, glyphs scrambling as the light passes, layered by depth. Pale-phosphor default (classic green is a preset). Canvas 2D, seeded, offscreen-paused, reduced-motion-safe.

canvas
Cathode

A CRT / VHS tube background: a synthetic phosphor signal rolls under dense scanlines while a slow vertical tracking bar sweeps down and shears the picture, the whole frame barrel-distorted into a bulging glass tube with a dark bezel, radial chromatic aberration, phosphor bloom, aperture-grille shimmer, and animated snow — all graded through a single phosphor tint. Original OGL fragment shader, DPR-clamped, offscreen-paused, reduced-motion-safe.

ogl
Caustics

The rippling light-caustic net on the floor of a sunlit pool: several octaves of drifting ridged noise thin into bright veins, and two decorrelated fields multiply so the web grows real caustic crossing-nodes, all undulating under a lapping surface ripple with a depth gradient and faint god-ray shafts. Cool aqua by default; slow, calm, premium. Original OGL fragment shader, tone-mapped, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Cinder

A falling-ember background: a parallax field of hot embers, each an incandescent core in an additive-glow halo, stretched into a soft motion-blur streak as it drifts and flickers down. Near embers big/bright/fast, far ones dim/slow. 2D canvas with additive blending, seeded PRNG for deterministic spawn layout, honors prefers-reduced-motion.

canvas
Circuit

PCB-style data flow: orthogonal right-angle copper traces route between solder-pad nodes while glowing data packets stream along them, flaring each pad they reach into a hot bloom over a faint idle glow. Cool electric-aqua default, colors knob. Canvas 2D with a cached etch layer, seeded, offscreen-paused, reduced-motion-safe.

canvasPro
Coalesce

A metaball field: drifting cores fuse and split through smooth iso-surface blending, shaded as one mercury-chrome liquid with a circling glint and a silvery rim, the pointer riding along as an extra core. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

ogl
Confetti

Celebration confetti: seeded chips and streamers fall under gravity with per-piece spin, tumble (foreshortening flip with a shadowed backface) and flutter. Opens with an upward burst on mount and keeps firing occasional puffs, then settles into a gentle endless drift. Festive-but-tasteful density, colors/speed/count knobs. Canvas 2D, seeded, offscreen-paused, reduced-motion-safe (static settled scatter).

canvas
Contour

Living topographic map: marching-squares contour lines over an evolving 3D value-noise terrain, thin minor strokes with a bold accent index line every fifth level, over soft posterized elevation bands. Cool cartographic default. Canvas 2D, seeded, offscreen-paused, DPR-clamped, reduced-motion-safe.

canvas
Corona

A classic aurora: ribboned bands with a moving icy sheen on a near-black field, in teal, ice blue, and violet. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

ogl
Crucible

A sealed glass vessel of molten-metal spheres that tumble in and settle under a heat glow. Instanced rigid bodies, bloom, pointer stirring, offscreen-paused, and reduced-motion-safe.

r3fPro
Draft

A soft fluid gradient mesh: domain-warped fbm shader swirling slate, indigo, and violet fields in a slow cloud-like drift. Original OGL fragment shader, dithered, offscreen-paused, reduced-motion-safe.

ogl
Eclipse

A total solar eclipse: a black moon disk occludes a dead-center sun ringed by a white-hot corona of writhing radial streamers, a razor limb ring, and one warm diamond-ring bead drifting around the rim over a seeded starfield. Original OGL fragment shader, dithered, offscreen-paused, reduced-motion-safe.

ogl
Ember

A field of glowing embers rising from below in molten forge tones, each with its own phase, flicker, wind drift and color ramp; the cursor stirs a gentle updraft. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

ogl
Filings

An iron-filing field: a grid of short segments aligning to a slow magnetic-dipole field when idle and bending toward the cursor, brightening from silver to white. Original OGL fragment shader, one draw call, offscreen-paused and reduced-motion-safe.

ogl
Fireflies

A calm, magical night: warm glowing points drift along gentle seeded wandering paths, each softly breathing inside an additive-glow halo and trailing a short fading wake. Near fireflies big/bright/roaming, far ones dim pinpricks — real depth parallax. 2D canvas with additive blending, seeded PRNG for a deterministic SSR-safe layout, pauses offscreen, honors prefers-reduced-motion with a still field of glowing points.

canvas
Firmament

A cold night sky: three parallax layers of stars in icy white, pale blue, and rare cool violet over a blue-violet nebula lit from below, crossed by occasional downward-falling shooting stars with gravity-bent trails. Mouse and scroll parallax, offscreen-paused, reduced-motion-safe.

oglPro
Flurry

Quantized pixel snowfall: chunky flakes locked to a crisp unsmoothed pixel grid fall on three parallax depth layers with distinct speeds, sizes and ice-blue tints. Per-flake sine wander, seeded wind gusts that shear layers by depth, and flakes that settle briefly into 1-block drifts on an invisible floor. Canvas 2D, seeded, offscreen-paused, reduced-motion-safe.

canvas
Halftone

A comic pop-art Ben-Day dot field: three ink screens at classic offset-print angles, mis-registered for printed-comic fringing, their dot radii driven by a slow traveling wave so waves of dot-size ripple across a bold flat ground. Cursor sends a concentric pressure wave. Original OGL fragment shader, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Ink

Dye blooming through still water: a shared domain-warped fbm curls slow billowing folds while two inks bleed from drifting sources, pooling dense and dissolving into ragged tendrils with delicate luminous fronts, mixing into a pale bloom where they overlap. The pointer curls a soft eddy. Original OGL fragment shader, hard-dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Iris

A holographic foil sheet: a slowly raking light drives thin-film iridescence across a domain-warped oil-slick field, crossed diffraction micro-gratings split it into fine rainbow bands, and a soft specular bloom sweeps and leans toward the pointer for a tilt-shimmer, with glints twinkling like glitter. Original OGL fragment shader, hard-dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Kaleido

A living kaleidoscope mandala: a per-pixel polar mirror-fold gives exact N-fold dihedral symmetry over a domain-warped, slowly drifting jewel-tone field, so shards rotate and morph while luminous veins trace the facet seams and a soft bloom glows at the hub. Original OGL fragment shader with segments/speed/colors/intensity knobs, exponential-toned, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Latticework

An interactive dot grid: cool-steel silver dots heat white → cyan as the cursor approaches, with a configurable falloff curve. Freezes to a static, gently lit frame under prefers-reduced-motion.

canvas
Louver

Gradient blinds: angled slats tilt open around the cursor to reveal a brighter rosewood-to-indigo field behind, each open slat catching a 1px lit edge, with a slow diagonal shimmer when idle. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

ogl
Molten

The signature pro background: a viscous molten-bronze shader with amber crest highlights, ember-red troughs, a slow violet iridescence sweep, and a cursor heat-welt that swells the metal. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

oglPro
Nebula

A deep-space interstellar gas cloud: domain-warped fbm shader billowing luminous folds through a cool indigo-violet-into-teal gradient, with dark dust lanes, a twinkling starfield, and a soft depth glow. Original OGL fragment shader, hard-dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Plasma

A classic 90s demoscene plasma background: layered sine/cosine fields over space and time sum into a scalar that indexes a smooth looping palette, so flowing color bands both deform and palette-cycle — organic, hypnotic, seamless. The pointer subtly warps the field. Tasteful cool duotone-to-tritone by default, full psychedelia via the colors knob. Original OGL fragment shader, tone-mapped, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

ogl
Raceway

A warp-tunnel light highway: cold-white light trails stream out of a central vanishing point and cool to steel-blue at the frame edges, one narrow cyan fast lane, the whole corridor bending through slow curves. Click and hold to accelerate — the FOV widens, streaks smear into long exposures, and release ghosts a dimmer copy one frame behind (shutter-drag) before snapping to cruise. Original OGL fragment shader, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Retro Forge

A synthwave horizon: a perspective plane of glowing magenta grid lines scrolling toward the viewer, melting into a layered violet horizon bloom, with an optional slit-scanned cyan sun and faint star field. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

ogl
Sateen

Flowing lit fabric: broad domain-drifted folds carry fine silky striations while a satin specular band — an orbiting light caught by the cloth's gradient — sweeps across the drape. Moonlit pewter-blue, billows under the cursor. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

ogl
Singularity

A gravitationally-lensed black hole: a per-pixel Schwarzschild geodesic ray-march bends light around the event horizon, wrapping a white-hot accretion disk over and under the black sphere into the iconic lensed halo, with a crisp photon ring, Doppler-beamed asymmetry, and a lensed starfield. Original OGL fragment shader, filmic-toned, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Slag

Animated film-grain / noise overlay: fine, neutral-gray speckle that blends over any content via low opacity and mix-blend-mode, with an fps throttle for a slow, settled look and an optional warm tint knob.

canvas
Solvent

Interactive fluid ink — a real GPU stable-fluids solver (semi-Lagrangian advection, vorticity confinement, Jacobi pressure projection) driving a persistent two-pigment dye field: cursor strokes push force and pigment into the fluid, so magenta and cyan inks swirl, fold through violet where they meet, and keep marbling long after the cursor stops. A seeded virtual cursor keeps it alive when idle and hands over to the real pointer with an exponential tween; two pigment blooms are pre-seeded so it is never blank on load. Half-res HalfFloat sim FBOs, adaptive Jacobi budget, DPR-clamped, offscreen-paused, reduced-motion-safe (a frozen ink marbling).

oglPro
Sonar

Phosphor radar scope: a rotating sweep beam with a soft angular-gradient afterglow over concentric range rings and faint azimuth spokes; seeded contacts blip awake when the beam crosses them, bloom, then decay — drifters leave breadcrumb tracks. Optional hud knob for the full instrument look. Canvas 2D, seeded, offscreen-paused, DPR-clamped, reduced-motion-safe.

canvas
Spall

Pixel shatter bursts: an invisible mosaic of chunky cells where a click (or seeded auto-strike) detonates a radial shockwave — struck cells flash ultraviolet, physically eject along the radius with per-cell jitter in crisp integer-snapped steps, then cool and settle home; overlapping bursts interfere additively and hover leaves a faint warm-up trail. Canvas 2D, idle-silent between bursts, seeded, offscreen-paused, reduced-motion-safe.

canvasPro
Spectra

White light dispersing through an off-screen prism: a fan of rays spreads from a configurable origin, each frequency band refracting at its own angle so the spectrum separates red to violet — pinched to a white-hot throat at the prism and widening with distance. Rays flicker slowly like light through moving air, a slow hue-phase drift cycles which band leads, and the pointer tilts the dispersion axis with damped easing. True premultiplied-alpha transparency composites over any backdrop; an N-stop colors gradient overrides the spectral ramp. Original OGL fragment shader, jitter-dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Stipple

An ordered-dither shader field: a drifting noise field quantized through an 8x8 Bayer matrix into chunky retro dot patterning, in risograph sepia duotone with a slowly slipping print register. Original OGL fragment shader, offscreen-paused and reduced-motion-safe.

ogl
Strand

A converging thread field: silver filaments strung between two off-screen loom anchors — ends pinned, free middles bowing under noise like threads at uneven tension. Each thread is a 1/|d| neon glow with a white-hot core and long silver falloff, depth-faded into a dim far weave; the cursor parts the field with a Gaussian bend that eases in and cascades from near threads to far. Original OGL fragment shader, DPR-clamped with a 1920px render cap, offscreen-paused, reduced-motion-safe.

ogl
Sunset

A vaporwave / retrowave sunset: a big banded retro sun (its lower half cut by thickening scanline gaps) sits on the horizon over a neon perspective grid receding across a dark reflective ocean, under a chrome gradient sky (magenta → indigo → cyan) with twinkling stars, a silhouetted mountain range, and the sun's wavering reflection on the water. Original OGL fragment shader with a passive grid scroll and breathing glow, screen-space-anti-aliased grid, exponential-toned, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglPro
Swell

Sprung wave lattice: depth-graded rows of smooth lines ride an orbital noise field with woven coherence while a slow autonomous swell front rolls through every ~8s. Cursor swipes inject velocity impulses along the travel direction, proportional to cursor speed, then spring home on damped Hooke springs with a tanh soft-clip on stretch. Deep-sea steel default. Canvas 2D, seeded, offscreen-paused, DPR-clamped with device-pixel-aligned strokes, reduced-motion-safe (crest frozen mid-roll).

canvas
Tempered

A scroll-scrubbed tempering shader: white-hot amber turbulence at the top of the page cools through ember red into blued violet-steel with oxidation bands — and scrolling back genuinely reheats. GSAP ScrollTrigger drives an original OGL fragment shader, with idle micro-motion, custom phase keyframes, and a static mid-temper frame under reduced motion.

oglPro
Torch

A volumetric cutting-torch beam: a single shaft of light stands anchored at a molten ground-contact bloom and fans upward into a soft amber column, with white-hot wisps rising inside it and volumetric fog falling through. The beam leans toward the pointer and the base carries a faint uneven-gas hum. An original OGL raymarched-quad fragment shader — DPR-clamped, offscreen-paused, with a steady rest-tilt frame under reduced motion.

oglPro
Trellis

A perspective-tilted wireframe sheet running a real wave simulation: pointer movement lays a wake of circular ripples that propagate outward, visibly interfere where wakes cross, and reflect off the edges; clicks drop a heavier stone, and a soft seeded rain keeps the sheet alive when idle. Wave slope bends the graphite wires and wave height lights the crests emerald with a bright-core-plus-halo glow. CPU wave grid streamed to the GPU each frame, fixed-timestep and frame-rate independent, DPR-clamped, offscreen-paused; reduced motion renders two frozen interfering ripples.

oglPro
Umbra

A dark veil: black-on-black volumetric drape of domain-warped ridged fbm where only the fold crests catch a whisper of light and a deep violet undertone breathes at a tenth of a hertz — luminance hard-capped so overlay text always wins. Original OGL fragment shader, time-dithered, offscreen-paused, reduced-motion-safe.

ogl
Warp

A jump-to-light-speed hyperspace background: layered star-streaks accelerate radially from a vanishing point, their length breathing with a slow warp surge, their heads fringed by real chromatic aberration and lit by a colored bloom, over a soft central glow and a faint twinkling starfield. The pointer steers the vanishing point. Original OGL fragment shader, tone-mapped, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

ogl
Amalgam

A wordmark cast in living liquid chrome: a glyph alpha mask shaded by an original OGL metal shader — domain-warped churn, thin specular bands over dark troughs, a fresnel-lit rim, a whisper of chromatic fringing, and one crisp highlight that sweeps the full mark every few seconds. Polished cool steel by default; tint reaches warm bronze/gold.

oglPro
Anneal

Text that resolves from a soft blur into sharp focus, staggered by word or character, when it scrolls into view. Falls back to a fade under reduced motion.

motion
Cipher

Characters churn through scrambled forge-rune glyphs before quenching into the final text, one at a time. Triggerable on mount, hover, or scroll into view; resolves instantly under reduced motion.

css
Cleave

Masked line, word, or character reveal that draws text clear of hiding as it scrolls into view, each segment trailing a soft white edge glow along its baseline.

gsap
Flux

A word slot that cycles by melting — the outgoing word sags through a bright white heat-blur while the incoming word solidifies from the same blur, with a hairline neutral underline that stretches to each new width like drawn wire.

motionPro
Fracture

Text glitches with classic red and cyan channel ghosts sheared apart by jump-cut clip-path slices, sparking at each shear line. Hover, continuous, or timed-interval triggers; freezes static under reduced motion.

css
Gild

A metallic light sweep crosses glyphs on a deliberate slow interval — a white core edged in refined champagne gold over a brushed-bronze base. Pure CSS, driven by an animated @property.

css
Magnetize

Variable-font text where each glyph swells in weight and gains a faint white glow as the cursor nears, under a steep gaussian falloff. Static mid-weight on touch and under reduced motion.

motionPro
Press

A variable-font pressure headline — the line behaves as a press bed under the cursor: glyph weight swells with a gaussian falloff while nearby letters rise and letter-spacing opens around the pressure point. Idle, the weight axis breathes almost imperceptibly. Pure rAF over font-variation-settings; real text in the DOM, static mid-weight under reduced motion.

css
Recast

A word that re-forms into a new one: shared letters slide along the baseline to their new home while unique letters iris in and out, then tighten a hair into their final kerning. Real selectable text, announced politely on change; swaps instantly under reduced motion.

motion
Sandcast

Headline cast in fine gold sand: the text is sampled into grains that scatter with velocity and curl under the cursor, then trickle back home with staggered springs and a settling drift.

canvasPro
Scree

A paragraph that holds its typographic line until triggered, then every word becomes a matter-js rigid body that drops, tumbles, collides, and piles at the floor — grab a fallen word and fling it. Highlight words carry the lone accent and settle atop the neutral heap.

canvasPro
Tally

A count-up number built from odometer-style digit drums that enter with a soft white-blue cast and settle to white as they seat, with a brief neutral underline flash on settle. Locale and currency aware via Intl.NumberFormat.

motion
Terminus

A split-flap departure board — a grid of matte charcoal tiles whose hinged flaps churn through the character ring and cascade diagonally to the message, each flap landing with a gravity overbite and a shadow cast on the lower half. Only changed tiles animate; optional synthesized flap sound.

motionPro
Typeset

Canvas ASCII renderer with amber-phosphor persistence: a headline (or a flowing noise field) redrawn as a weight-ramped glyph grid that pours in, shimmers, and brightens under the cursor.

canvasPro
Bevel

A glass-refraction surface card: backdrop-blurred glass with a multi-layer bevel edge, a slow glacial-cyan caustic drifting along the top rim, and a refracted offset highlight that slides with a subtle perspective tilt on hover. Pure CSS with eased custom-property transitions; static caustics and no tilt under reduced motion.

css
Casement

A list or grid of dark-glass cards that morph into a centered overlay via a genuine shared-element FLIP — media, title, and action travel continuously, radii stay unsheared, the frame overshoots ~1% and settles, and body copy fades up only after it lands. Full dialog semantics with focus trap, Escape, and outside-click; reduced motion swaps instantly.

motion
Decal

A matte label stuck to a dark surface that physically peels — hover lifts and curls a corner back to reveal a lit paper-grey underside with a cyan specular rim and a growing drop shadow, while grabbing deepens the peel, leans the sticker, and drags it with weight before it settles home. Faint adhesive glue-string filaments stretch and snap as it lifts; the peel origin is a 360° knob. Coarse pointers and reduced motion get a static half-peeled frame with drag disabled.

gsapPro
Dross

A pixel-dissolve card: on hover or click the surface divides into a grid of cells that dissolve away — each flashes white, shrinks and drifts up as a bright particle, with the odd seeded soft-white spark — then the second face condenses back from neutral smoke. Keyboard-operable, instant crossfade under reduced motion.

canvasPro
Facet

A pointer-tracked 3D tilt card with spring-damped rotation and a hard-edged white-silver glare streak that sweeps the surface like light across brushed metal. Tilt disables on touch and under reduced motion, leaving a static subtle glare.

motion
Filament

An animated conic-gradient border — a white-hot filament head trailing a cool silver-blue tail that desaturates and fades to a faint slate trace. Pure CSS @property animation, zero JS, zero dependencies.

css
Foundry Cipher

A scramble-reveal card: churning angular neutral glyphs on near-black, with a soft-edged diamond aperture that follows the cursor and resolves glyphs at its center to bright white. A static title sits on top regardless of hover, and keyboard focus opens the aperture dead-center.

canvasPro
Ingot Grid

A responsive bento layout primitive — IngotGrid and IngotCell compose column/row spans into magazine-style tiles with beveled borders that brighten on hover while sibling cells dim.

css
Kindle

A cursor-following radial spotlight card — a soft white glow that breathes gently and brightens the nearest border edge as it passes. Pure CSS, works with arbitrary children.

css
Plumbline

A physics ID badge on a lanyard: a verlet-simulated strap hangs from above, the charcoal card sways with gravity and an ambient breeze, and you can grab, drag, and fling it — it swings and settles with real momentum. Hand-rolled rope physics, offscreen-paused, reduced-motion-safe.

r3fPro
Reel

A draggable, throwable rail of media cards with momentum and detent snapping (transform-only) where off-center cards rest in a quiet duotone and the centered one blooms to full contrast. Clicking a card performs a genuine shared-element expand — media and title travel into a centered detail overlay with unbroken radii, then body copy fades up. Focus-trapped dialog with Escape, outside-click, and arrow-key rail nav; reduced motion snaps instantly.

motionPro
Voltaic

An electric turbulence border — the card's perimeter is a living arc: an SVG rounded-rect stroke deformed by animated procedural turbulence so it writhes, crackles on seeded reseeds, and periodically misfires and re-strikes, under a soft violet corona. Hover ramps the displacement. Throttled rAF that pauses offscreen; static softly-glowing border under reduced motion.

css
Chassis

A code-built browser or app-card window whose interior is a living dashboard instead of a screenshot: on scroll-in, skeleton shimmer bars resolve into real KPI tiles, a live sparkline strip, and activity rows — each panel snapping in with a one-frame brightness kiss, top-left to bottom-right — then quiet idle life keeps it breathing: the sparkline streams, a number re-rolls, a ghost cursor drifts in and clicks. Stage any children through the exported ChassisPanel boot wrapper.

motionPro
Gauge

A radial sweep gauge whose arc springs to its value with a calibrated overshoot-and-settle while the center count ticks up in lockstep. Continuous, segmented-tick, and half-speedometer variants; threshold crossings shift the hue over 300ms instead of snapping.

motion
Ledger

The atomic KPI stat card, animated in three beats: the value rolls up on odometer digit drums, the sparkline scores itself in, and the delta badge stamps down last with one crisp X-flip. Live updates re-roll only the digits that changed — a meter, not a poster.

motion
Mercator

A dotted world map as a live data surface: connection arcs launch with bright comet heads, land with a two-ring radar ripple, and dock event chips by hairline leader lines. Deterministic seeded dot grid (self-contained land bitmask), static events or live callback, chart-room palette. Canvas 2D, capped arc pool, offscreen-paused, reduced-motion-safe.

canvasPro
Orrery

A machined dotted interactive globe: deterministic ice-white land dots on a matte graphite sphere with a whisper of rim atmosphere. Drag it with heavy desk-globe momentum and the idle spin clutches back in slowly; connection arcs launch in seeded bursts, travel with comet heads, and land with surface pulses. Camera-facing marker labels, hero-edge camera offset, one cool arc accent. Original OGL implementation — instanced point dots, DPR-clamped, offscreen-paused, full GL teardown, reduced-motion-safe.

oglPro
Plotter

A self-drawing chart — line, area, or bar — that performs its data on scroll-in: axes and gridlines fade in first like ruled paper, lines trace left to right behind a bright pen tip with the gradient fill sweeping beneath, bars spring from the baseline and settle. Dataset changes morph the marks, and a tooltipTour mode walks an active tooltip across the points once after the draw.

motionPro
Scriber

A tiny inline sparkline — line, gradient area, or micro-bars — that scores itself in left to right with a bright cooling tip, and can stream live data from the right with a breathing endpoint dot. Pure SVG, no chart library, no axes.

css
Semaphore

The uptime bar, alive — labeled status-tracker rows that stack into an ops wall with a shared time axis. Boots with a sub-second left-to-right ignition cascade on first view, pulses the newest bucket, slides new buckets in on a live interval (suspended offscreen), and raises a hover chip with bucket detail. Statuses are shape-and-brightness coded, not just hue: dim operational, notched degraded, saturated glowing incident. Pure CSS animation, zero dependencies, visually-hidden textual summary per row, static wall under reduced motion.

css
Tote

A ranked bar race — the racetrack tote board. Rows that change rank physically slide past each other FLIP-style, the overtaker lifting over its neighbor with a soft shadow before seating flush; bars re-measure with a spring, values roll to their new numbers, and the leader's value carries a subtle brightness edge. Feed it frames and it plays the classic bar-chart race on an interval (suspended offscreen), politely announcing lead changes. Includes a segmented category-proportion variant.

motionPro
Wire

A self-looping activity feed for marketing heroes: entries land with one confident spring and a hairline flash that cools in 400ms, siblings shuffle down, and the oldest retires under an edge fade — all on seeded, jittered news-wire cadence. Decorative counterpart to dispatch; hover pauses the feed.

motion
Anvil

A magnetic button with the heft of forged iron — it leans toward the cursor with damped spring lag, snaps back elastically on exit, and presses like an anvil strike: sharp compression, slow spring recovery, hairline white flash at the base edge.

motionPro
Galvanize

An animated gradient border cycling silver to blue to violet, like electroplating in progress. Hover accelerates the rotation and thickens the ring by a pixel. Pure CSS via a masked conic gradient.

css
Piston

A stateful submit button that runs its async lifecycle like a piston stroke: label and spinner slide along one axis while the width breathes, a check draws itself on success, and rejection plays a shake-and-retry beat. Pass an async onClick and it owns the state machine — aria-busy, live announcements, and real disabling included.

motion
Plume

A celebration button: click it and a seeded plume of glowing sparks erupts upward, arcs out under gravity, and fades while the pill gives a satisfying squash-and-settle. Optionally latch into a success state with a settling checkmark. Seeded canvas particles torn down the instant they fade; under reduced motion the burst becomes a calm glow-and-check.

canvasPro
Quench

A click ripple that expands from the exact point of contact, like hot metal hitting water: a thin shockwave, a briefly desaturated cooled core, and ejected spark particles. Keyboard activation ripples from center.

motion
Ripple

A Material-style ink ripple that blooms from the exact point of contact, with a spring press-dip and rebound. Concurrent ripples stack; keyboard activation blooms from center.

motion
Sheen

A shimmer-sweep button. A white-silver light periodically crosses the face and brightens the rim, settling through a subtle neutral afterglow back to matte. Pure CSS, zero dependencies.

css
Weld

A light beam traveling the border in a continuous loop like a welding arc: a blinding white-hot head with a cool blue-white tail, corner sparks, and a fading heat discoloration. Pure CSS, corner-radius aware via offset-path.

css
Cinderfall

A cursor spark trail: stardust sheds off the pointer white, falls under gravity while dimming through silver to a transparent fade, and fast strokes throw proportionally more — with the occasional heavy spark that bounces once on an invisible floor. Scoped to its container by default, auto-disabled on coarse pointers and under reduced motion.

canvasPro
Eddy

A WebGL fluid-simulation cursor trail: pointer strokes inject ink into a curl-noise-advected flow field (ping-pong framebuffers) that swirls, marbles, and slowly dissipates, paling as it disperses. Deep ultramarine on a transparent canvas, scoped to its container, coarse-pointer- and reduced-motion-safe.

oglPro
Lantern

A spotlight cursor: wraps any content, dims the surface, and cuts a soft radial light that spring-follows the pointer to reveal what's beneath — ringed by a faint warm falloff and flaring brighter on press. Children stay interactive; settles to a static centered spotlight on touch pointers and under reduced motion.

motion
Reticle

A target-bracket cursor: four neutral corner brackets with bright white inner edges ride the pointer, then snap to frame any element matching a selector with an overshoot-then-bite clamp, a single white spark at each corner on contact, and a soft hairline frame while locked. Scoped or global, auto-disabled on coarse pointers.

motionPro
Slipstream

A spring-smoothed cursor follower: a soft bead of light that stretches into a teardrop at speed, brightening to white in motion and settling neutral at rest. Scoped to its container by default, opt into page-wide with `global`, auto-disabled on coarse pointers, and scales up over [data-cursor-target] elements.

motion
Wisp

A ribbon-trail cursor: a smooth, tapering comet ribbon chases the pointer with eased catch-up, fattening on fast strokes and thinning to nothing at the tail beneath a soft glowing head. Collapses gracefully and pauses when the pointer stops. Scoped to its container by default, auto-disabled on coarse pointers, and reduced to a quiet motion-free dot under reduced motion.

canvasPro
Millrace

An infinite marquee whose speed and skew react to scroll velocity, damped through a spring. Stamped outline text fills bright white past a velocity threshold.

motion
Rolling Mill

A scroll-scrubbed container rotator with a beveled slab face: a gunmetal plate starts tilted back in 3D perspective and rotates flat while scaling up as it scrolls through the viewport, header text traveling in coordinated motion, cool white edge-light glowing at max tilt and dimming upright, and a neutral reflection band sliding down the plate face with the angle.

motionPro
Runnel

A vertical tracing beam that draws itself along your content as the user scrolls, its white-to-blue-violet stroke tipped with a glowing white head.

gsap
Shingle

A scroll-pinned card stack: full-width cards slide up and seat at a fixed point with a 2px settle-and-lock, then pile into a receding deck as later cards pin over them — depth carried by cool desaturation, a hair of scale and a soft downward shadow, never color. Reverses cleanly and falls back to a plain legible list under reduced motion.

motion
Stratum

A scroll-linked vertical timeline: dated entries with sticky pinned titles, a progress beam that draws down the spine, and node dots that ignite with an escapement pop as the beam reaches them.

motion
Surface

A composable in-view reveal wrapper with fade/slide/scale/blur presets and staggered children. Default melt preset rises and sharpens with a soft white under-glow, like surfacing out of the dark.

motion
Billet

Content-shaped skeleton placeholder — matte graphite blocks crossed by a single cool-white light pass (heat-pass timing, not a conveyor). Card / text / circle / rect presets compose to prefigure any layout; @property-driven, zero dependencies, role=status + aria-busy, gentle opacity breathe under reduced motion.

css
Bitmap

Chunky 8-bit pixel loader — a hard-edged grid that fills cell-by-cell. Determinate bar (with a pulsing frontier) or an indeterminate marching band, plus a crisp bitmap-radar spinner that snaps cell-to-cell via steps(). Zero dependencies, SSR-safe, role=progressbar with aria-valuenow; collapses to a designed static frame under reduced motion.

css
Flywheel

Four machined CSS spinners — ring, dots-orbit, segmented, dual-ring — selected by variant. Conic-gradient comet head cooling to a blue-silver tail over a recessed groove; currentColor-driven, zero dependencies, lit resting frame under reduced motion.

css
Meniscus

A scroll-progress bar that reads as liquid filling a channel — a cool blue-to-white gradient with a white leading bead that glows while scrolling and settles to a solid neutral fill at 100%.

motion
Orbit

A cosmic orbital loader: electrons ride tilted elliptical rings around a white-hot, breathing nucleus, each on a seeded phase with a Keplerian-ish period and a soft comet trail. Counter-rotating planes cross like an atom; one cool accent by default, multicolor via colors. Parks at a lit static frame under reduced motion.

cssPro
Smelt

A staged multi-step loader: pending steps are cold gray stampings, the active step glows white under a shimmering underline, and completion quenches it into a checkmark stamped in a calm neutral — advancing on heavy mechanical detents.

motionPro
Aperture

A trigger button that irises open in place into a compact form — one continuous surface through invite, input, pending, and confirmation. Measured FLIP with radius continuity, fields fading up after the frame lands; while async onSubmit is in flight a thin conic arc sweeps the submit control, then the surface exhales into a confirmation chip and returns to rest. Real form semantics, full focus trap, Escape and outside-click reverse the morph, reduced-motion crossfades.

motionPro
Armature

Orbiting icon rings around a fixed center slot. Compose Armature + ArmatureRing for a multi-radius orbital system with per-ring speed, direction, and an optional eccentric elliptical ring. Pure CSS, pause-on-hover.

css
Atlas

Infinite pannable canvas — grab and throw a modulo-tiled grid of cards across an unbounded plane with weighted momentum, a faint coordinate grid that rises only while in motion, velocity parallax, and a soft edge vignette. Arrow-key panning and focusable tiles.

cssPro
Beacon

A dynamic-island status pill that fluidly morphs between size presets — a minimal indicator, a compact row, a wide media bar, and a tall card. Width, height, and corner radius are spring-coupled as one liquid shape that overshoots ~1% and beads down like mercury, while the content restacks in lockstep, the outgoing line sliding down and under the incoming. Sequenceable for guided flows, keyboard-expandable, and announced through an aria-live status region.

motionPro
Caliper

Before/after comparison slider that clips a leading layer with a draggable divider. Machinist's-caliper hairline with tick marks, a knurled grip, a live vernier readout, and a 50% detent. Accepts arbitrary children, keyboard-accessible, hover/drag/autoplay modes.

motion
Conduit

An animated beam connecting two DOM nodes via refs — a dark groove path carrying a blue-to-white slug of light that travels into the destination and flashes a white rim-glow on receipt. Curved, reversible, resize-aware.

motion
Dispatch

An imperatively-fired toast system: call toast() anywhere and one Toaster piles the results into a receding 3D stack — hover fans it to full rows, and each dismisses on timeout, click, or swipe-throw while the survivors exhale up one slot. Promise toasts morph the icon in place; a feed mode streams a masked column. role=status live regions, Escape-dismiss, reduced-motion-safe.

motionPro
Escapement

Ratcheting numeric stepper — digits roll with an overshoot-click spring settle, a brass pawl flicks on every step, and hold-to-repeat accelerates like a wound mechanism. Proper spinbutton semantics with arrow keys, Home/End, and live value announcement.

motion
Frieze

A calm, always-on brand marquee / logo cloud. Loops horizontally or vertically, reversible, with gradient edge-fade masks, a hairline baseline, an optional 3D-perspective tilt, and per-mark lift-on-hover. Pure CSS at constant velocity, pause-on-hover.

css
Hatch

Bottom sheet that closes by physics: pull the machined handle down and release past a distance or velocity threshold to dismiss along your throw, else it springs back. Scrim coupled to sheet position, logarithmic over-pull, critically-damped snap-back, focus-trapped and scroll-locked.

motion
Haze

A progressive blur edge — stacked backdrop-filter layers with overlapping mask gradients ramp content from sharp to fully blurred through a container or viewport edge, with an optional tint wash. The iOS-style depth idiom for scrolling lists, floating toolbars, and hero bottoms. Pure CSS, zero JS at runtime.

css
Loupe

Magnifier lens that turns any child — image, SVG, or subtree — into an inspectable surface. Spring-smoothed pointer follow or a pinned mode, a machined bezel with a velocity-driven specular arc, focus-blur on the surface behind, and full keyboard walking. Pure transform/clip compositing, zero canvas.

motion
Manifest

A ⌘K command palette: a spring-seated glass search box over a scrim with a fuzzy-filtered, keyboard-driven list of grouped commands and pages. A shared-layout pill slides between rows, matched substrings ignite to full contrast, and rows with children push a nested page in from the right. Full combobox a11y, focus trap, ⌘K/Ctrl-K toggle, and controlled open.

motionPro
Placard

An animated tooltip / hover-card that springs up on hover or focus. The dark-glass card follows the pointer with a subtle velocity-keyed 3D tilt, scales in from 90%, flips on collision, and carries a single cool accent hairline. Fully accessible — role=tooltip, focus + Escape/blur dismissal, aria-describedby wiring — and idle-silent until engaged; reduced motion falls back to an anchored fade.

motion
Sparks

A celebratory spark burst fired imperatively via ref: elongated white, silver, and pale-blue streaks fan outward, fall under gravity, and burn out bright-to-dark, with a fraction bouncing once. Pooled particles, auto-cleanup, offscreen-paused.

canvas
Telegraph

A self-contained terminal that types a scripted session on its own — macOS window chrome, command lines typing behind a cool prompt sigil with a blinking block caret, output blocks fading in whole, auto-sequenced on scroll-into-view. Real selectable text, single active-line rAF that pauses offscreen, fully static under reduced motion.

css
Vault

Dome-style circular drag gallery on a CSS 3D perspective ring — drag, throw, or scroll to spin with inertia and detent snapping while off-focus panels rest in museum duotone and the front panel blooms to full color. Arrow keys rotate; panels are focusable with announced captions.

gsapPro
Hopper

A file-upload dropzone over a faint coordinate grid: dragging a file over it lifts the zone and brightens the grid, and dropped files seat in as stacked cards showing name, size, and type — each removable by pointer or keyboard. Backed by a real hidden file input with type, size, and count validation; the zone opens the native picker on click, Enter, or Space.

motion
Passcode

A segmented one-time-code input: a row of single-character cells backed by real inputs. Typing seats each digit with a soft pop and advances focus, Backspace retreats, arrow keys move, and paste or SMS autofill distributes across cells. The focused empty cell shows an animated caret in an accent ring; a complete code flashes success and fires onComplete. Fully keyboard and screen-reader accessible with a mobile numeric keypad.

motion
Quorum

A segmented control: 2–5 options with a single shared-layout pill that springs behind the active choice while its label ignites to full contrast and a faint accent bloom pulses on settle. Real radio semantics — role=radiogroup/radio, roving tabindex, Arrow/Home/End keyboard, focus-visible. Controlled or uncontrolled. The pill snaps under reduced motion.

motion
Roster

A tag / multi-select input over a real <input>. Type and press Enter or comma to pop in a removable chip; an optional suggestion pool filters as you type into a keyboard-navigable listbox, with a duplicate guard and a live-region announcing every add and remove. Backspace on an empty field peels the last chip; chips are focusable and removable with Delete. Neutral with one cool accent; reduced motion adds and removes instantly.

motion
Winnow

A search input whose empty placeholder cycles (each sliding up as the next arrives), and whose typed text — on submit — rasterizes into fine grains that pour off left-to-right and blow away, clearing the field. A hairline underline fills in from center to one cool accent on focus. The submit is genuine; the vanish is decoration.

canvas

sections

View all
Assay FAQ

A disclosure-semantic FAQ accordion: measured height animation via motion, a hairline amber heat-line down the open item's left edge, and a plus indicator that rotates with a brief ember-glow on toggle. Arrow-key/Home/End focus movement between questions, one open at a time by default with an allowMultiple knob, instant open/close with no glow under reduced motion.

motionPro
Control Room

A live monitoring feature grid: a hairline-bordered 2×2 of living data vignettes — a giant odometer-rolling uptime stat, a self-drawing latency chart, a pulsing world map with landing arcs, and a scrolling activity feed — booting in a diagonal stagger from the headline stat, then settling to a low idle intensity. Composed from Tally, Plotter, Mercator, and Wire; panels accept custom children.

motionPro
Crucible CTA

The closing call-to-action band: headline and subhead over a contained, subtle Ember rise, an Anvil-struck primary CTA beside a quiet secondary link, and a one-shot Sparks burst fired the first time the band scrolls into view (IntersectionObserver, once, skipped under reduced motion). All copy and both effects are prop-controlled.

motionPro
Fold

A neutral-elegant FAQ accordion of soft stacked cards: the open row lifts a hair off the stack, its chevron spins up in one accent hue, and the answer unfolds by hinging down from the top edge over a measured height animation. Full disclosure semantics with aria-expanded/aria-controls, labelled region panels, and Up/Down/Home/End focus movement; single-open by default with a singleOpen knob; instant open/close with the open row resting lifted under reduced motion.

motion
Forge Hero

The flagship landing hero: logo + nav header, a gilded headline and subhead over the Molten shader pour, and an Anvil-struck primary CTA beside a quiet secondary link. Every content knob is a prop — the Forgewright copy is only the default — and the background node is fully swappable.

motionPro
Foundry Features

A bento features section: six feature cells with minimal forge-tool stroke icons laid out on the IngotGrid primitive with varied column spans, a Conduit beam flourish tracing push → pour in the lead cell, and staggered Surface melt reveals as cells scroll into view.

cssPro
Hallmarks

A trusted-by logo cloud section in three variants: a marquee belt composed from Frieze, a grid whose logos ignite from ghost to full contrast in a seeded stamp-landing scatter on scroll-in, and a relay row where one slot at a time plate-flips to a logo not currently shown. Marks sit grayscale and dimmed at rest, lift to full contrast on hover, and are height-normalized; eyebrow/heading framing included. Renders as a static full-contrast grid under reduced motion.

motionPro
Ingot Stats

A stats band stamped like a steel plate: four big tabular numerals counting up via Tally digit drums on scroll into view, hairline amber dividers between stats, quiet labels beneath, and subtle top/bottom plate borders. Responsive 2-up to 4-up row.

cssPro
Millstream Social

A social-proof section: testimonial quotes on quiet Kindle spotlight cards flowing through velocity-reactive Millrace marquees — two counter-flowing rows on desktop, one on mobile — pausing on hover, with a screen-reader-only static list so each quote is heard once and a static wrapped grid under reduced motion.

cssPro
Rostrum

An animated testimonials rotator: a fanned stack of portraits shuffles like a hand of cards as it advances — front full-colour, the ones behind cooled to a duotone — while the quote crossfades beside it with words annealing from blur to focus. Autoplays on an interval, pausing on hover, focus, hidden tab and offscreen, with previous/next buttons, dots, a play/pause toggle, arrow-key nav and a paused-only live region. Reduced motion swaps instantly and never autoplays.

motionPro
Smeltery Pricing

A three-tier pricing section: an accessible monthly/annual radiogroup toggle (annual = two months free) flips prices via Tally odometer drums, the featured tier is raised inside a Filament traveling-border card with a Sheen CTA, and quiet bordered cards carry the rest. Custom-priced tiers ignore the toggle. Stacks at 360px, three-up on desktop.

cssPro

templates

View all
Atelier

A monochrome-elegant portfolio one-pager: oversized editorial hero, an indexed selected-work list with a cursor-following gradient art panel, services strip, studio statement, and a magnetized contact footer — all props-driven with one brass accent.

motionPro
Auth

A split-screen sign-in / create-account template: a branded left panel (logo, an oversized value line, checkmarked highlights, and a soft WebGL gradient mesh) beside a centered card that toggles between Sign in and Create account. Labeled email + password fields with a reveal toggle, a genuine validating submit (email format + minimum length, a pending state, and an aria-live error slot), an OAuth / SSO row of generic providers, plus forgot-password and switch-mode links. One signature accent knob; the WebGL surface freezes and every reveal pins its resting pose under reduced motion; the brand panel hides below lg where a compact brand header sits above the full-width card.

oglPro
Blog

An editorial blog home template: a serif masthead with slim nav and a subscribe button, a two-column featured essay over graded cover art with an Anneal headline, a recent-posts grid of Kindle spotlight cards with topic chips and initials bylines, a browse-by-topic rail, a newsletter sign-up card, and a multi-column footer — every string a prop, one warm-terracotta accent knob.

motionPro
Codex

A developer-tool docs landing template: slim nav, Cipher-scrambled headline, copy-to-clipboard install pill, a fake terminal that types a query session line-by-line, Kindle quickstart cards, a numbers-forward feature strip, CTA band, and footer — every string a prop, one emerald accent knob.

motionPro
Dashboard

A dense, dark admin/analytics shell for a commerce back office: a collapsible sectioned icon-rail sidebar, a topbar with search, notifications, and user chip, a row of KPI stat cards with odometer count-ups, trend chips, and mini sparklines, a large seeded SVG area chart, a revenue-by-channel bar list, a recent-orders table, and an interactive tasks checklist — every string, series, and row rebrandable through props.

motionPro
Docs

A three-column documentation page template: a grouped left sidebar with the current page highlighted, a center article (breadcrumb, Anneal-revealed title, lead, and rich prose with headings, lists, note/tip/warning callouts, inline code, copyable fenced code blocks, and a self-typing Telegraph terminal), and a right on-this-page rail that scroll-spies the active heading. The rail hides at large-and-below and the sidebar collapses to a mobile disclosure — every string a prop, one cool indigo accent knob.

motionPro
Foundry

A complete one-page landing template: hero, stats, features, testimonials, pricing, FAQ, closing CTA, and footer assembled from the seven Crucible section blocks. Rebrand it entirely through props — every section's full API is exposed, and any section can be dropped.

motionPro
Personal

A warm, elegant personal home base: an intro hero with a monogram avatar and a live "now" line, a set of big tappable link rows, a "currently" highlight grid, a recent-writing list, and a magnetized contact footer — link-in-bio meets personal homepage, entirely props-driven with one warm accent.

motionPro
Portfolio

A full single-page portfolio landing template for a developer or designer: a striking hero (name, role, one-line pitch) over a soft WebGL gradient mesh, a selected-work grid of tilting Facet cards, a count-up metrics band, an about + skills section, a compact experience timeline, and a contact footer — every string a prop, one cool indigo accent knob, fully reduced-motion-safe.

oglPro
Pricing

A full premium-dark pricing page: eyebrow + headline + subhead header with a real keyboard-operable monthly/annual toggle that live-updates every price, a three-tier plan-card row with one accent-ringed most-popular card and per-tier feature checklists and CTAs, a grouped feature-comparison table with check/dash cells, an FAQ accordion composed from Fold, and a closing CTA band — every string, tier, comparison row, and FAQ a prop, one cool-indigo accent knob.

motionPro
Saas

A full SaaS / product landing page for the fictional observability platform "Kelvin": sticky nav, a hero over one soft WebGL mesh with an Anneal word-reveal subhead, a logo-cloud strip, a tilting Facet feature grid, a bento "how it works" section with faux telemetry art, a Tally count-up metrics band, a Rostrum testimonial rotator, a three-tier pricing teaser, a closing CTA band, and a multi-column footer — every string a prop, one cool azure accent knob, fully reduced-motion-safe.

oglPro
Switchboard

A dark, dense SaaS dashboard shell: collapsible icon-rail sidebar, topbar with search, notifications, and user chip, spotlight stat cards with odometer count-ups, a pure-CSS bar-chart panel with sliding range tabs, a recent-activity feed, and a services table — every region rebrandable through props.

motionPro
Brutal

A self-contained neo-brutalist theme preset — a flat white card with hard 3px black borders, a solid blur-free offset drop-shadow, chunky mono type, a loud accent block, a stat, a rotated corner sticker, and two buttons. Interactive blocks do the classic brutalist nudge toward their shadow on hover and press. A keyboard-operable radiogroup of accent swatches re-tokens the whole panel live; the palette is fully exposed via presets and colors. Pure CSS — reduced motion pins every block to its raised resting pose.

css
Editorial

A self-contained glossy-magazine theme preset — a single-column feature with a small-caps kicker and issue rule, a high-contrast serif display headline, an italic standfirst, a small-caps byline, a drop-cap opening, a hairline-barred pull-quote, and a pair of buttons, all breathing in generous whitespace with one disciplined ink accent. A keyboard-operable radiogroup of surface chips re-tokens the whole page live (warm Ivory, cool Slate, dim night-reading Ink); the only motion is a soft CSS color crossfade on switch, and reduced motion makes every swap instant and fully static.

cssPro
Gazette

A print / newspaper theme preset: a warm-newsprint editorial panel with a serif masthead, a red section kicker, folio rules, a spanning headline with an italic deck, a small-caps byline, justified body columns with column rules and a drop-cap, and a genuine halftone-dot photo. The switcher cycles editions, swapping content and paper tone (cream / gray / sepia) with a soft page crossfade. ARIA tablist over a tabpanel; reduced motion swaps instantly.

motionPro
Glass

A self-contained glassmorphism theme preset — a frosted, translucent panel with a white top-edge highlight, soft inner glow, and 1px light border floating over a soft, vibrant blurred gradient ground that shows through, with nested glass chips for layered depth. A keyboard-operable radiogroup of mood chips re-tints the ground and accents live (Aqua / Violet / Peach) while the frost stays; reduced motion pins the drifting orbs to a calm static frosted frame.

motionPro
Meridian

A day/night theme switch built as a miniature diorama: the sun sets and the moon rises along a shallow arc, the sky crossfades through dusk, clouds drift out, and stars ignite staggered once the moon seats. A real role=switch with keyboard toggle; controlled or uncontrolled.

motion
Mono

A self-contained Swiss-minimal theme preset — a stark black-and-white (or paper-and-ink) panel on a strict grid: tight neo-grotesque heading, numbered hairline spec rows, generous negative space, and exactly one restrained accent. A keyboard-operable radiogroup of accent swatches re-tokens the panel live and a role=switch flips light/dark; the palette is fully exposed via accents and colors. The only motion is an accent rule that draws across the top, pinned to its full frame under reduced motion.

motion
Neon

A self-contained cyberpunk theme preset: electric accents on near-black, thin CRT scanlines, condensed monospace type, and hard-edged HUD chrome with corner brackets. A seeded, subtle glitch tears the heading into a chromatic split, and a built-in radio switcher swaps the accent between yellow, cyan, and magenta. Reduced motion drops the glitch for a clean static HUD.

motionPro
Pastel

A self-contained soft-pastel theme preset — a generously rounded card with heading, body, stat, tag, and buttons in a low-contrast candy palette over a dreamy tinted gradient, with soft shadows, drifting color orbs, and optional grain. A keyboard-operable radiogroup of hue chips (Mint / Peach / Lavender / Sky) re-tokens the whole panel live; the orbs pin to a calm static pose under reduced motion.

motion
Phosphor

A themed panel styled as a monochrome CRT monitor: a dark vignetted screen with glowing selectable monospace text, fine scanlines, a slow refresh-bar roll, and a blinking block caret. The built-in switcher recoats the tube between amber, green, and paper-white phosphor. Pure CSS; reduced motion holds a steady glow.

css
Vice

A self-contained synthwave theme preset — card, buttons, stat, and tag in hot-magenta → cyan neon on deep indigo, with a sunset gradient, a scanlined sun rising over a perspective grid, and a chrome-italic display heading. A keyboard-operable radiogroup of vibe chips re-tokens the whole panel live; every glow pins to a bold static frame under reduced motion.

motion