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 65

Das vollständige Suchverzeichnis wird geladen.

Dock menu

1528Dock menuNavigationEin unteres Dock, dessen Symbole ihre Größe vom Zeigerabstand annehmen, mit einer Beschriftung über dem Symbol unter dem Cursor und einem Punkt unter dem aktiven.

Magnetic button

1531Magnetic buttonSchaltflächenEine Schaltfläche, die sich auf den Zeiger zubewegt, während er sich innerhalb eines festgelegten Radius befindet, und in die Ruhestellung zurückspringt, wenn er ihn verlässt, wobei sich die Beschriftung und der Pfeil etwas weiter als der Körper verschieben.

Particle drift

1536Particle driftHintergründeEin Leinwandfeld aus langsam treibenden Partikeln, die sich an den Rändern umhüllen, sich mit schwachen Linien verbinden und an der Stelle verschwinden, an der der Zeiger vorbeiläuft.

1548Arrow iconSymboleEin Pfeil in voller Länge, der sich entlang seiner eigenen Achse bewegt, mit gepaarten Pfeilen für die beiden Richtungen.

Bouncing sphere pit

1670Bouncing sphere pitHintergründeEine kastenförmige Grube aus schweren Kugeln, die fallen, aneinander stoßen und sich stapeln und zerstreuen, wann immer der Cursor durch sie watet.

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.

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.

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.

Gravity dust field

1703Gravity dust fieldHintergründeEin langsames Feld leuchtender Staubflecken, die sich zum Zeiger hin oder von ihm weg biegen und umso heller aufleuchten, je näher sie kommen.

Light Beam Flare

1714Light Beam FlareHintergründeEin schmaler Strahl fällt von der Spitze einer dunklen Bühne in einen breiten horizontalen Lichtkegel mit treibendem Dunst und einem Strahl, der sich zum Zeiger hin neigt.

Liquid metal drift

1718Liquid metal driftHintergründeVom Rand beleuchtete Klumpen schwerer Flüssigkeit bilden sich, dehnen sich aus und verschmelzen über ein schwarzes Feld und wölben sich zum Zeiger hin wie Eisenspäne zu einem Magneten.

Liquid swirl vortex

1719Liquid swirl vortexHintergründeZwei Pfützen dicker Farbe, gefaltet um einen langsamen Strudel, mit harten Kanten und klobigen Pixeln, die den Eindruck erwecken, gedruckt und nicht gerendert zu sein.

Magnetic particle ring

1720Magnetic particle ringHintergründeEin schwebendes Feld winziger Punkte, die der Zeiger einfängt, zu einem welligen Ring neu anordnet und sie bei der Weiterbewegung wieder freigibt.

Magnetic pull target

1721Magnetic pull targetAnimationEine Kachel, die sich in Richtung des Zeigers neigt, wenn sie sich innerhalb eines festgelegten Radius befindet, wobei sie umso stärker zieht, je näher sie kommt, und sich nach unten bewegt, wenn der Zeiger ihn verlässt.

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 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.

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.

Bracket lock cursor

1764Bracket lock cursorCursorEin benutzerdefinierter Zeiger aus vier Eckklammern, der sich im Leerlauf dreht und um jedes als Ziel markierte Element herum einrastet.

Drag tile track

1771Drag tile trackAnimationEin Plättchen, das Sie um eine begrenzte Strecke werfen können, das sich in den Widerstand neigt, über die Kanten hinweg Widerstand leistet und mit Schwung zum Stillstand kommt.

Fluid Splash

1776Fluid SplashCursorBeim Ziehen über das Bedienfeld wird die Tinte durch eine flüssige Simulation gedrückt, sodass die Farbe hinter dem Zeiger aufsteigt, sich kräuselt und sich langsam auflöst.

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.

Lagging orb follower

1783Lagging orb followerCursorEine weiche Scheibe, die auf einer bewusst nachgiebigen Feder dem Zeiger nachjagt, an ihm vorbeischwingt und zurückwackelt, anstatt festzuhalten.

Magnetic project target

1786Magnetic project targetCursorEin benutzerdefinierter runder Cursor mit umlaufendem Text, der dem Zeiger folgt und bei Annäherung an einer Call-to-Action-Pille einrastet.

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.

Pointer label cursor

1794Pointer label cursorCursorInnerhalb eines begrenzten Panels wird der Systemcursor durch einen gezeichneten Pfeil ersetzt, hinter dem auf einer weichen Feder ein kleiner Namenschip läuft.

Edge tracking glow card

1854Edge tracking glow cardKartenEine Karte, deren Umriss nur dort aufleuchtet, wo sich der Zeiger der Karte nähert. Sie wird heller, wenn Sie sich dem Rand nähern, und wird in der Nähe der Mitte dunkel.

Click ripple burst

1937Click ripple burstStatusmeldungenEin Zeiger-Feedback-Effekt, der eine kurze animierte Form genau dort erzeugt, wo der Benutzer klickt oder tippt.

Cursor fluid trail

1947Cursor fluid trailHintergründeEin dunkles Feld, über das beim Ziehen des Zeigers farbige Flüssigkeit verschmiert wird und der Fleck sich nach dem Anhalten des Zeigers weiter wellt und dünner wird.

Orbit Pointer Nav

2007Orbit Pointer NavNavigationEin kreisförmiger Navigationsring, bei dem sich ein mittlerer Zeiger dreht, um auf die aktive Abschnittsschaltfläche zu zielen, und bei der sich die Schaltflächen bei Auswahl zu beschrifteten Pillen erweitern.

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.

Focus Lens

2155Focus LensAnimationEine umrissene Form, die überall weich und unscharf bleibt, außer in einem kleinen Kreis, der dem Zeiger folgt und dort scharf einrastet.

Gooey blob field

2159Gooey blob fieldAnimationEin Feld aus weichen Klecksen, die gesäte Pfade umkreisen und bei Annäherung miteinander verschmelzen, mit einem zusätzlichen Klecks, der dem Zeiger folgt.

Pointer Magnet

2206Pointer MagnetAnimationEine Hülle, die alles, was sie hält, in Richtung des Zeigers treiben lässt, während sie sich in einer gepolsterten Fangzone befindet, und dann zurückgleiten kann, um zur Ruhe zu kommen.

Dodging eyes button

2510Dodging eyes buttonSchaltflächenEine dunkle Kapsel mit zwei blinkenden Cartoon-Augen, die in die Ecke springt, die am weitesten von Ihrem Zeiger entfernt ist, während ihre Pupillen Sie weiterhin beobachten.

Hairline trace submit

2647Hairline trace submitSchaltflächenEine dunkle Senden-Schaltfläche, deren ein Pixel langer Haaransatz aufleuchtet, der von der Kante, auf die der Mauszeiger eingegeben hat, um den Umfang herum verläuft und sich dann auf die gleiche Weise wieder zurückzieht.

Floating text trail

2833Floating text trailCursorEin dunkles Feld, auf dem durch Bewegen des Zeigers schwebende Kopien eines Wortes entlang des Bewegungspfads fallen gelassen werden, die jeweils kurz auf und ab wackeln, bevor sie verschwinden.

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)