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.
Letterpress image trail: pointer travel stamps a pile of proofs that land with a settle, a seeded tilt, a registration double and an ink-spread shadow, then fade and desaturate like aging paper. Clicks stack larger proofs, a seeded ghost path keeps printing when idle, and an imperative stamp(x, y) handle; reduced motion rests on a static corner pile.
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.
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; a dimmed ghost spotlight wanders the card when untouched.
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 (rapid presses stack). Children stay interactive; idles on its own when untouched, and settles to a static centered spotlight under reduced motion.
An interactive dot grid: cool-steel silver dots heat white → cyan as the cursor approaches, with a configurable falloff curve; a click or tap sends a hammer-strike shockwave ring through the grid. Pauses offscreen. Freezes to a static, gently lit frame under prefers-reduced-motion. Strikes stack, a `strike()` ref handle lands them programmatically, and a ghost pointer warms the grid when untouched.
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.
A floating pill navbar — a frosted near-black bar with a subtle white bottom hairline — that hides on scroll down and reveals on scroll up. Scroll-velocity aware, and never hides while any child has keyboard focus.
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; a ghost lens drifts over the surface when untouched.
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. Idles on its own when untouched — a ghost cursor tilts the blinds.
Integrations directory section block: searchable, Detent-filtered grid of seeded geometric app marks with badges and connected chips that re-flows on layout springs, a cursor-follow accent border glow, a featured hero row, and a detail sheet (side or bottom, focus-trapped) where a Conduit beam joins your app to the integration — async Connect carries light down the beam and morphs to Connected with a Disconnect ghost.
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%.
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.
An infinite marquee whose speed and skew react to scroll velocity, smoothed so it never jitters. Stamped outline text fills bright white past a velocity threshold; hover slows it to a crawl, it idles offscreen, and reduced motion freezes it to a static outline row.
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.
Streaming assistant message — each arriving word fades up into place behind a breathing caret, with paragraphs, bullet lists and inline code chips, plus a shimmering "Thinking" disclosure that springs closed to "Thought for Ns". Announces completed paragraphs politely; ships a seeded useScriptedStream hook for prototyping.
A reusable client harness for fullscreen fragment-shader backgrounds. Manages uTime/uResolution/uPointer uniforms, clamps DPR, pauses offscreen and on hidden tabs, freezes under reduced motion, and fully tears down WebGL on unmount.
Morphing flyout nav where one shared dark-glass panel slides and resizes between triggers instead of closing and reopening — an anticipation-stretch morph with a caret that tracks the active trigger and content that crossfades in from the direction of travel. Hover-intent grace, full disclosure semantics (focus opens, Escape closes, arrow keys move triggers), and instant repositioning under reduced motion.
Contact section that routes before it asks: topic chips (Sales / Support / Press / Other) reshape the form with layout animation — fields glide in and out, the submit label and expected-reply line change. Blur validation with a shake, async pending → drawn-check success or an inline error that keeps every value, plus channel cards with copy-to-clipboard and an office card with an abstract SVG street plate and pulsing pin.
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.
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.
Announcement bar + cookie consent. Pennant is a slim top bar that rotates short messages with a vertical slide (paused on hover/focus, hairline progress meter), rolls an odometer countdown to a deadline and collapses on a height spring when dismissed, remembered via storageKey. Consent is a non-modal cookie card that rises into a bottom corner (full-width bar under 640px) with Accept / Reject / Customize; Customize grows the same card into per-category switches with Necessary locked on, reports onDecision, persists choices and reopens via ref from a footer link.
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.
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.
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.
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; a ghost pointer keeps it moving when untouched.
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; a ghost pressure point sweeps the line when untouched.
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.
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.
A context-window / credits meter card: rolling digit headline over one segmented bar that splits usage by category, each slice springing to its width independently. Past the warn threshold the leading edge breathes an amber glow; past critical the headline turns amber and a note fades in. Optional cost line and reset countdown.
Hold-to-confirm button for destructive actions: pressing and holding (pointer or Space/Enter) advances a 24-tooth SVG ring tooth by tooth with a click-scale, releasing early ratchets it back down faster, and completion flashes the ring, morphs the icon into a check and fires onConfirm. Real button, aria-describedby hold hint, polite live announcement, stepped-opacity fill under reduced motion.
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.
Tool-call card for agent UIs — a status glyph spins an accent arc while running, closes into a drawn check on success or a rust shake on error, with a ticking elapsed timer and expandable tinted-JSON input/output. RelayGroup chains calls along a progress spine that fills as each completes.
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, faint star field, and an optional neon outrun car cruising on the grid; the horizon light leans toward the cursor. Original OGL fragment shader, offscreen-paused and reduced-motion-safe; a ghost pointer keeps it moving when untouched.
Settings page block: schema-driven sections with a sliding section nav (tabs or scroll-spy), validated inputs, a counted bio, avatar uploader, spring switches, theme radio cards and Quorum segmented controls. Any change slides up a dirty-state save bar — async onSave drives pending, error and a fading Saved chip; Reset springs every field back. Danger zone actions use Ratchet hold-to-confirm.
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.
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.
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.
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. Idles on its own when untouched — a ghost touch billows the cloth.
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.
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.
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.
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.
Structured filter bar for any list or table: a + Filter popover that slides property → operator → value (type-ahead fields, per-type operators, checkbox listbox, number range, and a range-selecting month calendar with presets), spring-in chips you edit in place part by part, an and/or toggle, saved views that crossfade chip sets with inline Save view, Clear all, and a result count rolling on Tally drums. Controlled or uncontrolled, keyboard-first (F, arrows, Backspace), with a pure applyFilters() helper to drive your rows.
A pinned scroll section where an inline media card grows to full-bleed through a shaped SVG aperture (rounded, circle, pill or any custom path) — corners relax to square, a scrim rises, and the caption rides the aperture's edge before settling as an overlay. Reduced motion skips the pin for a static crossfade.
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.
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`, never follows coarse pointers, scales up over [data-cursor-target] elements, and idles on its own when untouched.
Prompt composer for chat UIs — an auto-growing textarea in a glass capsule with spring-in attachment chips, an optional model pill, and a send disc that morphs into a stop button while a light laps the border during generation. Enter/Shift+Enter/Escape, IME-safe, file paste, and labelled controls.
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.