Animated React Utility Components

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.

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.

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.

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.

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.

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.

Liquid-glass surface primitive: backdrop blur plus an SVG feDisplacementMap generated from the element's own size — edge-weighted refraction with a per-channel prismatic split, a cyan/magenta chromatic rim, a pointer-leaning specular highlight and a surface-tension wobble. Render it as a pill, rounded tile, circle, button or link; CulletLens is a pointer-following magnifier with idle drift and keyboard walking. Refraction renders in Chromium; Safari and Firefox fall back to frosted blur + rim.

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.

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

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.

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.

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.

Margin notes for prose — inline marks get a hand-drawn pen underline that draws in on view; hover, focus or click reveals each note in a gutter rail aligned to its line, collision-stacked and joined to the word by a hairline leader that draws out to it. Notes take any content (images, charts), fold into inline expanding blocks on narrow containers, and preview once in a ghost reading pass. Marks are real buttons with aria-expanded/aria-controls and Escape to close.

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.

R3F z-axis gallery fly-through: frames mounted on fresnel-edged glass panes float down a corridor in an alternating left/right rhythm; wheel, drag or arrow keys fly the camera through with eased banking while passing panes dissolve and fog swallows the distance. Click or Enter glides square-on to a pane, Escape returns. Idle drift loops seamlessly via recycled panes; offscreen-paused, reduced-motion-safe, CSS fallback.

Architectural reeded glass over an image or video: each vertical flute refracts a compressed, mirrored slice through a convex lens profile, with a slow cool specular line, edge grooves and a faint chromatic split. The pointer fogs the pane with condensation that clears in streaks along the reeds, clicks stack breath blooms, an idle ghost breathes across, and the flutes sweep in from flat glass on first view. Ships a seeded procedural dusk plate when no src is given. OGL, DPR-clamped, offscreen-paused, reduced-motion-safe.

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.

R3F film-bobbin gallery: frames on a continuous sprocketed film strip wound helically around a reel, unwinding frame by frame into a flat contact strip as you scroll. Drag to spin or pan, arrow keys to browse, click or Enter to lift a frame into a lightbox. Off-focus duotone, idle spin, offscreen-paused, reduced-motion-safe.

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.

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.