Komponenten

Jede Komponente live

Eigenständige React-Komponenten für deine Projekte. Jede Vorschau zeigt die echte Komponente: Bewege den Zeiger, klicke und tippe. Melde dich für Quellcode, Eigenschaften, Installation und die Versionen für Vue, Svelte, Astro und HTML an.

19 von 19

1530Hero signalAbschnitteEin vollwertiger Landungsheld, dessen Schlagzeile Wort für Wort über dünne vertikale Linien erscheint, die schweben und kurz leuchtende Signale nach oben tragen.

1543Split text revealTexteffekteEine Überschrift, deren Wörter oder Zeichen aus einer Clip-Maske auftauchen, verschwommen und getönt sind, beim Mounten von links nach rechts versetzt und beim Klicken wiedergegeben werden.

1915Aurora glow headingTexteffekteEine Überschrift, in der ein Wort eine langsam wandernde, mehrfarbige Farbverlaufsfüllung trägt, die auf die Buchstabenformen zugeschnitten ist, wie ein Polarlicht, das hinter der Schrift leuchtet.

1962Flowing gradient headlineTexteffekteEine Überschrift, deren Buchstaben mit einem beweglichen zweifarbigen Farbverlauf gefüllt sind, sodass ein helles Band endlos durch die Wörter gleitet, mit optionalem sanftem Blütenhintergrund dahinter.

2066Morphing HeadlineTexteffekteEine Überschrift, die eine Phrase in die nächste übergeht und passende Buchstaben an ihre neue Stelle gleiten lässt, während der Rest verschwimmt und verschwindet oder verschwindet.

2085Word swap loopTexteffekteEin Satz mit einem Wortschlitz, der auf einem Timer durch eine Liste läuft, wobei jedes Wort nach oben und außen gleitet, während das nächste an seine Stelle tritt.

2124Color Band Text RevealTexteffekteEin weiches Band aus mehreren Farben gleitet mit einer sanften Hin- und Herbewegung einmal über eine Textzeile und färbt jeden Buchstaben ein, bevor der Text eine feste Farbe annimmt.

2179Layered shadow headlineTexteffekteEine kurze, fette Überschrift mit einem dahinter versetzten Duplikat, diagonal schraffiert in einer Akzentfarbe, die langsam verschiebt, um den Buchstaben einen beweglichen Schatten zu verleihen.

2237Sparkling highlight textTexteffekteFettgedruckter Displaytext mit einer Handvoll winziger vierzackiger Sterne, die an zufälligen Stellen über den Buchstaben auftauchen und verschwinden, wobei jeder einzelne wächst, sich kurz dreht und dann verschwindet, um an anderer Stelle ersetzt zu werden.

2248Striped shadow headingTexteffekteEine fettgedruckte Überschrift mit einer dahinter versetzten Duplikatkopie, gefüllt mit diagonalen Streifen, die wie ein langer Schlagschatten weiterziehen.

2379Line by line headline revealTexteffekteIn einer Überschrift wird jeweils eine vollständig umbrochene Zeile angezeigt: Jede Zeile wird von links nach rechts geöffnet, als würde sich ein Vorhang heben, während ein farbiges Häkchen an der Hinterkante landet und erleuchtet bleibt und eine sichtbare Spur hinterlässt, sobald sich die Sequenz beruhigt hat.

2405Pointer scatter headlineTexteffekteEine in einzelne Zeichen aufgeteilte Überschrift, die sich zur Seite schieben und fallen lassen, während der Zeiger darüber hinwegstreicht, und dann wieder in die richtige Zeile zurückkehren.

2814Flowing gradient textTexteffekteEin mehrfarbiger Farbverlauf verläuft kontinuierlich über die Füllung einer Überschrift, optional umrahmt von einem passenden Farbverlaufsrahmen.

2819Rotating Word SwapTexteffekteEine Einleitungsphrase bleibt fixiert, während ein nachfolgendes Wort eine Liste durchläuft. Dabei werden jeweils die Gleitzeichen nach oben und außen vertauscht, während das nächste Wort nach oben und nach innen gleitet.

2824Cascading Letter RevealTexteffekteEine Überschrift, die sich Buchstabe für Buchstabe offenbart, mit einem sanften Auf- und Abschwellen, wenn sie sichtbar wird, und dann unverändert bleibt, wenn sie fertig ist.

2826Elastic weight headlineTexteffekteEine einzelne Zeile aus riesigen Großbuchstaben, deren Gewicht, Breite und Neigung um eine verzögerte, entspannte Cursorposition anschwellen.

2829Outline draw textTexteffekteDie angezeigten Buchstaben zeichnen sich nacheinander als leuchtende Umrisse ab, dann wird hinter den Strichen eine durchgehende Füllung eingeblendet, um das Wort zu vervollständigen.

2831Typewriter sentence cycleTexteffekteEine Schreibmaschine mit blinkendem Cursor tippt einen Satz nach dem anderen ein, hält inne, löscht ihn und fährt in einem endlosen Zyklus mit dem nächsten fort.

2835Liquid warp headlineTexteffekteEine auf Leinwand gezeichnete Schlagzeile, die sich biegt und kräuselt wie Licht durch Wasser, wobei sich die Verzerrung überall dort sammelt, wo der Zeiger schwebt.

Gesamtes Verzeichnis öffnen

Schlagwörter

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)