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.

32 von 32

1567Layers iconSymboleGestapelte Blätter in der Perspektive gesehen, wobei das obere zuerst angehoben wird und die unteren einen Schlag später folgen.

Drifting glass shards

1686Drifting glass shardsHintergründeEin langsamer Strom aus durchscheinenden Splittern, die aufblitzen, während sie fallen, sich vom Cursor verstreuen und sich wieder sammeln, wenn der Zeiger stillsteht.

Light beam slats

1715Light beam slatsHintergründeLange diagonale Lamellen gleiten im Dunkeln aneinander vorbei und fangen beim Überqueren jeweils einen Lichtstreifen ein, sodass die Platte wie eine beleuchtete Jalousie atmet.

Parallax Starfield

1727Parallax StarfieldHintergründeDrei Schichten verstreuter Punkte scrollen unterschiedlich schnell nach oben und gleiten gegen den Zeiger, sodass das Feld an Tiefe gewinnt.

Tunnel Warp Panel

1755Tunnel Warp PanelHintergründeDer Inhalt befindet sich an der Mündung eines vierwandigen Gittertunnels, während schmale Strahlen an jeder Wand entlang zum Betrachter rasen.

Deep Slab Button

1825Deep Slab ButtonSchaltflächenEine hohe Platte, die auf einem langen diagonalen Schatten über der Seite schwebt und beim Schweben darauf sinkt und dann beim Klicken flach aufschlägt.

Press block button

1831Press block buttonSchaltflächenEin abgerundeter Blockknopf, der auf einer soliden Schattenleiste ruht, die sich beim Drücken des Knopfes nach unten verkürzt.

Key travel button

1835Key travel buttonSchaltflächenEin abgerundeter Schlüssel, der auf einem hohen Sockel steht, der sich beim Schweben verkürzt und unter dem Druck verschwindet, so dass der Schlüssel flach sitzt.

Lift and Sink Button

1868Lift and Sink ButtonSchaltflächenEine getönte Monospace-Taste, die beim Schweben nach oben schwebt und beim Drücken in ihrem eigenen Schatten versinkt.

Parallax plate gallery

1873Parallax plate galleryScrollenEine einrastende vertikale Galerie, in der die übergroße Indexnummer jeder Platte mit einer anderen Geschwindigkeit als die Platte selbst wandert, mit einer Scroll-Fortschrittsschiene am unteren Rand.

Radial sheen button

1878Radial sheen buttonSchaltflächenEin kurzer, schlüsselartiger Knopf, der von der oberen rechten Ecke aus beleuchtet ist und eine haarfeine Basiskante hat, die sich beim Drücken umdreht.

Settling Add Pill

1885Settling Add PillSchaltflächenEine kompakte Kapsel mit einem Pluszeichen, die sich durch drei Schattentiefen bewegt, wenn Sie darüber schweben und dann darauf drücken.

Tilted deck button

1898Tilted deck buttonSchaltflächenEin perspektivisch zurückgelegter Knopf wie ein Schlüssel auf einem geneigten Deck, der beim Schweben und Drücken weiter wegkippt und nach unten rutscht.

Comet rain

1941Comet rainHintergründeStreifen mit hellen Köpfen fallen von einem leuchtenden Punkt nahe der Spitze und krümmen sich beim Fallen nach außen, wobei die Geschwindigkeit durch ihre Tiefe bestimmt wird.

Drifting particle field

1952Drifting particle fieldHintergründeEine langsam taumelnde Wolke aus kleinen runden Punkten, von denen jeder auf seinem eigenen Weg treibt, wobei sich die gesamte Wolke vom Zeiger weg neigt.

Nested plate send button

2005Nested plate send buttonSchaltflächenEine geformte Pille, die in einer Trägerplatte sitzt, deren Schlagschatten sich beim Schweben verdichtet und beim Drücken flacher wird.

Pixel snowfall

