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.

Scramble text

1539Scramble textText effectsMonospace text that lands one character at a time from rolling glyphs behind a write head, and comes loose again wherever the pointer brushes it.

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.

Center out underline link

1929Center out underline linkButtonsA navigation link whose underline grows outward from the middle to both ends on hover and retracts back to a point when the pointer leaves.

Fill sweep loading text

1959Fill sweep loading textFeedbackA loading label whose faint outline sits under a fully colored copy that sweeps in from the left, reaches full width, and drains back out, repeating for as long as something loads.

Flowing gradient headline

1962Flowing gradient headlineText effectsA headline whose letters are filled by a moving two-tone gradient, so a bright band drifts endlessly through the words, with an optional soft bloom behind.

Gradient shift text

1970Gradient shift textText effectsA rounded pill whose text is filled with a two-color gradient that continuously sweeps sideways through the letters.

Gradient sweep heading

1971Gradient sweep headingText effectsA large heading whose fill is a moving gradient band that sweeps continuously from one edge to the other, giving the text a glossy, ever-shifting sheen.

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.

Marker highlight

1995Marker highlightText effectsA phrase with a marker band that wipes in behind it from left to right when the line first comes into view, leaving the words sitting on a colour block.

Shimmer sweep text

2036Shimmer sweep textText effectsA line of text where each letter brightens and dims in turn, sending a band of light travelling along the phrase on a loop.

Split Reveal Hover Text

2048Split Reveal Hover TextText effectsText is sliced into a top and bottom half; on hover the top half slides away and fades while the bottom half glides up to complete the word, and it reverses when the pointer leaves.

Sweeping status text

2060Sweeping status textText effectsA large status word that swaps on a steady beat while a bright band sweeps endlessly across the letterforms.

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.

Keystroke Text

2177Keystroke TextText effectsText appears one character at a time as if being typed live, with a blinking cursor that keeps going after typing finishes.

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.

Twinkle highlight text

2260Twinkle highlight textText effectsBold highlighted text with small four-pointed sparkle stars that continuously pop in and out at random positions around and over the letters.

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.

Cipher reveal text

2317Cipher reveal textText effectsA label that starts scrambled into random symbols and decrypts into its real text on view, hover, or click.

Hover duplicate text nav

2365Hover duplicate text navNavigationA vertical nav list slides each label upward and off the top on hover while a duplicate label slides in from below to take its place.

Hover speed text ring

2367Hover speed text ringText effectsA phrase set in a ring of outward-facing letters that spins gently at rest and dramatically changes speed while the pointer hovers it.

Pointer scatter headline

2405Pointer scatter headlineText effectsA headline split into single characters that shove aside and tumble as the pointer sweeps through them, then drift back into line.

Reading highlight copy

2410Reading highlight copyText effectsA paragraph that lights up word by word as you scroll it, leaving read words bright and unread words dim so scroll position doubles as a reading position.

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.

Typewriter caption

2457Typewriter captionText effectsA caption types itself out one character at a time at a steady pace, with a solid block cursor that keeps blinking after the line is complete.

Caret tail link

2508Caret tail linkButtonsA quiet text link with a small angle bracket riding just past its last letter, which slides outward and gains an underline on hover.

Trailing arrows text button

2526Trailing arrows text buttonButtonsA borderless text link that widens its letter spacing on hover while a trail of arrows fans out to the right, each one further and fainter than the last.

Opposing rule text button

2537Opposing rule text buttonButtonsA borderless uppercase text button bracketed by two rules that sweep in from opposite ends on hover or focus and retreat the way they came.

Text field

2785Text fieldInputsA single-line text field with a soft border, an accent focus ring, a muted placeholder and a proper disabled state.

Fuzzy static text

2807Fuzzy static textText effectsA word drawn on canvas and repainted in jittering scan-lines, buzzing like television static and distorting harder on hover or press.

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.

Flowing gradient text

2814Flowing gradient textText effectsA multi-color gradient continuously sweeps across the fill of a headline, optionally framed by a matching gradient border pill.

Particle formation text

2816Particle formation textText effectsA canvas of tiny particles that gathers into the shape of a word, drifts once formed, and scatters away from the pointer.

Sweeping shine text

2822Sweeping shine textText effectsText filled with a muted gradient and one bright diagonal band that sweeps back and forth like a glint of light, and can freeze in place while hovered.

Character shuffle reveal

2825Character shuffle revealText effectsEach character rolls through a strip of random glyphs like a slot reel before landing on the real letter, revealed on scroll with hover replay.

Outline draw text

2829Outline draw textText effectsDisplay letters trace themselves one after another as glowing outlines, then a solid fill fades in behind the strokes to finish the word.

Scroll dim text reveal

2838Scroll dim text revealScrollA paragraph sits dimmed and brightens word by word in lockstep with scroll progress, then dims again as you scroll back.

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)