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.

35 von 35

Masonry flow

1532Masonry flowLayoutEine Mauerwerkswand, die Kacheln unterschiedlicher Höhe in Säulen packt, jede einzelne anhebt, während sie ins Blickfeld gescrollt wird, und das gesamte Raster neu positioniert, wenn sich die Anzahl der Säulen ändert.

1552Blocks iconSymboleDrei quadratische Blöcke, die in einem L angeordnet sind und einer nach dem anderen hüpfen, als würden Teile zusammengesteckt.

1568Layout dashboard iconSymboleVier Armaturenbrettkacheln in zwei ungleichmäßigen Spalten, die jeweils abwechselnd atmen, sodass das Raster von links oben nach rechts unten wellenförmig verläuft.

Blinking grid pattern

1668Blinking grid patternHintergründeEin haarfeine quadratische Gitterstruktur, in der verstreute Zellen nach oben und unten verblassen und jeweils zu einer neuen Zelle springen, wenn ihr Blinzeln endet.

Blur reveal

1669Blur revealAnimationEin Wrapper, der sein untergeordnetes Element unscharf und leicht versetzt hält, bis es zum ersten Mal in das Ansichtsfenster eintritt, dann die Unschärfe auflöst und die Lücke in einer Bewegung schließt.

Cursor trail grid

1681Cursor trail gridHintergründeEin Gitter aus umrissenen Zellen, die unter dem Zeiger aufleuchten, langsam abkühlen, sobald er sich bewegt, und eine verblassende Spur hinterlassen.

1693Flickering glyph gridHintergründeEin dichtes Raster aus monospaced Zeichen, in denen eine zufällige Handvoll Buchstaben und Farben bei jedem Tick vertauscht und dabei zwischen den Farbtönen wechselt.

Flickering square mesh

1694Flickering square meshHintergründeEin Leinwandnetz aus kleinen Quadraten, in dem zufällige Zellen in jedem Bild eine neue Helligkeit annehmen und so eine unruhige Statik erzeugen, die sich nie wiederholt.

Graph paper grid

1702Graph paper gridHintergründeEin sich wiederholendes Gitter aus Haarlinien, das sich über den Behälter erstreckt und zu den Rändern hin verblasst, mit einer kleinen Ansammlung von Zellen, die zu einer Akzentfarbe aufleuchten und wieder abfließen.

Hex cell grid

1706Hex cell gridHintergründeEine Wabe aus abgeschnittenen Sechseckzellen, die unter dem Zeiger aufleuchten, dann wieder abkühlen und eine verblassende Spur hinterlassen.

Perspective floor grid

1731Perspective floor gridHintergründeEine von der Kamera weg geneigte Gitterebene, sodass sie sich zum Horizont zurückzieht und in einer nahtlosen Ein-Zellen-Schleife auf den Betrachter zu gleitet.

Pointer lit lattice

1733Pointer lit latticeHintergründeEin Leinwandgitter, dessen Zellen aufleuchten, wenn der Zeiger vorbeiläuft, gehalten wird und dann abklingt, wobei ein Druck einen Lichtring sendet, der sich bis in die entferntesten Ecken ausdehnt.

Scanning wire grid

1744Scanning wire gridHintergründeEin perspektivisches feines Drahtgitter neigt sich mit dem Zeiger, während ein helles Band in einer Schleife darüber streicht und jede Linie, die es kreuzt, beleuchtet.

Shockwave dot grid

1746Shockwave dot gridHintergründeEin Punktraster, das sich zum Cursor hin verfärbt und sich ringförmig nach außen ausdehnt, wenn Sie darauf klicken oder darüber streichen.

Tilted tile parallax

1753Tilted tile parallaxHintergründeReihen beschrifteter Kacheln auf einem geneigten, übergroßen Gitter gleiten beim Überqueren des Zeigers in entgegengesetzte Richtungen, wobei jede Reihe mit ihrer eigenen Verzögerung ankommt.

Warped tile tunnel

1761Warped tile tunnelHintergründeEin dunkler Hintergrund, gefliest mit leuchtenden Quadraten, die sich durch eine Linse wölben, mit hellen Ringen, die sich von der Mitte für immer nach außen drängen.

Bobble tile grid

1763Bobble tile gridAnimationEin Gitter aus farbigen Kacheln, die auf einer Feder vom Zeiger wegbewegen und umso stärker abprallen, je schneller der Zeiger darüber gleitet.

Iron filings field

1781Iron filings fieldAnimationEin quadratisches Gitter aus winzigen Strichen, die sich alle drehen, um auf den Zeiger zu zeigen, wie Eisenspäne, die an einem darüber gezogenen Magneten einrasten.

