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 54

Loading the full search index.

Aurora veil

1526Aurora veilBackgroundsA full-bleed background of three drifting ribbons of light that add up where they cross, over a dark ground, with a caption layer that stays readable.

Hero signal

1530Hero signalBlocksA full-bleed landing hero whose headline arrives one word at a time over thin vertical lines that drift and carry short lit signals upward.

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.

Aurora curtain

1666Aurora curtainBackgroundsA soft curtain of light hanging from the top edge, its lower hem rising and falling on a slow noise wave while its color shifts across the width.

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.

Bulging dot field

1671Bulging dot fieldBackgroundsA fine grid of dots that swells outward under the cursor like fabric pushed from behind, springing back with one soft overshoot the moment the pointer moves on.

Concentric pulse rings

1677Concentric pulse ringsBackgroundsA stack of concentric rings behind a caption, each one breathing on a staggered delay so a slow pulse travels outward from the centre.

CRT terminal static

1680CRT terminal staticBackgroundsA full bleed grid of glowing block glyphs that boils, rolls and tears like a failing monochrome monitor.

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.

Drifting gradient wash

1687Drifting gradient washBackgroundsA two-tone gradient panel oversized past its frame and slowly panned back and forth, so the colour boundary drifts across the surface forever.

Flaming iris eye

1692Flaming iris eyeBackgroundsA burning iris of radiating filaments around a narrow slit pupil that turns to keep the cursor in view.

Flickering square mesh

1694Flickering square meshBackgroundsA canvas mesh of small squares where random cells jump to a new brightness every frame, giving a restless static that never repeats.

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.

Halftone wave field

1704Halftone wave fieldBackgroundsA slow cloud of turbulence flattened to a handful of tones and printed as a grid of dots, so it reads like a newspaper photo that will not hold still.

Horizon swell

1709Horizon swellBackgroundsRolling swells recede into fog toward a lit horizon, growing as they travel forward and catching a pale edge on each crest.

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.

Light beam slats

1715Light beam slatsBackgroundsLong diagonal slats sliding past each other in the dark, each catching a band of light as it crosses so the panel breathes like a lit blind.

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.

Meteor shower

1723Meteor showerBackgroundsTiny bright heads with thin trailing streaks fall across a panel on one shared angle, each with its own delay and speed.

Perspective floor grid

1731Perspective floor gridBackgroundsA grid plane tilted away from the camera so it recedes to a horizon and slides toward the viewer on a seamless one-cell loop.

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.

Drifting particle field

1952Drifting particle fieldBackgroundsA slowly tumbling cloud of small round points, each drifting on its own path, with the whole cloud leaning away from the pointer.

Halftone ripple field

1978Halftone ripple fieldBackgroundsA field of tiny tiles that switch on and off with a drifting noise pattern, and every click sends a ring of lit tiles racing outward.

Light cone beam

1992Light cone beamBackgroundsA grainy wedge of light flares up from a hot line at the foot of the frame, turning slowly so its edges catch different colors.

Liquid metal swirl

1994Liquid metal swirlBackgroundsMolten ribbons wrap around a hot core and fling thin bright filaments outward as the whole mass turns over itself.

Mirror warp field

1999Mirror warp fieldBackgroundsA full bleed sheet of polished metal that folds and refolds itself, with a dent that spreads out from wherever the pointer touches it.

Particle Field

2000Particle FieldBackgroundsA canvas field of soft floating dots that drift on their own and lean toward the pointer with a gentle magnetic pull, easing back once it moves away.

Neon ribbon tubes

2004Neon ribbon tubesBackgroundsTwo glowing tubes braid past each other across the frame, ringed with interference bands wherever they cross.

Aurora band glow

2110Aurora band glowBackgroundsA soft ribbon of light lying across a dark frame, its edge wandering on layered noise while the color walks along its length.

Bar wave matrix

2112Bar wave matrixBackgroundsA grid of short bars where each bar slides along its own track, and the phase offset from row to row turns the whole grid into a travelling wave.

Contour Field

2130Contour FieldBackgroundsA full-bleed animated backdrop of nested elevation contours that swell and merge, with the pointer raising a soft bump in the terrain.

Fanned wave threads

2152Fanned wave threadsBackgroundsA bundle of hairline threads pinned flat at the left edge, fanning out to the right and waving on a slow noise field.

Light Threads

2181Light ThreadsBackgroundsGlowing filaments fanned out from a single pinch point, braiding as their phases advance and flaring near white where they cross.

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)