Capture
Every signal from your stack lands in one replayable timeline.
Real-time ingest
88 components · free
Components
Animated, accessible React components. Install with the shadcn CLI and the source lands in your project — rename it, restyle it, retime it. It's yours.
88 / 88
Shimmer Button
A pill button with a conic-gradient highlight that travels around the border. Self-contained, themeable via props, disables motion under prefers-reduced-motion.
Velocity Marquee
An infinite marquee that accelerates with the page's scroll velocity and eases back to a base speed. Seamless two-track loop, rAF-driven, frozen under reduced-motion.
Kinetic Text
Reveals text word- or char-by-char with a spring rise-and-mask as it scrolls into view. Static, fully legible fallback under reduced-motion.
Magnetic Dock
A macOS-style dock whose items magnify with cursor proximity, spring-smoothed. Keyboard focusable; magnify disabled under reduced-motion.
Aurora Background
A GPU-cheap animated aurora of drifting radial-gradient bands with optional grain. Fills its container behind content; freezes under reduced-motion.
Dot Matrix Loader
A matrix of dots choreographed purely by per-dot animation-delay math — seven variants: diagonal wave, orbit beam, boustrophedon snake, radial pulse, cascading rain, scanline sweep, and outward spiral. Accessible busy status; holds at mid-opacity under reduced-motion.
Magnet Lines
A grid of bars that rotate to point at the cursor like iron filings around a magnet. Pointer-driven, no rAF loop; holds base angle under reduced-motion.
Dither Aurora
“Prism Drift” — a WebGL ordered-dither aurora: value noise domain-warped into a slow flow, mapped onto a three-stop gradient, then quantised through a 4×4 Bayer matrix so it renders as a visible pixel lattice, not banding. Pointer parallax is spring-smoothed; renders one static frame under reduced-motion.
Liquid Metal Button
A pill button ringed by a live WebGL liquid-metal shader — chromatic, silver, or gold reflections that intensify on hover. Polymorphic like Shimmer Button; the shader freezes to a single static frame under reduced-motion.
Dynamic Island
An iOS-style black pill that spring-morphs between a compact idle pill, an expanded card, and a circular ring state, with layout-animated size and corner-radius. Works controlled or uncontrolled; collapsed it is a button (Enter/Space expand), expanded it is a dialog that Escape, its close control, or an outside click collapses, with focus handed to the panel on open and back on close. Under prefers-reduced-motion the morph is skipped and states switch instantly.
Expandable Card
A card that spring-expands in place to reveal a body whose children fade and slide in with a slight stagger, while siblings in a grid stay put. Works controlled or uncontrolled with full button/aria-expanded keyboard semantics, and expands or collapses instantly under prefers-reduced-motion.
Logo Carousel
A wall of N columns whose tiles flip through a shared pool of logos with a staggered vertical rotateX + y + fade swap — a single clock advances exactly one column per tick so two tiles never swap at once. Logos sit grayscale at 70% opacity and bloom to full colour on hover; under prefers-reduced-motion it collapses to a static grid of the first N logos with no cycling.
Gravity Dots
A canvas dot-grid field the cursor bends — dots within range are pulled in (or repelled) and spring home with damped overshoot, smearing into capsules while they move. Sleeps when settled, offscreen, or tab-hidden; renders a static grid under reduced motion.
Gradient Heading
A polymorphic heading (h1–h6/p) whose text is painted with a background-clipped brand gradient in three variants and four sizes. When motion is allowed the gradient drifts on a slow ~8s ease-in-out loop; under prefers-reduced-motion or animate={false} it renders a legible static gradient with edge-defining shadow.
Revenue Chart
A hand-rolled SVG area chart with a smooth monotone-cubic curve, gradient fill, and a stroke-draw + fill-fade mount animation; a crosshair tooltip snaps to the nearest point on hover or arrow-key scrub. Renders complete with no draw-in under reduced-motion.
Transaction List
A dashboard transaction-list block: colour-seeded initial discs, mono reference ids, tabular-nums amounts (negative red-ish / positive green-ish), and dotted completed/pending/failed status chips. Rows stagger-fade-in on mount with a spring and raise their background on hover; under reduced motion the stagger is dropped, rows render instantly, and the pending dot stops pulsing.
Device Frame
Pure-CSS device mockups that clip children into a browser window (traffic lights, address bar, optional tab strip) or a phone (dynamic-island notch, side buttons, screen inner shadow). Hairline edges stay crisp in light and dark, and the phone scales proportionally at any width via container-query units. Fully static — no animation, so nothing to disable under reduced motion.
Sign-In Slice
A complete drop-in sign-in card: spring floating-label email input, a continue button that runs an inline progress sheen then morphs into a drawn success check + "Check your inbox" panel, OAuth-style buttons, and mono fine print. Real form/label/aria-live semantics; shake, sheen, and springs drop to instant swaps under reduced-motion.
Sticky Scroll Cards
A scroll-driven card stack: each card pins at a sticky offset while the next scrolls over it, receding with a slight scale-down, dim, and blur driven by per-card useScroll/useTransform against ordinary page scroll (no hijack). Under prefers-reduced-motion the depth transforms are dropped and cards render as a plain, static, legible stack.
Split Flap
A Solari-board split-flap text display: mono ink cells riffle through a character set with a 3D half-flap (CSS perspective + rotateX) and settle left-to-right, animating whenever the text prop changes. Under prefers-reduced-motion it renders the final text instantly with no flips.
Eye Tracking
A set of cartoon oval eyes whose pupils chase the pointer anywhere in the viewport — spring-smoothed and geometrically clamped inside each eye — with an occasional natural blink that pauses during fast pointer flicks. Under prefers-reduced-motion the pupils rest centered and the blink is disabled.
Shift Card
A layered card whose front face (title + label) slides and fades up on hover or focus to reveal a detail layer beneath (body + CTA), while the whole card takes a spring-smoothed parallax tilt toward the pointer and a cursor-tracking accent glow. Renders as a link when given an href, reveals fully on keyboard focus-within with a focus-visible ring, and under prefers-reduced-motion drops the tilt and slide for a plain opacity cross-fade.
Notification Stack
An iOS-lockscreen notification pile: cards stack behind the top one with a slight y-offset and scale falloff, new items spring in from the top and dismissed ones swipe/fade out, and tapping the top card fans the stack into a full list and back. Under prefers-reduced-motion it degrades to a plain, static, fully-legible list with no stack transforms, drag, or springs.
Animated Grid
A hero backdrop of hairline grid cells with a soft radial spotlight that tracks the pointer via CSS variables (no per-cell React state), plus an optional deterministic ambient cell pulse; under prefers-reduced-motion it renders a static grid with a single centered glow.
Text Scramble
Resolves a string out of random glyphs left-to-right, each character flickering through a short scramble tail before it locks and settles from a brand accent to the inherited color. Triggers on view, mount, or hover; renders the final text statically under reduced-motion.
Text Highlighter
An inline highlighter that sweeps a marker band, drawn underline, or framed box across text left-to-right as it scrolls into view. Wraps naturally across lines and keeps the glyphs fully legible throughout; under prefers-reduced-motion the highlight is shown complete with no sweep.
Animated Input
A text field with a spring floating label that rises on focus/fill, a centre-drawn accent underline, an optional tinting leading icon, and typed feedback — an error string shakes the field once, paints a live-announced red hint and sets aria-invalid, while success draws a check tick; controlled or uncontrolled with real label/id/aria-describedby wiring. Under prefers-reduced-motion every transition collapses to an instant, legible state (no shake, draw, or float tween) and the focus ring uses :focus-visible.
Pricing Table
A three-tier pricing block whose keyboard-operable monthly/yearly switch spring-tweens every price and lights a save badge computed from the largest annual discount; the popular tier gets an accent border, a softly pulsing glow, and a wide-screen scale-up. Under prefers-reduced-motion prices snap instantly, the knob jumps, and the glow holds a single static frame.
'%20opacity%3D'0.92'%2F%3E%3Ccircle%20cx%3D'610'%20cy%3D'120'%20r%3D'150'%20fill%3D'%2322d3ee'%20opacity%3D'0.35'%2F%3E%3Ccircle%20cx%3D'170'%20cy%3D'360'%20r%3D'120'%20fill%3D'%238b5cf6'%20opacity%3D'0.45'%2F%3E%3C%2Fsvg%3E)
Image Reveal
A scroll-triggered curtain wipe that uncovers an image via an animating clip-path inset, a 1.1→1 overscan, and a single diagonal sheen sweep, fired once on scroll-into-view. Under prefers-reduced-motion the image is shown immediately at full size with no wipe, scale, or sheen.
Cursor Image Trail
A hover region that leaves a trail of images chasing the cursor — images from a pool pop in at pointer positions (throttled by distance) and fade/scale out a moment later, driven by a single rAF loop over a recycled pool of nodes with zero per-frame React state. Under prefers-reduced-motion the trail is disabled entirely and only the children render.
Drag Scroll Gallery
A horizontal rail you drag, flick, or wheel to scroll, with hand-written inertia, rubber-band ends, and optional flick-to-snap; items scale, tilt, and fade by distance from centre. Keyboard-navigable with role=list and focusable items, and under prefers-reduced-motion it degrades to a plain overflow-x scroller with CSS scroll-snap — no inertia or scaling.
Rich Tooltip
A Vercel-style rich tooltip that springs open from its trigger with a scale + fade and a real arrow, holding arbitrary ReactNode content rather than a bare string. Placement is computed by hand (no positioning lib) — measuring trigger and tooltip to auto-flip top⇄bottom / left⇄right on viewport overflow and clamp the cross axis — and it renders through a portal to document.body so ancestor overflow never clips it. Hover and focus open it with small delays, moving into the tooltip keeps it open, and Escape closes; under prefers-reduced-motion the show/hide is instant with no scale.
Token Swap Card
A demo-grade crypto swap card with two token fields (searchable keyboard-driven picker + amount input) whose amounts derive from the USD price ratio, a center button that flips 180° and swaps the sides on a spring, a live rate line, and a Swap button that runs an inline pending → done animation. The flip, card cross, and spinner drop to instant state swaps under prefers-reduced-motion.
Hover Member Row
A team roster where pointing at or keyboard-focusing a row lifts it into a rich preview — the avatar swells, an accent bar draws down the left edge, the role and bio slide open, a corner arrow eases in, and the other rows dim back. Hover and focus drive identical state (pointer wins ties); each row is a real anchor or button carrying a full aria-label so the reveal never gates assistive tech. Under prefers-reduced-motion every transform is dropped and the preview simply cross-fades in via opacity.
Family Drawer
A bottom sheet that springs up from the edge and morphs its height through a family of steps: swap the children (with an optional contentKey) and it measures the incoming content, springs the panel to fit, and cross-fades the step swap, while a grabber handle drags the sheet down to dismiss (velocity-aware). Fully modal — focus trap and return, body scroll lock, Escape and backdrop to close; under prefers-reduced-motion the height morph, slide-up, and drag physics are dropped for an instant, legible show/hide.
Progress Ring
A circular SVG progress ring whose rounded-cap gradient arc (violet → fuchsia) sweeps to its value by transitioning stroke-dashoffset in pure CSS over a dim track, with a centred percentage or custom label and real progressbar/aria-value semantics. Under prefers-reduced-motion the sweep is disabled and the ring draws statically at its final value.
Stat Card
A dashboard KPI tile whose tabular-nums value counts up from zero when scrolled into view, with a signed delta chip and an optional inline sparkline.
Animated Counter
A number that rolls to its value odometer-style — each digit column slides vertically to its target through the digits between, with tabular-nums so the width never jitters.
Avatar Stack
An overlapping avatar group: hovering or focusing an avatar lifts it and reveals a name tooltip while neighbours part slightly; extras collapse into a “+N” chip and images fall back to deterministic colored initials. Under reduced-motion the lift and parting are dropped; the tooltip still appears.
Texture Button
A tactile button built from stacked surface layers — a gradient face, inlined grayscale noise grain, a soft top-inner sheen, and a composed inset+drop shadow that sinks on press — in accent, surface, and glass variants. The press transform is dropped under prefers-reduced-motion while the pressed colour/shadow still fires, and the focus-visible ring is an outline sitting outside the button.
Border Beam
Wraps content in a card whose rounded border is traced by a glowing violet-to-fuchsia comet, built from a mask-composite ring and a CSS Motion Path beam. Under prefers-reduced-motion the comet is dropped and the ring falls back to a static, legible gradient border.
Intro Disclosure
A first-run onboarding sequence: a stepped dialog card with title, body, optional media, Back/Next, a clickable progress-dots row, and Skip, where steps cross-fade and slide in the travel direction while the card height springs to fit the incoming content. It is a real role="dialog" with focus trap, Escape-to-skip, and focus return; under prefers-reduced-motion the slide, blur, and height morph are dropped and steps swap instantly.
Tweet Grid
A masonry-ish testimonial wall of tweet cards that fade and rise into view with a staggered column cascade and lift on hover, built on pure CSS multi-column layout that steps down responsively while keeping screen-reader reading order. Under prefers-reduced-motion the grid is fully static — no stagger, hover lift, or sheen — with every card legible at rest.
AI Input
A polished AI chat composer: an auto-growing textarea, a leading model/attach control row, an empty-disabled send button that swaps to a brief pending spinner on submit, a soft focus glow, and empty-state suggestion chips that fill the field on click (Enter sends, Shift+Enter newlines). Under prefers-reduced-motion the glow pulse, spinner rotation, and chip/icon transitions resolve to instant, legible static states.
Peek Carousel
An Apple-style peek carousel where the active slide springs to center at full scale while the previous/next slides peek in at the edges, scaled to ~0.86 and dimmed; navigate by arrows, dots, drag (with velocity-projected snap), or wheel. Under prefers-reduced-motion it degrades to a plain CSS scroll-snap scroller with no scaling or inertia, keeping the same arrows, dots, keyboard, and labelling.
Parallax Hero
A layered parallax hero where a gradient backdrop, floating accent shapes, optional mid-ground layers, and the copy slot each drift on their own depth plane from spring-smoothed pointer input, tilting a few degrees in 3D for a diorama feel; under prefers-reduced-motion the parallax and shape drift are disabled, leaving a static, legible composition.
ASCII Render
A live ASCII-art field: two drifting noise octaves are sampled per cell and mapped through a brightness ramp into a monospace grid, with an optional pointer ripple. A single rAF loop pauses off-screen; the first frame is deterministic so SSR agrees, and under reduced-motion that one static frame is all that renders.
Mega Navbar
A sticky, translucent top bar with an Apple-style mega-menu: hovering or keyboard-focusing a top item springs open a rich dropdown of link columns while a shared background pill glides between active items via a Motion layout animation. Collapses to a hamburger disclosure with an accordion on mobile; under prefers-reduced-motion the pill snaps instead of gliding and the sheet opens/closes instantly.
Scroll Text Reveal
A block of copy that illuminates word-by-word as it scrolls through the viewport — a reading highlighter driven by useScroll, each word cross-fading from muted to foreground over its own slice of scroll progress. The animated layer is aria-hidden with an intact screen-reader copy; under prefers-reduced-motion every word renders fully lit with no scroll mapping.
Command Palette
A self-written ⌘K command palette (no cmdk): a body-portalled modal that substring/subsequence-filters grouped commands, with wrapping arrow-key navigation, Enter to run, focus trap and return, body-scroll lock, and a spring scale-and-fade entrance. Under prefers-reduced-motion every transition is instant and the ambient brand sheen holds still.
Activity Feed
A vertical activity timeline: markers on a mask-faded gradient rail, each with an actor, a highlighted action target, a relative timestamp, and optional detail; rows stagger-fade in on mount and the newest carries a soft live pulse. Under prefers-reduced-motion the feed paints once, fully legible, with no stagger, rail-draw, or pulse.
File Drop
A demo drag-and-drop dropzone (no real upload) that highlights and lifts its icon on drag-over, accepts drop or click/keyboard browse via a real hidden file input, then lists chosen files as chips with a type icon, size, a fake ease-out progress bar, and a remove button; oversize files are rejected with a shake. Under prefers-reduced-motion it drops the scale, shake, and shimmer and jumps progress straight to done.
Liquid Blobs
A gooey metaball hero backdrop: soft radial blobs drift on slow sine orbits and lean gently toward the pointer, fusing like liquid where they overlap via the SVG gooey-filter trick (a wide feGaussianBlur plus an alpha-contrast feColorMatrix). A single rAF loop writes GPU-only translate/scale, the blur radius tracks the container so the goo reads the same at any size, and an IntersectionObserver idles it off-screen; under prefers-reduced-motion the blobs settle into a static, still-merged arrangement with no drift.
Hero Section
A complete marketing hero block — mono uppercase eyebrow, tracking-tight headline with one gradient-accented word, subcopy, primary/secondary CTA pair, and a mono stats row — that spring-staggers in on mount over two blurred radial glows drifting on slow keyframe orbits; under prefers-reduced-motion the content reveals instantly with no stagger and the glows hold a static frame.
Feature Bento
A bento-grid feature section whose cells span mixed footprints (wide, tall, 2x2) on a dense responsive grid, fade-rise into view with a per-cell stagger, and wake a soft accent glow that trails the pointer — written straight to CSS variables with one pointermove listener per cell and zero per-frame React state — while the border brightens on hover. Under prefers-reduced-motion the section is fully static: no stagger, no glow tracking, and the icon halo holds a single legible frame.
Testimonial Marquee
A wall of testimonial rows scrolling infinitely in alternating directions via a seamless two-half translateX(-50%) loop; hovering a row or tabbing onto any card pauses just that row, short rows are tiled with aria-hidden passes so the track always outruns the viewport, and cards fall back to a brand-accent initials disc when no avatar is given. Under prefers-reduced-motion it collapses to a static wrapped grid with no scroll and no duplicates.
CTA Banner
A closing call-to-action band: an ink panel with a slow aurora gradient sweep, faint edge-masked dotted grid, and a glow that pulses behind the primary button — with an optional gradient-highlighted accent word.
FAQ Accordion
An FAQ section whose question rows spring-expand to reveal answers — the panel height morphs while content fades and lifts, and a plus icon rotates into an ×. Single mode collapses siblings; multiple lets several stay open. Every row is a real button with aria-expanded/controls, answers are labelled regions, and Up/Down/Home/End rove between questions. Under reduced-motion panels open and close instantly.
Stats Band
A horizontal strip of headline numbers that count up on scroll-in with mono captions, hairline dividers, and per-stat prefix/suffix/decimals.
Section Dots
A scroll-spy side rail whose active dot stretches into a labelled pill, tracking the section in view with IntersectionObserver and smooth-scrolling on click.
Squircle
An Apple-style superellipse (squircle) mask that clips any content to a true Lamé-curve silhouette, with an optional constant-width outline.
Gooey Toggle
A segmented radio toggle whose active pill travels between options with a gooey liquid stretch, rendered through an SVG goo filter with a snappy leader and a softer follower spring.
Wallet Stack
A Family-wallet-style deck of gradient credit-card faces; click or press Enter/Space to spring the front card up and tuck it to the back while the rest advance.
Theme Toggle
An animated sun ⇄ moon theme button: a masking circle slides in to bite the sun into a crescent while rays retract and stars twinkle in — CSS-only, controlled or uncontrolled, SSR-safe.
Spotlight Card
A surface lit by a pointer-following spotlight — a soft radial face wash plus a mask-composited border-glow ring, both tracked through CSS custom properties written on pointermove so nothing re-renders per frame.
Compare Slider
A before/after reveal with a draggable vertical divider, click-to-jump track, and a full-keyboard ARIA slider grip; panels accept image descriptors or arbitrary nodes.
Morph Tabs
Animated WAI-ARIA tabs whose shared pill/underline indicator springs between triggers while panels cross-fade and slide in the travel direction.
Orbit Icons
A centerpiece encircled by concentric dashed rings of evenly-spaced icon chips that revolve continuously while staying upright.
Balloon Burst
A success-moment balloon release: call release() via useBalloons (or bump a controlled trigger prop) and a burst of brand-coloured balloons rises with sway, tilt, string tails, and a fade near the top from a deterministic seeded layout, then self-cleans. Decorative, non-blocking overlay; under prefers-reduced-motion it shows a single brief static cluster fade with no motion.
Matrix Rain
The falling-glyph "digital rain" on a single canvas: monospace columns cascade downward with a bright white head, a coloured glow, a power-curve fading trail, and glyphs that mutate as they fall — all driven by one DPR-capped rAF loop that rebuilds on resize and idles off-screen via IntersectionObserver. Layout and the opening frame come from a fixed-seed PRNG so the first client frame is deterministic; under prefers-reduced-motion it paints a single dim static frame with no fall, and the aria-hidden canvas sits behind children on a z-10 layer.
Pixel Canvas
A single-canvas grid of pixels that ripples to life on hover or focus — pixels grow in size and opacity staggered by their distance from the cursor, then settle back when the pointer leaves or focus moves away. Colours and jitter come from a pure per-cell hash (SSR-safe, no render-time randomness); a lone rAF loop runs only while pixels move and idles off-screen. Under prefers-reduced-motion it paints a static faint pixel field once and skips every ripple.
Orbit Card Stack
A draggable card deck (testimonials, photos, prompts): the top card can be flung left or right to spring it off-screen and orbit to the back, while prev/next buttons and the arrow keys advance and rewind through a depth-stacked pile. Exposes real carousel semantics with a polite live region and one exposed slide at a time; under prefers-reduced-motion it reorders instantly with no drag or throw physics.
Family Button
A compact circular button that spring-morphs (Motion layout) into a rounded toolbar of icon-and-label actions unfurling up, down, left, or right, with real disclosure semantics, Escape/outside-click close, focus management, and Arrow/Home/End roving; under reduced motion it expands and collapses instantly as a static, legible control.
Morph Surface
A container that morphs in place between a compact chip and a rich panel — a single Motion layout element springs its size and corner radius while the two content states cross-fade (AnimatePresence popLayout), with a close affordance, Escape-to-collapse, and managed focus. Controlled or uncontrolled via expanded/defaultExpanded/onExpandedChange. Under prefers-reduced-motion it swaps instantly with no size, radius, or cross-fade animation.
AI Chat
A presentational AI-chat block: a scrollable user/assistant transcript with avatars and timestamps, an animated typing-dots indicator, and an auto-growing composer that streams a canned reply in character-chunks (Enter sends, Shift+Enter newline). Respects prefers-reduced-motion by dropping the dot bounce and caret and appending replies whole with no character stream.
Multi-Step Form
A guided wizard block: a numbered role=progressbar header whose gradient fill springs along the track as you advance, step panels that cross-fade and slide in the travel direction while the panel height morphs to fit, and validation-gated Back/Next with a submit step that fires onComplete. Announces each step change through a polite live region and moves focus to the incoming heading; under prefers-reduced-motion steps swap instantly and the bar fills without transition.
Bar Chart
A dependency-free SVG bar-chart block: gradient-filled vertical bars grow from the zero baseline with a staggered scaleY draw-in, plus an optional slimmer overlay series, mono gridlines/axis ticks, and a header total. Pointer or arrow-key focus highlights a bar and pops a value tooltip while others dim; under prefers-reduced-motion the bars render at full height with no draw-in.
Donut Chart
A hand-rolled SVG donut/ring chart whose slices sweep in clockwise on mount and lift on hover or legend focus, showing that slice's share in the center; the keyboard-operable legend pins a slice, and prefers-reduced-motion paints the full ring instantly with no sweep or lift.
Calendar Heatmap
A GitHub-style contributions heatmap, hand-rolled as SVG with no charting deps: weeks-as-columns day-grid colored by a 5-bucket violet intensity ramp, month/weekday labels, and a hover- or arrow-key-driven tooltip announced via aria-live. Cells pop in with a diagonal (col+row) stagger that is dropped under prefers-reduced-motion, where every cell renders fully visible.
Kanban Board
A drag-and-drop task board (no DnD deps): pointer-drag cards to reorder within a column or move across columns, with a pointer-tracking overlay, a dashed placeholder gap, Motion layout springs, and a cubic-bezier drop settle. Full Ctrl/Cmd+arrow keyboard moves announced via a live region. Under prefers-reduced-motion there is no lift easing, gliding gap or settle — moves land instantly on a legible static list.
Image Zoom
A hover/press inner-zoom magnifier whose magnified region tracks the pointer inside the image (no lens box), paired with a click-to-open full-screen lightbox that portals to the body with a blurred backdrop, Escape/backdrop-click close, focus trap, and focus return. Under prefers-reduced-motion the zoom-follow is dropped (the static image stays fully legible) and the lightbox opens instantly.
Stepper
A horizontal or vertical progress stepper: numbered circles connect via a track whose accent fill grows across completed segments, the current step pulses inside a solid accent ring, and passing onStepClick turns completed/current steps into keyboard-operable buttons (upcoming steps stay inert). Under prefers-reduced-motion the connector fills snap in with no grow and the pulse is suppressed, leaving a static, legible ring.
Skeleton
A content-placeholder loader with a soft pure-CSS shimmer sweep — rect, text, circle, and card variants plus Skeleton.Text/Avatar/Card presets, currentColor theming, and an aria-busy opt-in; collapses to a static muted block under reduced motion.
Waveform Scrubber
A seekable audio-waveform scrubber on canvas: deterministic seeded peaks (or your own peak data), a simulated transport with play/pause and elapsed/total readouts, pointer-capture drag seeking, and full keyboard control on a role="slider" surface. Under prefers-reduced-motion the animation loop is disabled and the playhead steps once per second.
Caustics Background
A full-bleed underwater-caustics WebGL background (raw WebGL1, zero deps): layered domain-warp folds render rippling light that concentrates near the surface, with tint/background/intensity/speed props accepting any CSS color including var() tokens. ~30fps with DPR capped at 1.5, pauses off-screen and on hidden tabs, survives context loss, CSS-gradient fallback without WebGL. One static lit frame under prefers-reduced-motion.
Combination Dial
A rotary combination-lock control: accessible role="spinbutton" dials rotated by pointer drag or arrow keys, each with aria-valuetext and SVG notch ticks; when every dial matches the combination it fires onUnlock and animates a latch-open reveal. Controlled or uncontrolled, SSR-deterministic. Dials snap without tweening under prefers-reduced-motion.
Axis Specimen
A live variable-font specimen playground: a giant editable specimen line driven through font-variation-settings by labelled range sliders generated from an axes prop, plus size and tracking controls, preset chips, and a copy-ready CSS readout. Bring your own variable font. Idle axis "breathe" never starts under prefers-reduced-motion and presets jump instantly.
Force Graph
A canvas force-directed graph with a seeded deterministic layout: nodes repel, links act as springs, and the simulation cools until it settles and stops ticking entirely. Hover or keyboard-focus highlights a node's neighbourhood with per-group theme-aware colours and pulse rings on emphasis nodes. Pre-settles synchronously to a static frame under prefers-reduced-motion.