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.

36 von 42

Das vollständige Suchverzeichnis wird geladen.

Pulse halo button

1648Pulse halo buttonSchaltflächenEin fester Knopf, der immer wieder einen sanften Lichtschein in seiner eigenen Farbe ausstrahlt, entweder an Ort und Stelle atmet oder expandierende Ringe in einer Schleife abwirft.

Drifting gradient wash

1687Drifting gradient washHintergründeEin zweifarbiges Farbverlaufspanel, das über seinen Rahmen hinausgeht und langsam vor und zurück geschwenkt wird, sodass die Farbgrenze für immer über die Oberfläche wandert.

Light sweep button

1717Light sweep buttonSchaltflächenEin ruhig umrissener Knopf, dessen Buchstaben und haarfeine Umrandung von einem diagonalen Lichtbalken beleuchtet werden, der über die Fläche streicht, eine Sekunde innehält und erneut streicht.

Orbiting border spark

1725Orbiting border sparkHintergründeEin heller Funke mit einem verblassenden Schwanz läuft ewig um die Kante einer Platte herum und folgt dabei dem genauen Eckenradius, anstatt die Ecken abzuschneiden.

Perimeter spark button

1730Perimeter spark buttonSchaltflächenEine dunkle Pille mit einem einzelnen hellen Funken, der knapp innerhalb ihres Randes kreist und hinter einem eingesetzten Kern verborgen ist, sodass nur der Rand jemals das Licht einfängt.

Streak border button

1752Streak border buttonSchaltflächenEin Pillenknopf mit einem weichen Lichtpunkt, der an der Ober- und Unterkante entlang gleitet, wobei sich die beiden Streifen in entgegengesetzte Richtungen bewegen.

Color blend compare

1766Color blend compareAnimationZwei Farbfelder durchlaufen dasselbe Farbpaar, eines gemischt mit rohen Kanalwerten und eines mit linearem Licht, und zeigen den Rückgang, den ein einfacher Übergang verursacht.

Keyframe morph loop

1782Keyframe morph loopAnimationEin Quadrat, das eine Schleifenroutine aus Wachsen, Drehen und Runden zu einem Kreis durchführt und dabei jede Pose beibehält, da die Timing-Stopps ungleichmäßig sind.

Orbiting badges

1791Orbiting badgesAnimationKleine Abzeichen, die gleichmäßig um eine oder zwei kreisförmige Schienen verteilt sind, wobei sich jeder Ring mit seiner eigenen Geschwindigkeit und Richtung dreht, während die Abzeichen aufrecht bleiben.

Path follower

1792Path followerAnimationEine abgerundete Kachel, die sich entlang einer spiralförmigen Bahn bewegt, während die Bahn selbst vor ihr einfährt und dann rückwärts zum Start zurückfährt.

Flying send button

1858Flying send buttonSchaltflächenEine Sendeschaltfläche, deren Papierebenen-Glyphe sich neigt, bewegt und über das Gesicht fliegt, während die Beschriftung dahinter weggleitet.

Flowing gradient headline

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.

Halo ring

1979Halo ringHintergründeEin leuchtender Ring, dessen Rand auf einem treibenden Geräuschfeld wackelt, während eine heiße Perle um den Innenrand läuft.

Shimmer sweep text

2036Shimmer sweep textTexteffekteEine Textzeile, in der jeder Buchstabe abwechselnd heller und dunkler wird und ein Lichtband in einer Schleife entlang der Phrase wandert.

Infinite loop path loader

2171Infinite loop path loaderStatusmeldungenEin Lader in Form einer Acht, bei dem sich ein helles Segment endlos um eine schwache Spur zieht, wobei sich Kopf und Schwanz unterschiedlich schnell bewegen, damit das Armaturenbrett atmet.

Keystroke Text

2177Keystroke TextTexteffekteDer Text wird zeichenweise angezeigt, als würde er live eingegeben, mit einem blinkenden Cursor, der nach Abschluss der Eingabe weiterläuft.

Looping typewriter text

2186Looping typewriter textTexteffekteEine Textzeile tippt sich Zeichen für Zeichen ein, hält an, löscht wieder ins Nichts und gibt den nächsten Satz aus einer Liste ein, wobei sie ewig hinter einem blinkenden Caretzeichen weiterläuft.

2192Morphing icon loopAnimationEin einzelnes gefülltes Symbol formt sich kontinuierlich in das nächste Symbol in einer kurzen Liste um, wobei seine Umrisse fließend von einer Silhouette zur nächsten übergehen, während sich seine Füllfarbe entsprechend ändert.

