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.

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

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

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.