React Dialog, Drawer and Toast Components

Click a card and it scales and morphs seamlessly into a centered dialog with a shared-element animation, then shrinks back to the original card position on close.

A panel that slides in from the edge of the screen, supporting all four directions, click-the-overlay to close, and single-axis drag to swipe it away.

An iOS Dynamic Island-style notification — an idle pill expands fluidly into a notification card, multiple notifications stack behind it with their edges peeking out, and a loading state can update in place to success.

sonner-style collapsing toast stack — new toasts slide in from the edge, collapse into a pile of cards when not hovered, and expand into the full list while pausing the auto-dismiss countdown when the pointer enters the viewport.

An elastic tooltip that follows the cursor, tracking its coordinates with a spring and flipping sides automatically near the edges, with keyboard focus anchoring.

Three preloader overlay animations — text reveal, staircase slide, and pixel dissolve — each revealing the content with its own signature exit once loading finishes.

A route transition container combining View Transitions concepts with overlay reveals, playing one of four transitions — fade, slide, cover, or wipe — whenever the route changes.

A hand-built particle confetti celebration — bursting from an origin point, each piece with its own initial velocity, gravity, rotation, and drift, updated on rAF and reclaimed once it lands.

A spring-physics custom cursor with a deforming blob follower.

Cursor movement produces fluid splashes and ripples, approximating a fluid simulation with canvas 2D.

A feedback effect that bursts sparks / particles at the click point.

A four-corner reticle cursor that locks onto and frames target elements, spinning while idle and opening out to frame the bounds on a hit.

A checklist-style loading indicator that ticks off steps one by one for long tasks.

A standalone multi-step progress stepper indicator with checkmark drawing, connector fill, and an active pulse.

An animated percentage ring progress / gauge, supporting gradients, gauge arcs, and a counting reveal.

An animated accordion / FAQ expander with a bouncy transition, supporting single-open and multi-open modes.

Hovering an anchor floats up a live website preview card that tilts as it follows the cursor, drawn purely with canvas 2D and needing no external images.

A customizable animated scrollbar, with the thumb tracking the scroll on a spring, draggable, and click-the-track to jump.

An undo prompt bar with a countdown progress ring that confirms the action automatically when time runs out.

List rows swipe left or right to expose archive/delete actions, executing directly once the threshold is crossed.

Clicking a reaction button bursts a stream of emoji particles that float upward, doubling on rapid clicks.

A mobile pull-to-refresh container for React: damped drag with a threshold, an arrow that rotates into a spinner, onRefresh returning a Promise, a check on completion, plus a desktop button fallback.

A React cookie consent banner with a preferences dialog: necessary/analytics/marketing category toggles, accept-all and reject-all, a consent-object callback and localStorage persistence — SSR-safe with reduced-motion support.

An anchored popover opened from a trigger: positioned by side and align with automatic collision flipping, it fades, scales and slides in from its side, with full focus handling and outside-click dismissal.

An anchored React tooltip that opens on hover or keyboard focus after a delay, switches instantly while moving within a group, fades and scales in, flips at the viewport edge, and carries an arrow pointing at its trigger.

A right-click menu that opens at the pointer, with delayed submenus, checkbox and radio items and shortcut hints, automatic edge flipping, and long-press support on touch.

A confirmation dialog that demands a response: the overlay fades in and the panel scales up, with focus and scroll locking, and destructive actions can require a press-and-hold fill to confirm.