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 38

Das vollständige Suchverzeichnis wird geladen.

Aurora veil

1526Aurora veilHintergründeEin randloser Hintergrund aus drei wandernden Lichtbändern, die sich dort kreuzen, wo sie sich kreuzen, auf einem dunklen Grund, mit einer Beschriftungsebene, die lesbar bleibt.

Aurora curtain

1666Aurora curtainHintergründeAm oberen Rand hängt ein weicher Lichtvorhang, dessen unterer Saum sich auf einer langsamen Rauschwelle hebt und senkt, während sich seine Farbe über die Breite ändert.

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.

Drifting Light Beams

1688Drifting Light BeamsHintergründeHohe, geneigte Lichtbalken wandern mit unterschiedlicher Geschwindigkeit nach oben und verschmelzen zu einem sich langsam verändernden Dunst.

Gradient slat spotlight

1700Gradient slat spotlightHintergründeVertikale Lamellen verbergen einen Farbverlauf, bis ein sanfter Scheinwerfer den Zeiger über sie führt und jede Lamelle beleuchtet, die er berührt.

Grain wash

1701Grain washHintergründeZwei Farbpools gehen über das Bild hinweg ineinander über, während eine langsame Verzerrung ihren Rand in Bewegung hält, alles unter einer starken Filmkörnung.

Light column beam

1716Light column beamHintergründeEine einzelne Lichtsäule steht in einem dunklen Rahmen und atmet in die Breite, während ihre innere Textur durch einen Zweifarbgrad nach oben scrollt.

Pointer angle sweep

1732Pointer angle sweepHintergründeEin Panel, das durch eine konische Kurve beleuchtet wird, deren Ursprung unter dem Zeiger liegt und deren helle Kante darauf zurückzeigt und die sich langsam im Leerlauf dreht, wenn der Zeiger weggeht.

Pointer ripple mesh

1734Pointer ripple meshHintergründeEine Farbplatte wird durch ein grobes Netz abgetastet, dessen Zellen sich merken, wo sich der Zeiger befunden hat. Durch Ziehen wird das Bild verwischt und die Verschmierung entspannt sich wieder.

Shifting gradient pill

1745Shifting gradient pillSchaltflächenEin Kapselknopf mit einer übergroßen diagonalen Rampe, die beim Betätigen über das Gesicht gleitet, während zwei leuchtende Ecken zwischen einem hellen und einem tiefen Farbton desselben Farbtons wechseln.

Sliding Pin Swap

1747Sliding Pin SwapSchaltflächenEine rampenförmige Schaltfläche, deren Pin-Glyphe von einer Seite zur anderen gleitet, während das ruhende Wort ausgeblendet und dahinter eine Antwort eingeblendet wird.

Smoke veil drift

1748Smoke veil driftHintergründeBreite Schichten aus farbigem Dunst überqueren schräg ein schwarzes Feld und werden dünner und dicker, während sie aneinander vorbeigleiten.

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.

Glow halo button

1828Glow halo buttonSchaltflächenEin Pillenknopf mit einem Duplikat seiner selbst, das dahinter verschwommen ist, so dass schwebend ein heller, farbiger Heiligenschein erblüht, während die Füllung langsam dahinschwebt.

Drifting Gradient Button

1851Drifting Gradient ButtonSchaltflächenEine Schaltfläche, deren diagonale zweifarbige Füllung übergroß ist und nie aufhört zu gleiten, schneller zu laufen, wenn man mit der Maus darüber fährt, und beim Klicken zusammengedrückt wird.

Gradient Area Chart

1860Gradient Area ChartDiagrammeZwei gestapelte monatliche Serien, die als glatte Bereiche gezeichnet sind, deren Füllungen von einem kräftigen Farbton am oberen Rand nach unten zu einem nahezu klaren Farbton an der Grundlinie verblassen.

Gradient swap button

1862Gradient swap buttonSchaltflächenEine abgerundete Schaltfläche, deren diagonale Schattierung beim Schweben ihre beiden Stopps wechselt, sodass die helle Ecke über das Gesicht wandert.

Sheen sweep card

1886Sheen sweep cardKartenEine Karte mit einem Lichtband an einer Ecke, das sich beim Schweben über die Vorderseite bewegt und zurückgleitet, sobald der Zeiger weggeht.

