Components

Every component, live

Original React components you can drop into a project. Every plate below is the real component running live, so hover, click and type on it. Sign in for the source, the props panel, the install command and the Vue, Svelte, Astro and HTML versions.

36 of 65

Loading the full search index.

Dock menu

1528Dock menuNavigationA bottom dock whose icons take their size from the pointer distance, with a label above the icon under the cursor and a dot under the active one.

Magnetic button

1531Magnetic buttonButtonsA button that drifts toward the pointer while it is inside a set radius and springs back to rest when it leaves, with the label and arrow shifting a little further than the body.

Particle drift

1536Particle driftBackgroundsA canvas field of slow drifting particles that wrap at the edges, and link with faint lines and ease away where the pointer passes.

1548Arrow iconIconsA full-length arrow that nudges along its own axis, with paired arrows for the two-way directions.

Bouncing sphere pit

1670Bouncing sphere pitBackgroundsA boxed pit of weighty spheres that fall, knock into each other and pile up, scattering whenever the cursor wades through them.

Cursor trail grid

1681Cursor trail gridBackgroundsA grid of outlined cells that snap lit under the pointer and cool slowly once it moves on, leaving a fading trail.

Drifting glass shards

1686Drifting glass shardsBackgroundsA slow current of translucent slivers that flash as they tumble, scattering from the cursor and gathering back when the pointer holds still.

Gradient slat spotlight

1700Gradient slat spotlightBackgroundsVertical slats hide a colour gradient until a soft spotlight tracks the pointer across them and lights each slat it touches.

Gravity dust field

1703Gravity dust fieldBackgroundsA slow field of glowing dust specks that bend toward or away from the pointer and flare brighter the closer they get.

Light Beam Flare

1714Light Beam FlareBackgroundsA narrow beam falls from the top of a dark stage into a wide horizontal flare, with drifting haze and a beam that leans toward the pointer.

Liquid metal drift

1718Liquid metal driftBackgroundsRim lit blobs of heavy liquid form, stretch and merge across a black field, bulging toward the pointer like iron filings toward a magnet.

Liquid swirl vortex

1719Liquid swirl vortexBackgroundsTwo pools of thick paint folded around a slow whirlpool, with hard edges and chunky pixels that make it look printed rather than rendered.

Magnetic particle ring

1720Magnetic particle ringBackgroundsA drifting field of tiny specks that the pointer catches and reorganises into a rippling ring, releasing them again as it moves on.

Magnetic pull target

1721Magnetic pull targetAnimationA tile that leans toward the pointer whenever it comes inside a set radius, pulling harder the closer it gets and easing home when the pointer leaves.

Pointer angle sweep

1732Pointer angle sweepBackgroundsA panel lit by a conic sweep whose origin sits under the pointer and whose bright edge points back at it, easing to a slow idle spin when the pointer leaves.

Pointer lit lattice

1733Pointer lit latticeBackgroundsA canvas lattice whose cells light as the pointer passes, hold, then decay, with a press sending a ring of light expanding to the far corners.

Pointer ripple mesh

1734Pointer ripple meshBackgroundsA colour plate is sampled through a coarse mesh whose cells remember where the pointer has been, so dragging smears the image and the smear relaxes back.

Bracket lock cursor

1764Bracket lock cursorCursorA custom pointer of four corner brackets that spins while idle and snaps open around any element marked as a target.

Drag tile track

1771Drag tile trackAnimationA tile you can throw around a bounded track that tilts into the drag, resists past the edges and coasts to a stop with momentum.

Fluid Splash

1776Fluid SplashCursorDragging across the panel pushes ink through a fluid simulation, so color billows, curls and slowly dissipates behind the pointer.

Iron filings field

1781Iron filings fieldAnimationA square grid of tiny dashes that all rotate to point at the pointer, like iron filings snapping to a magnet dragged over them.

Lagging orb follower

1783Lagging orb followerCursorA soft disc that chases the pointer on a deliberately floppy spring, swinging past it and wobbling back instead of locking on.

Magnetic project target

1786Magnetic project targetCursorA custom round cursor with text circling its rim that drifts after the pointer and snaps onto a call to action pill when it comes close.

Pixel Wake

1793Pixel WakeCursorA coarse grid of cells lights up under the pointer and cools back down behind it, leaving a blocky wake across the panel.

Pointer label cursor

1794Pointer label cursorCursorInside a bounded panel the system cursor is replaced by a drawn arrow with a small name chip trailing behind it on a soft spring.

Edge tracking glow card

1854Edge tracking glow cardCardsA card whose outline only lights up where the pointer gets close to it, brightening as you approach the rim and going dark near the middle.

Click ripple burst

1937Click ripple burstFeedbackA pointer-feedback effect that spawns a brief animated shape exactly where the user clicks or taps.

Cursor fluid trail

1947Cursor fluid trailBackgroundsA dark field where dragging the pointer smears colored fluid across it, and the smear keeps curling and thinning out after the pointer stops.

Orbit Pointer Nav

2007Orbit Pointer NavNavigationA circular navigation ring where a center pointer rotates to aim at whichever section button is active, and buttons expand into labeled pills on selection.

Compass bar grid

2127Compass bar gridAnimationA grid of short bars that all rotate to point at the pointer, so the field reads like iron filings finding a magnet.

Focus Lens

2155Focus LensAnimationAn outlined shape that stays soft and out of focus everywhere except in a small circle that follows the pointer, where it snaps sharp.

Gooey blob field

2159Gooey blob fieldAnimationA field of soft blobs that orbit seeded paths and melt into each other on approach, with an extra blob that follows the pointer.

Pointer Magnet

2206Pointer MagnetAnimationA wrapper that lets whatever it holds drift toward the pointer while it is inside a padded catch zone, then glide back to rest.

Dodging eyes button

2510Dodging eyes buttonButtonsA dark capsule with two blinking cartoon eyes that hops to the corner furthest from your pointer while its pupils keep watching you.

Hairline trace submit

2647Hairline trace submitButtonsA dark submit button whose one pixel hairline lights up, tracing around the perimeter from the edge the pointer entered, then retreats back out the same way.

Floating text trail

2833Floating text trailCursorA dark panel where moving the pointer drops floating copies of a word along the travel path, each bobbing briefly before fading away.

Open the full index

Tags

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (6)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (12)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (8)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (11)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)wrapper (3)zoom (4)