2014Pixel snowfallHintergründeKlobiger Schnee mit niedriger Auflösung, der durch ein tiefes Volumen fällt, in der Nähe sind die Flocken fett und hell, in der Ferne sind es nur schwache einzelne Flecken.

Squash key button

2054Squash key buttonSchaltflächenEin Tastenkappenknopf, der flach unter den Zeiger gedrückt wird, während eine Grundplatte darunter herausgleitet und dann beim Festhalten auf die Platte fällt.

Glass Block Bars

2090Glass Block BarsDiagrammeEin Balkendiagramm, dargestellt als glänzende 3D-Glasblöcke mit perspektivischen Seiten- und Oberseiten und einem langsamen Lichtstrahl, der den höchsten Balken hinauf pulsiert.

Tilted plinth call to action

2254Tilted plinth call to actionSchaltflächenEin klobiger Call-to-Action, der auf einem einfarbigen Sockel ruht, leicht im Raum geneigt ist, der sich beim Schweben von seiner Basis abhebt und unter einer Presse sinkt.

Receding stack carousel

2411Receding stack carouselLayoutEin Karussell, bei dem Karten in die Ferne hinter der fokussierten Karte verschwinden und je weiter hinten sie liegen, dunkler und unschärfer wird.

Stacked shadow outline button

2500Stacked shadow outline buttonSchaltflächenEin monospaced-Umrissknopf, der auf einer Leiter aus gestapelten Schatten ruht, der sich zusammenzieht und beruhigt, während der Akzent sein Gesicht überflutet, und dann eine Schicht nach der anderen zurückfedert.

Soft inset press button

2533Soft inset press buttonSchaltflächenEine nahezu schwarze Platte, die über einem passenden Panel auf zwei gegenüberliegenden weichen Schatten liegt, sinkt beim Halten in die Oberfläche und erhebt sich beim Loslassen wieder.

Growing ledge button

2566Growing ledge buttonSchaltflächenEin solider Akzentknopf, der auf einer dunkleren unteren Leiste ruht, die beim Schweben dicker wird und sich anhebt, dann dünner wird und unter Druck sinkt.

Arcade dome button

2574Arcade dome buttonSchaltflächenEin runder Druckknopf, dessen gewölbte Kappe über einem dunkleren Sockel schwebt und beim Drücken bündig mit einem sichtbaren Tropfen sitzt.

Tilted Stack CTA

2586Tilted Stack CTASchaltflächenEin klobiger Call-to-Action, der gedreht über einem Stapel hart versetzter Schatten ruht und dann aufrecht unter dem Zeiger steht.

Three layer push button

2620Three layer push buttonSchaltflächenEine taktile Taste, die aus drei gestapelten Platten, einem Schlagschatten, einer dunklen Seitenwand und einer schwebenden Oberfläche besteht, die beim Schweben nach oben springt und beim Drücken sofort auf dem Boden landet.

Stacked plate press button

2655Stacked plate press buttonSchaltflächenEin klobiger, abgerundeter Knopf, der aus drei ineinandergreifenden Platten besteht, die beim Drücken auseinandergeschoben werden und beim Loslassen wieder einrasten.

Pressed ledge button

2690Pressed ledge buttonSchaltflächenEin solider Knopf, der auf einer dicken, dunkleren Unterkante ruht und sich beim Drücken zusammenfaltet, sodass die Kappe wie ein echter Schlüssel bündig abfällt.

Bevel press pill

2708Bevel press pillSchaltflächenEine dunkle, abgeschrägte Pille mit einem eingelassenen runden Chip am Ende, der beim Drücken in die Oberfläche einsinkt.

Keycap press button

2717Keycap press buttonSchaltflächenEine helle Tastenkappe mit echter Dicke, die aus gestapelten harten Schatten besteht, die sich nach unten bewegt und beim Drücken an Höhe verliert.

Extruded layer text

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.

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)