Stacked blur fade

1891Stacked blur fadeScrollenEine Scroll-Panel-Kante, die durch mehrere gestapelte Hintergrundunschärfen anstelle eines flachen Unschärfebands in die Panelfarbe übergeht.

Brightening gradient button

1926Brightening gradient buttonSchaltflächenEin tiefer zweifarbiger Chip, dessen vertikale Waschung beim Schweben zu einem viel helleren Paar derselben Familie aufsteigt, mit einem festen Glas-Highlight an der Oberkante.

Flow Area Chart

1961Flow Area ChartDiagrammeEin Zeitreihen-Flächendiagramm mit einer Verlaufsfüllung, die sich beim Laden einzieht und beim Bewegen des Mauszeigers ein Fadenkreuz mit einem Wert-Tooltip anzeigt.

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.

Gradient shift text

1970Gradient shift textTexteffekteEine abgerundete Pille, deren Text mit einem zweifarbigen Farbverlauf gefüllt ist, der kontinuierlich seitwärts durch die Buchstaben verläuft.

Gradient sweep heading

1971Gradient sweep headingTexteffekteEine große Überschrift, deren Füllung aus einem sich bewegenden Farbverlaufsband besteht, das kontinuierlich von einem Rand zum anderen verläuft und dem Text einen glänzenden, sich ständig verändernden Glanz verleiht.

Charge Up Action Button

2314Charge Up Action ButtonSchaltflächenEine Kohlepille, die beim Schweben zu einem gesättigten Farbverlaufsschlüssel aufleuchtet und von der Oberfläche abhebt, während sich ihre Markierung dreht und heller wird.

Speckled gradient button

2434Speckled gradient buttonSchaltflächenEine Fläche mit Farbverlauf mit zwei Stufen, überlagert mit erzeugtem fraktalem Rauschen in einer weichen Mischung, sodass die Farbe aussieht, als wäre sie auf rauem Material gedruckt.

Gradient tilt pill

2474Gradient tilt pillSchaltflächenEine vollständig abgerundete Pille, deren zweifarbige Farbverlaufsfüllung beim Schweben ihren Winkel ändert und beim Drücken dunkler in Richtung des Farbtons kippt.

Panning gradient button

2483Panning gradient buttonSchaltflächenEine gewölbte Taste, deren übergroßer diagonaler Farbverlauf beim Schweben über die Fläche schwebt und ein helleres Band von einer Ecke zur anderen zieht.

Settling shadow button

2592Settling shadow buttonSchaltflächenEine warme Farbverlaufspille, die über einem großen, akzentuierten Schatten schwebt und im Schwebezustand landet, wenn der Schatten verschwindet.

Rim to fill gradient button

2635Rim to fill gradient buttonSchaltflächenEine dunkle Schaltfläche zeigt im Ruhezustand nur einen dünnen Farbverlaufsrand; Wenn Sie den Mauszeiger darüber bewegen, wird das innere Panel abgelegt, sodass der Farbverlauf die gesamte Fläche überflutet, und durch Drücken wird es nach unten gedrückt.

Frame draw button

2646Frame draw buttonSchaltflächenEin gefüllter Knopf, der beim Schweben seine Füllung entleert, während vier dünne Balken aus gegenüberliegenden Ecken herausragen, um einen vollständigen Rahmen zu zeichnen, und beim Verlassen kehrt dann alles zurück.

Overhead light pill

2650Overhead light pillSchaltflächenEin dunkler Pillenknopf, der von einem sanften Lichtkegel über dem Kopf beleuchtet wird, der beim Schweben als Ganzes dunkler wird und beim Fokussieren seinen dicken äußeren Ring aufhellt.

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.

Amber upload pill

2707Amber upload pillSchaltflächenEin warmer Farbverlaufs-Upload-Pill mit einem hellen Rand, der den Farbstich verbreitert und das Etikett beim Schweben von hinten beleuchtet.

Flowing gradient text

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

Sweeping shine text

2822Sweeping shine textTexteffekteMit einem gedämpften Farbverlauf und einem hellen diagonalen Band gefüllter Text, der wie ein Lichtschimmer hin und her schwebt und beim Bewegen an Ort und Stelle einfrieren kann.

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)