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 40

Loading the full search index.

Masonry flow

1532Masonry flowLayoutA masonry wall that packs tiles of varying height into columns, lifts each one in as it scrolls into view, and re-seats the whole grid when the column count changes.

Split text reveal

1543Split text revealText effectsA headline whose words or characters rise out of a clip mask, blurred and tinted, staggered left to right on mount, and replayed on click.

Share target swap button

1650Share target swap buttonButtonsA compact share button that keeps one footprint and swaps its label for a staggered row of destination glyphs on hover or focus.

Blur reveal

1669Blur revealAnimationA wrapper that keeps its child out of focus and slightly offset until it first enters the viewport, then resolves the blur and closes the gap in one move.

Burst particle emitter

1672Burst particle emitterAnimationWraps any element and fires a staggered fan of small specks from a chosen edge, on click, on a loop, or the first time it scrolls into view.

Directional Slide In

1684Directional Slide InAnimationA reveal that pushes content in from any of the four sides by a set distance and lets a spring absorb the arrival.

Focus in reveal

1697Focus in revealAnimationA reveal that brings content in out of focus and lets it sharpen as it enters view, with an optional per item delay for a stack of rows.

Letter cascade button

1712Letter cascade buttonButtonsA wide solid button whose centred label drops away and is rebuilt one letter at a time as each character falls into place from above.

Scale in on view

1743Scale in on viewAnimationA wrapper that holds its child small until it first scrolls into view, then springs it to full size, with an optional per-item stagger for lists.

Staggered Fade List

1751Staggered Fade ListAnimationRows that fade up from a chosen starting opacity one after another as the group enters view, with the gap between them adjustable.

Mount pop in

1787Mount pop inAnimationA row of shapes that spring in from zero the moment they mount, staggered so the group reads as one wave, with a replay button to watch it again.

Tile trail

1796Tile trailCursorA pointer trail that drops small rounded tiles along the path, each popping in from a recycled pool and drifting away as newer ones take its place.

Stagger bar row

1811Stagger bar rowAnimationA row of bars that rise into place one after another, with the wave starting from either end or from the middle outward.

Bouncing Photo Fan

1844Bouncing Photo FanCardsA row of overlapping square photo tiles that pop in with an elastic overshoot, then shove each other aside when one is hovered.

Scroll entrance wrapper

1880Scroll entrance wrapperScrollA wrapper that keeps its children parked off position until they scroll into view, then plays one eased arrival and never repeats it.

Letter roll in

1991Letter roll inText effectsA line of text where every character turns over on a horizontal axis, the old face rolling away as an identical face rolls in from below.

Split text entrance

2049Split text entranceText effectsCopy that is cut into characters, words or lines and animated in piece by piece on a shared stagger, with a few entrance presets to pick between.

Cube flip letters

2136Cube flip lettersText effectsHovering a line turns every letter a quarter turn in 3D, one after another from a chosen origin, revealing a second face that carries the same glyph in the accent.

Hopping dot loader

2167Hopping dot loaderFeedbackA short row of dots that hop in a travelling wave, each one leaving the floor a beat after the dot beside it.

Staggered Reveal Text

2242Staggered Reveal TextText effectsA sentence appears in staggered pieces, split into words, characters, or lines, using a chosen entrance style such as fade, blur, slide, or scale.

Blur in word reveal

2307Blur in word revealText effectsWords in a sentence resolve from a soft blur into sharp focus one after another as the sentence scrolls into view.

Bubble burst menu

2309Bubble burst menuNavigationA floating logo pill and toggle that expand into a full screen overlay of oversized pill links, each bursting into place with a springy stagger.

Circle reveal sidebar

2318Circle reveal sidebarNavigationA menu panel that opens as a circle growing out of its own toggle, with rows springing up in sequence and the toggle bars folding into a cross.

Flip panel headline reveal

2355Flip panel headline revealText effectsA headline whose characters sit behind small hinged panels that flip down one after another, like an arrivals board, to reveal the letters underneath.

Line by line headline reveal

2379Line by line headline revealText effectsA headline reveals one full wrapped line at a time: each line unclips left to right like a curtain lifting while a colored tick lands on its trailing edge and stays lit, leaving a visible trail once the sequence settles.

Ripple Origin Grid

2415Ripple Origin GridLayoutA grid of colored tiles that light up in a ripple radiating outward from one chosen tile, timed by distance from that tile.

Scroll blur reveal text

2418Scroll blur reveal textText effectsA block of text that starts blurred and offset, then sharpens into focus word by word or letter by letter the first time it scrolls into view.

Split curtain reveal button

2435Split curtain reveal buttonButtonsA button hidden under four accent panels that part sideways first and vertically a beat later, uncovering the label in two staged moves.

Staggered Offer Drawer

2441Staggered Offer DrawerOverlaysA bottom drawer promoting a limited offer, where the heading, price and buttons spring in one after another instead of all appearing at once.

Letter drop press button

2517Letter drop press buttonButtonsA key-cap button on a darker ledge whose label drops away on hover and is rebuilt letter by letter from above, pressing down onto the ledge when clicked.

Compass share burst

2604Compass share burstButtonsA round share button that fans its destination chips out to the compass points in a staggered burst and pulls them back home in reverse order.

Split flap face button

2681Split flap face buttonButtonsThe filled face drops out of the bottom of the button on hover and the label rebuilds itself letter by letter from behind it.

Letter swap copy button

2718Letter swap copy buttonButtonsA raised copy button whose label rebuilds itself letter by letter on hover while its icon chip pulses and draws a check when the copy lands.

Paper fold text

2809Paper fold textText effectsText splits into characters, words, or lines that unfold open along a chosen hinge edge with a crease shadow, staggered across the phrase.

Rotating Word Swap

2819Rotating Word SwapText effectsA lead-in phrase stays fixed while a trailing word cycles through a list, each swap sliding characters up and out as the next word slides up and in.

Cascading Letter Reveal

2824Cascading Letter RevealText effectsA headline that reveals itself letter by letter with a soft rise and fade as it enters view, then holds steady once finished.

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)