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.

32 of 32

1567Layers iconIconsStacked sheets seen in perspective, the top one lifting first and the ones below following a beat later.

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.

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.

Parallax Starfield

1727Parallax StarfieldBackgroundsThree layers of scattered dots scroll upward at different rates and slide against the pointer, so the field gains depth.

Tunnel Warp Panel

1755Tunnel Warp PanelBackgroundsContent sits at the mouth of a four walled grid tunnel while narrow beams race down each wall toward the viewer.

Deep Slab Button

1825Deep Slab ButtonButtonsA tall slab that floats above the page on a long diagonal shadow and sinks onto it when hovered, then slams flat on click.

Press block button

1831Press block buttonButtonsA rounded block button resting on a solid ledge of shadow that shortens as the button travels down under a press.

Key travel button

1835Key travel buttonButtonsA rounded key standing on a tall base that shortens on hover and disappears under the press, seating the key flat.

Lift and Sink Button

1868Lift and Sink ButtonButtonsA tinted monospace button that floats up on hover and sinks into its own inset shadow when pressed.

Parallax plate gallery

1873Parallax plate galleryScrollA snapping vertical gallery where each plate's oversized index number drifts at a different rate to the plate itself, with a scroll progress rail along the bottom.

Radial sheen button

1878Radial sheen buttonButtonsA short key-like button lit from its top-right corner, with a hairline base edge that inverts when pressed.

Settling Add Pill

1885Settling Add PillButtonsA compact capsule with a plus mark that settles down through three shadow depths as you hover and then press it.

Tilted deck button

1898Tilted deck buttonButtonsA button laid back in perspective like a key on a sloped deck, tipping further away and sliding down as it is hovered and pressed.

Comet rain

1941Comet rainBackgroundsStreaks with bright heads fall from a glowing point near the top and curve outward as they drop, at speeds set by their depth.

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.

Nested plate send button

2005Nested plate send buttonButtonsA moulded pill seated inside a backing plate whose cast shadow tightens on hover and flattens on press.

Pixel snowfall

2014Pixel snowfallBackgroundsChunky low resolution snow falling through a deep volume, near flakes fat and bright, far ones dim single specks.

Squash key button

2054Squash key buttonButtonsA key-cap button that squashes flat under the pointer while a base slab slides out from beneath it, then drops onto the slab when held.

Glass Block Bars

2090Glass Block BarsChartsA bar chart rendered as glossy 3D glass blocks with perspective side and top faces, and a slow light sweep pulsing up the tallest bar.

Tilted plinth call to action

2254Tilted plinth call to actionButtonsA chunky call to action resting on a solid colored plinth, tilted slightly in space, that lifts off its base on hover and sinks under a press.

Receding stack carousel

2411Receding stack carouselLayoutA carousel where cards recede into the distance behind the focused card, darkening and blurring the further back they sit.

Stacked shadow outline button

2500Stacked shadow outline buttonButtonsA monospaced outline button resting on a ladder of stacked shadows that compresses and settles as the accent floods its face, then springs back one layer at a time.

Soft inset press button

2533Soft inset press buttonButtonsA near-black slab that sits above a matching panel on two opposing soft shadows, sinks into the surface while held and rises again on release.

Growing ledge button

2566Growing ledge buttonButtonsA solid accent button resting on a darker bottom ledge that thickens and lifts on hover, then thins and sinks under a press.

Arcade dome button

2574Arcade dome buttonButtonsA round pushbutton whose domed cap floats above a darker base and seats flush with a visible drop when pressed.

Tilted Stack CTA

2586Tilted Stack CTAButtonsA chunky call to action that rests rotated over a stack of hard offset shadows, then stands upright under the pointer.

Three layer push button

2620Three layer push buttonButtonsA tactile key built from three stacked plates, a cast shadow, a dark side wall and a floating face, that springs up on hover and bottoms out instantly on press.

Stacked plate press button

2655Stacked plate press buttonButtonsA chunky rounded button built from three nested plates that telescope apart on press and snap back on release.

Pressed ledge button

2690Pressed ledge buttonButtonsA solid button resting on a thick darker bottom edge that collapses when pressed, so the cap drops flush like a real key.

Bevel press pill

2708Bevel press pillButtonsA dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed.

Keycap press button

2717Keycap press buttonButtonsA pale keycap with real thickness built from stacked hard shadows, which travels down and loses height when pressed.

Extruded layer text

2806Extruded layer textText effectsA word rendered as many stacked color layers behind its face, forming an extruded 3D block that leans toward the pointer and drifts when idle.

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)