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.

26 von 26

Tilt card

1545Tilt cardKartenEine Inhaltskarte, die sich mit einem beweglichen Blick in 3D in Richtung des Zeigers dreht, beim Einrasten angehoben wird und beim Verlassen des Zeigers wieder auf die gleiche Ebene zurückspringt.

Pointer tilt card

1735Pointer tilt cardAnimationEine Karte, die sich dreidimensional zum Zeiger neigt, mit einem Glanz, der über die Vorderseite gleitet, und einer Feder, die sie beim Herausnehmen wieder auf die gleiche Höhe bringt.

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.

Twin Sweep Tile

1756Twin Sweep TileSchaltflächenEine Kachel mit quadratischem Umriss, die sich beim Anheben neigt, zwei schräge Lichtbänder in entgegengesetzte Richtungen über sich zieht und ihre Glyphe gegen eine Beschriftung eintauscht.

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.

Holographic ID card

1865Holographic ID cardKartenEine Personenkarte, die sich in Richtung des Zeigers neigt, während ein holografischer Glanz über ihre Vorderseite gleitet, mit einem Fußzeilenstreifen, der den Avatar, den Griff, den Status und eine Kontakttaste trägt.

Pointer tilt photo card

1877Pointer tilt photo cardKartenEine beschriftete Fotokarte, die sich auf einer Feder in Richtung des Zeigers neigt und bei der Drehung ein sanfter Glanz über die Vorderseite gleitet.

Tilt Parallax Tile

1897Tilt Parallax TileKartenEine Kachel, die sich auf Federn in 3D in Richtung des Zeigers neigt, eine Überlagerungsebene über ihre Oberfläche hebt und eine kleine Beschriftung nachzieht, die sich mit der Cursorgeschwindigkeit neigt.

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.

Consequence confirm dialog

1943Consequence confirm dialogÜberlagerungenEin Bestätigungsdialog, der von einem ausgewählten Rand aus angezeigt wird und die Seite blockiert, bis der Besucher den Vorgang ausdrücklich abbricht oder fortfährt.

Tilted perspective button

2068Tilted perspective buttonSchaltflächenEin runder Call-to-Action, der in einer permanenten 3D-Perspektive angezeigt wird und beim Überqueren der Platte in Richtung des Zeigers wackelt.

Edge-tilt alert modal

2147Edge-tilt alert modalÜberlagerungenEin Warnmodal für irreversible Aktionen, das sich mit einem federnden Überschwingen von der Unterkante anhebt und nach oben kippt und nur über seine eigenen Tasten schließt.

Perspective reveal dialog

2204Perspective reveal dialogÜberlagerungenEin Allzweckdialog, dessen Bedienfeld von einer ausgewählten Kante in 3D nach innen geneigt und dann abgeflacht wird, um beliebigen Inhalt auf einer abgeblendeten Seite anzuzeigen.

Tilt-in content frame

2253Tilt-in content frameÜberlagerungenEin Informationsfeld, das sich von einer Kante nach innen neigt, sich durch Klicken oder Escape von außen frei schließen lässt und sich sanft vergrößert, wenn ein zweiter Inhaltsabschnitt angezeigt wird.

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.

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.

Tilting Backer Tile

2450Tilting Backer TileSchaltflächenEine quadratische, durchscheinende Fliese mit einer genau dahinter liegenden einfarbigen Platte, die beim Schweben unter der Fläche hervorkippt.

Outset ring tilt button

2544Outset ring tilt buttonSchaltflächenEin Knopf im Abzeichen-Stil mit einem dicken Ring, der an der Außenseite schwebt, der wächst, sich um ein paar Grad neigt und beim Schweben einen harten Schatten wirft.

Squaring backer button

2567Squaring backer buttonSchaltflächenEine solide Pille mit einem geneigten Zwilling dahinter, der beim Schweben gerade einrastet und aufleuchtet, während sich von links neben dem Etikett ein Pfeil entfaltet.

Split shutter reveal button

2573Split shutter reveal buttonSchaltflächenEin runder Knopf, dessen zwei Beschriftungshälften sich unterschiedlich schnell zu den Rändern zurückziehen und beim Kippen des Ganzen das Atemzeichen darunter freilegen.

Tilting send button

2581Tilting send buttonSchaltflächenEine blasse Sendeschaltfläche, deren Glyphe beim Auslösen auf der Tastatur mit der Nase nach oben zeigt und beim Auslösen einen Bogen über die Kante bildet und dann zurückgesetzt wird.

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.

Tilt pop button

2693Tilt pop buttonSchaltflächenEin kleiner, fester Knopf, der sich beim Schweben vergrößert und um ein paar Grad zur Seite neigt und dann beim Drücken wieder flach auf die Oberfläche sinkt.

Drifting mesh tilt

2713Drifting mesh tiltSchaltflächenEine Pille, die in einer leichten dreidimensionalen Neigung gehalten wird, während sanfte Lichtblüten unter ihrer Oberfläche schweben und beim Schweben oder Fokussieren zwischen zwei Posen hin- und herschaukeln.

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)