Animated React components with real heat: 100+ free, MIT-licensed WebGL and canvas backgrounds, text effects, cards, data viz, and AI chat UI. TypeScript, Tailwind v4, reduced-motion safe.
Changelog section block: release entries on a scroll-linked spine with sticky version and date, change items grouped into colored New / Improved / Fixed / Deprecated chips, procedural screenshot plates and a collapsible "Show N more changes". Multi-select kind filters collapse non-matching items with height animation, search highlights matches with <mark>, the newest release wears a single-pulse Latest badge, and a Subscribe button morphs into an inline email field with async pending/success/error states.
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.
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. Clicks stack (up to three queued strikes, still cooldown-clamped), a `strike()` ref handle calls bolts programmatically, and a ghost click idles the storm when untouched.
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.
SVG gas-discharge tube lettering — ignition travels along each glyph's tube with a seeded strike flicker, then holds with a faint mains hum; the letter under the pointer destabilises. Neon, argon and mercury presets; fully lit and steady under reduced motion.
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.
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; a ghost light idles across the glass when untouched.
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.
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.
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.
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.
Floating action button that springs open an arc of glass bubble actions — buoyant overshoot with a bottom-up stagger, asynchronous idle bob, liquid squash on toggle, and a single coral accent on the active bubble. Full menu-button keyboard support with Escape to close.
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.
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.
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.
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.
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.
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.
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.
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; the pointer core idles on its own when untouched.
Scripted multiplayer cursors over any content: named pointers glide on curved, slightly overshooting springs to percent or [data-cohort] targets, then click with ripples, drag selections, type comment bubbles and float emoji reactions — concurrently and on loop. Pauses politely when a real pointer enters, sleeps offscreen, and parks at first targets under reduced motion.
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.
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).
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.
A classic aurora: draping vertical light curtains fold and sway with height, threaded with shimmering ray filaments over a faint twinkling starfield, in teal, violet, and ice blue. The curtains lean gently toward the pointer. Original OGL fragment shader, offscreen-paused and reduced-motion-safe; the curtains idle on their own when untouched.
Animated tabs with a shared-layout sliding pill indicator that flashes white as it lands and rests as a neutral pill with a subtle top hairline. Full roving-tabindex keyboard support with arrow keys, Home/End, and correct tablist/tab/tabpanel roles.
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.
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.
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.
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.
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; a ghost light idles the tilt when untouched.
Empty-state block with five presets (no results, first run, error, offline, inbox zero) and a custom mode. Each preset has an original 1.5px line illustration with one accent detail and a three-cycle idle loop, plus title, description, primary action, secondary link, suggestion chips and an async retry button that runs pending to success.
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.
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; the field idles on its own when untouched.
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.
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.
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.
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.
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.
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.
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.
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.
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.
About & team section block: a mission statement with an oversized stat row rolling in on Tally digit drums, a team grid of seeded generative portraits that rest as an accent duotone and warm to full color on hover or focus with a slide-up bio panel, a Detent department filter that re-flows the grid with layout springs, and a numbered values list whose rules draw in.
Text flowing along an SVG path on a seamless loop — circle, wave, figure-eight, arc or a custom path. Scroll velocity boosts or flips the drift, drag scrubs it with inertia, arrow keys fling it, and an intro draws the path in before the text unveils along it. Static under reduced motion.
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.
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.
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.