Pixel Wake

1793Pixel WakeCursorUnter dem Zeiger leuchtet ein grobes Zellengitter auf, kühlt sich dahinter wieder ab und hinterlässt eine blockartige Spur auf dem Panel.

Tilt Spotlight Grid

1817Tilt Spotlight GridKartenEin Fähigkeitsraster, bei dem die schwebende Karte zum Zeiger geneigt wird und aufleuchtet, während alle anderen Karten dunkler werden und zurückschrumpfen.

Tilting cube field

1818Tilting cube fieldAnimationEin Gitter aus hohlen Würfeln, die sich innerhalb eines Abfallradius zum Zeiger neigen, von alleine wandern, wenn sie in Ruhe gelassen werden, und bei einem Klick in Ringen nach außen blitzen.

Activity cell heatmap

1840Activity cell heatmapDiagrammeEin Kalenderraster aus kleinen getönten Quadraten, das in einer diagonalen Welle verläuft und es einem ebenen Streifen ermöglicht, jeweils eine Intensität zu isolieren.

Edge Faded Plot Grid

1853Edge Faded Plot GridDiagrammeEin Handlungshintergrund aus gestrichelten Linien, die an den Rändern ausgeblendet werden, mit einer hervorgehobenen Grundlinie und einem daran entlang verlaufenden Lichtband.

Dot matrix status pill

1950Dot matrix status pillStatusmeldungenEine Pillentaste, deren linke Seite aus einem Raster mit fünf mal fünf Punkten besteht und für jeden Zustand ein kurzes Schleifenmuster abspielt, wobei die Beschriftung im Takt wechselt.

Bar wave matrix

2112Bar wave matrixHintergründeEin Gitter aus kurzen Stäben, bei dem jeder Stab auf seiner eigenen Bahn gleitet und der Phasenversatz von Reihe zu Reihe das gesamte Gitter in eine Wanderwelle verwandelt.

Compass bar grid

2127Compass bar gridAnimationEin Gitter aus kurzen Balken, die sich alle drehen, um auf den Zeiger zu zeigen, sodass das Feld aussieht, als würden Eisenspäne einen Magneten finden.

Pulse grid mesh

2210Pulse grid meshHintergründeEin quadratisches Drahtgeflecht, das in langsamen Ringen von der Mitte nach außen anschwillt, in der Mitte am hellsten ist und verschwindet, bevor es die Ränder erreicht.

Rubber sheet panel

2218Rubber sheet panelAnimationEin Panel, das sich wie gedehntes Gummi verhält: Der Zeiger greift danach, benachbarte Punkte ziehen mit, und wenn man es loslässt, schnappt es mit einem Wackeln zurück.

Tile reveal swap

2252Tile reveal swapAnimationZwei Felder tauschen ihre Plätze Kachel für Kachel, wobei sich jede Kachel dreht und skaliert, während sie umgedreht wird, in einer Reihenfolge, die von der Mitte, den Rändern oder einer Spirale aus gesteuert wird.

Channel tile row

2313Channel tile rowSchaltflächenEine umlaufende Reihe quadratischer Symbolkacheln unter einer kleinen Beschriftung, wobei jede Kachel beim Schweben in ihre eigene reservierte Farbe überblendet.

Reactive bento panels

2409Reactive bento panelsLayoutEin Bento-Gitter aus Panels, die auf den Mauszeiger leuchten, sich in 3D neigen, in Richtung des Cursors driften und beim Klicken vor Partikeln und Wellen platzen.

Ripple Origin Grid

2415Ripple Origin GridLayoutEin Gitter aus farbigen Kacheln, die in einer Welle aufleuchten, die von einer ausgewählten Kachel nach außen ausstrahlt, abhängig von der Entfernung zu dieser Kachel.

Shared layout card expand

2427Shared layout card expandÜberlagerungenEin Kartenraster, bei dem durch Klicken auf eine Karte ein großes Detailfenster angezeigt wird und beim direkten Wechsel zu einer anderen Karte derselbe Reflow neu ausgerichtet wird, anstatt ihn zu schließen und dann wieder zu öffnen.

Spoke area chart

2436Spoke area chartDiagrammeEin Polardiagramm, bei dem beschriftete Speichen eine Reihe als durchscheinende geschlossene Form über einem Polygongitter tragen, mit einer Anzeige, die an der nächstgelegenen Speiche einrastet.

Vertex Dot Radar

2460Vertex Dot RadarDiagrammeEin Polardiagramm mit einer einzelnen Serie, das an jeder Achsenecke einen durchgezogenen Punkt anheftet, sodass jeder Messwert als Punkt und nicht nur als Silhouette angezeigt wird.

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)