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.

18 von 18

2242Staggered Reveal TextTexteffekteEin Satz erscheint in gestaffelten Teilen, aufgeteilt in Wörter, Zeichen oder Zeilen, wobei ein ausgewählter Eingangsstil wie Einblenden, Unschärfe, Gleiten oder Skalieren verwendet wird.

2301Ascii Art HeadingTexteffekteEin großes Wort wird als Mosaik aus monospaced-Zeichen dargestellt, deren Dichte die Buchstabenformen nachahmt und sich sanft kräuselt und zum Zeiger hin neigt.

2410Reading highlight copyTexteffekteEin Absatz, der beim Scrollen Wort für Wort aufleuchtet, sodass gelesene Wörter hell und ungelesene Wörter abgeblendet bleiben, sodass die Scroll-Position gleichzeitig als Leseposition dient.

2463Video fill text maskTexteffekteRiesige Buchstaben fungieren als Fenster zu einem generierten Schleifenhintergrund, sodass bewegte Farben nur innerhalb der Wortform sichtbar sind.

2464Wavy letter headingTexteffekteEine Überschrift, deren Buchstaben auf einer langsamen Welle schweben, wobei jeder einzelne dem letzten hinterherhinkt, sodass sich die Zeile wie eine Fahne bewegt, ohne ihre Grundlinie zu verlieren.

2517Letter drop press buttonSchaltflächenEine Tastenkappentaste auf einer dunkleren Leiste, deren Beschriftung beim Schweben verschwindet und von oben Buchstabe für Buchstabe neu aufgebaut wird, wobei sie beim Klicken auf die Leiste drückt.

2726Shrink and emphasize buttonSchaltflächenEin Knopf, der sich beim Schweben zusammenzieht, während seine Beschriftung größer und schwerer wird, sodass der Typ nach außen gegen die schrumpfende Hülle drückt.

2767Extruded tilt buttonSchaltflächenEin schwerer, in die Perspektive geneigter Anzeigeknopf, dessen hohle Buchstaben durch zwei harte Versätze extrudiert werden, die die Seiten umdrehen, wenn die Platte im Schwebezustand schwingt, und beim Drücken flach werden.

2806Extruded layer textTexteffekteEin Wort, das so viele gestapelte Farbschichten hinter seinem Gesicht darstellt, dass ein extrudierter 3D-Block entsteht, der sich zum Zeiger hin neigt und im Leerlauf driftet.

2807Fuzzy static textTexteffekteEin auf Leinwand gezeichnetes und in zitternden Scanlinien neu gemaltes Wort, das wie ein Fernsehrauschen summt und sich beim Schweben oder Drücken noch stärker verzerrt.

2813Trailing echo textTexteffekteEine Schlagzeile mit einem Stapel verschwommener, durchscheinender Kopien, die hinter ihrer zeigergesteuerten Neigung zurückbleiben, sich zu einer Echospur ausdehnen und im Leerlauf wieder in die vordere Zeile übergehen.

2815Media masked headingTexteffekteEine fett gedruckte Überschrift fungiert als ausgeschnittenes Fenster für die dahinter schwebenden Medien, die sich für ein Parallaxengefühl gegenüber dem Zeiger neigen und ihre Enthüllung beim Schweben wiedergeben können.

2817Physics drop textTexteffekteEin Satz zerfällt in Wörter, die unter der simulierten Schwerkraft fallen, taumeln und hüpfen, sich dann setzen und mit dem Zeiger hin und her bewegt werden können.

2820Scroll float revealTexteffekteÜberschriftszeichen schweben von unten nach oben und nehmen ihre Form an, während ihr Abschnitt durch das Ansichtsfenster scrollt und direkt an die Scrollposition verschoben wird.

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.

2830Split flap displayTexteffekteEine Reihe mechanischer Flipboard-Kacheln durchläuft eine Liste mit kurzen Sätzen, und nur die Kacheln, deren Buchstaben sich ändern, fallen vor der Landung durch ein paar zufällige Klappen.

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)