2193Morphing icon toggleAnimationEin kleines Symbol verändert seinen Umriss in einer stetigen Schleife kontinuierlich zwischen zwei Formen und zwei Farben.

Path Orbit

2201Path OrbitAnimationKarten bewegen sich auf einem gemeinsamen geschlossenen Pfad, gleichmäßig verteilt und endlos kreisend, wobei die Pfadform zwischen einer Ellipse, einem Kreis und einem Stern umschaltbar ist.

2209Printing icon buttonSchaltflächenEin winziger Zeilendrucker, der erst dann mit dem Einziehen und Auswerfen eines Blattes beginnt, wenn sich der Zeiger darüber befindet.

Scrolling content strip

2221Scrolling content stripTexteffekteEin horizontaler Streifen kleiner Karten bewegt sich in einer ununterbrochenen Schleife seitwärts und bleibt stehen, sobald ein Zeiger über einer Karte darin ruht.

Curved Text Loop

2331Curved Text LoopTexteffekteEine Textzeile wiederholt sich endlos entlang eines sanft gewölbten Pfads, scrollt automatisch seitwärts und kann mit der Hand mit Schwung gezogen werden, der die Richtung umkehrt.

Download tray pulse button

2339Download tray pulse buttonSchaltflächenEine Pille mit abgerundeter Wirkung und einer kleinen Tablettmarkierung an der Vorderkante, wo eine Pfeilspitze auf einer Schleife durch das Tablett fällt, während der Zeiger darauf ruht.

Repeat mode cycler

2495Repeat mode cyclerSchaltflächenEin getönter Chip, der bei jedem Klick eine Loop-Einstellung ein- und ausschaltet und seinen Pfeil bei jeder Änderung rückwärts dreht.

Scroll cue button

2506Scroll cue buttonSchaltflächenEin kleines Scroll-Angebot, dessen Chevron beim Schweben oder Fokussieren in einer Endlosschleife durch das zugeschnittene Fenster fällt und dessen Klick den nächstgelegenen scrollbaren Bereich zum nächsten Abschnitt gleitet.

Looping flight send button

2525Looping flight send buttonSchaltflächenEine kartenähnliche Sendeschaltfläche, die beim Schweben ihren Schatten abhebt, während ihre Papierebene sich nach oben und unten bewegt und beim Klicken flach zusammengedrückt wird.

Dot matrix arrow button

2527Dot matrix arrow buttonSchaltflächenEine als Punktreihen gezeichnete Schaltfläche trat in eine nach rechts gerichtete Pfeilspitze ein, die beim Schweben oder Fokussieren in einer langsamen Schleife seitwärts und zurück gleitet und beim Drücken in Richtung ihrer Spitze komprimiert wird.

Rotating beam rim button

2547Rotating beam rim buttonSchaltflächenEin blattförmiger Knopf mit einem hellen zweifarbigen Strahl, der sich um seinen Rand dreht und nur in der Lücke um die Frontplatte sichtbar ist.

Bouncing dot action button

2658Bouncing dot action buttonSchaltflächenEine Taste mit dunklem Akzent und einem kleinen Punkt am rechten Rand, der hüpft, während der Block heller wird und beim Hovern oder Tastaturfokus ein sanftes Leuchten erzeugt.

Flat to flow button

2661Flat to flow buttonSchaltflächenEin flacher, solider Knopf, der sich in ein breites zweifarbiges Band verwandelt, das endlos über die Vorderseite läuft, wenn man darüber schwebt oder fokussiert ist.

Traveling underglow pill

2668Traveling underglow pillSchaltflächenEine Kapsel, deren zweifarbiges Farbband sich beim Schweben seitwärts bewegt, während eine verschwommene Kopie dahinter die Oberfläche darunter beleuchtet.

Ticker swap button

2682Ticker swap buttonSchaltflächenEin Pillenknopf, dessen Beschriftung beim Schweben durch einen endlosen Ticker mit demselben Wort ersetzt wird, der seitwärts über die Vorderseite läuft.

Bouncing download button

2710Bouncing download buttonSchaltflächenEin kompakter, dunkler Download-Chip, der von selbst sanft springt, um die Aufmerksamkeit auf sich zu ziehen, stillsteht, sobald ein Zeiger oder der Tastaturfokus ihn erreicht, und beim Drücken seinen Pfeil mit einer Neigung vertauscht.

Looping text ribbon

2828Looping text ribbonTexteffekteEin farbiges Band trägt einen sich wiederholenden Satz entlang einer wellenförmigen, kreisförmigen oder bogenförmigen Bahn und rollt endlos wie ein Siegel oder Abzeichen.

Typewriter sentence cycle

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.

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)