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

Bulging dot field

1671Bulging dot fieldHintergründeEin feines Punktraster, das sich unter dem Cursor nach außen ausdehnt, wie von hinten geschobener Stoff, und in dem Moment, in dem der Zeiger weiterbewegt wird, mit einem sanften Überschwingen zurückfedert.

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.

Gooey blob trail

1777Gooey blob trailCursorEine Kette von Formen verfolgt den Zeiger und verschmilzt zu einem flüssigen Klumpen, der sich bei der Bewegung ausdehnt und sich sammelt, wenn er anhält.

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.

Neon trail cursor

1788Neon trail cursorCursorEin sich verjüngender Lichtstrahl lief durch den aktuellen Weg des Zeigers, heiß und breit am Kopf, dünner werdend und zum Schwanz hin wechselnd.

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.

Pointer takeover zone

1795Pointer takeover zoneCursorEin Panel, das den Systemcursor verbirgt, während sich der Zeiger darin befindet, und an dessen Stelle eine eigene Markierung zeichnet, die beim Betreten ein- und beim Beenden wieder verschwindet.

Tile trail

1796Tile trailCursorEin Wegweiser, der kleine abgerundete Kacheln entlang des Weges fallen lässt, die jeweils aus einem recycelten Pool auftauchen und verschwinden, während neuere an ihre Stelle treten.

Ribbon trail flow

1803Ribbon trail flowCursorMehrere farbige Bänder jagen den Zeiger auf ihren eigenen Federn, verjüngen sich zu einer Spitze und flechten sich auseinander, während sich der Zeiger dreht.

Smoke trail cursor

1806Smoke trail cursorCursorEine sanfte, wirbelnde Wolke, die dem Zeiger wie Rauch folgt, sich wieder zusammenrollt, wenn Sie die Richtung ändern, und sich auflöst, wenn Sie anhalten.

Spring lag trail

1809Spring lag trailCursorEine Kette von Kreisen, die den Zeiger mit immer weicheren Federn verfolgen, sodass sie sich bei schneller Bewegung zu einem Kometenschweif ausdehnen, der sich im Ruhezustand wieder zusammenzieht.

Stamped cursor trail

1812Stamped cursor trailCursorKleine Karten, die in festgelegten Abständen entlang des Zeigerpfads eingestanzt sind, fallen jeweils mit einer Neigung hinein und altern hinter dem Cursor heraus.

Swarm trail cursor

1815Swarm trail cursorCursorEine Wolke aus weichen Klecksen umkreist den Zeiger innerhalb eines Panels, hinterlässt sich verjüngende Spuren und verschmelzt dort, wo sie sich überlappen, zu einer Form.

Trailing cursor

1820Trailing cursorCursorEin gezeichneter Cursor, der dem echten Zeiger auf einer Feder folgt und dabei ein sanftes Leuchten und verblassende Nachbilder hinterlässt, während er sich in die Richtung dreht, in die er sich bewegt.

Velocity comet trail

1823Velocity comet trailCursorEine Kette von Punkten, von denen jeder mit Trägheit den vor ihm liegenden Punkt verfolgt, sich bei schnellen Bewegungen zu einem Kometen ausdehnt und sich im Ruhezustand wieder zu einem Cluster zusammenrollt.

Zoned cursor tag

1824Zoned cursor tagCursorEin benutzerdefinierter Zeiger, dessen nachgestelltes Tag sich selbst neu schreibt und auf die andere Seite dreht, wenn er zwischen den Zonen eines geteilten Panels wechselt.

Pointer spotlight card

1830Pointer spotlight cardKartenEine Karte, deren Rand nur entlang des Bogens leuchtet, der dem Cursor am nächsten liegt, mit einer weichen Innenfarbe, die dem Zeiger folgt und sich zurückzieht, wenn er ihn verlässt.

Particle Field

2000Particle FieldHintergründeEin Leinwandfeld aus weichen, schwebenden Punkten, die von selbst schweben und sich mit einer sanften magnetischen Anziehungskraft zum Zeiger neigen und sich zurückziehen, sobald er sich entfernt.

Human Typing Rhythm

2003Human Typing RhythmTexteffekteTippt eine Reihe von Phrasen mit unregelmäßigem, menschenähnlichem Timing durch, löscht die meisten vor der nächsten, lässt die letzte Phrase jedoch auf dem Bildschirm, bevor die gesamte Sequenz in einer Schleife abläuft.

Typing cursor text

2076Typing cursor textTexteffekteEin Satz tippt ein Zeichen nach dem anderen hinter einem blinkenden Cursor ein, hält an, löscht dann rückwärts und gibt die nächste Zeile in einer Endlosschleife ein.

Cursor-chasing tooltip

2137Cursor-chasing tooltipÜberlagerungenEine Hinweisblase, die beim Schweben oder Fokussieren erscheint und gleiten kann, um dem Zeiger zu folgen, während er sich über den Auslöser bewegt.

Keystroke Text

2177Keystroke TextTexteffekteDer Text wird zeichenweise angezeigt, als würde er live eingegeben, mit einem blinkenden Cursor, der nach Abschluss der Eingabe weiterläuft.

2182Linked Profile PreviewÜberlagerungenEine umfangreiche Vorschaukarte, die angezeigt wird, wenn ein Besucher mit der Maus über einen verknüpften Namen fährt oder diesen fokussiert. Sie zeigt einen Avatar, eine Biografie und Follower-Statistiken sowie optional einen Cursor-Folge-Float.

Single line typewriter caret

2430Single line typewriter caretTexteffekteEin einzelner Satz wird einmal in einem ungleichmäßigen, menschlichen Tempo getippt, dann blinkt eine durchgehende Einfügemarke ununterbrochen neben der fertigen Zeile.

Typewriter caption

2457Typewriter captionTexteffekteEine Beschriftung wird zeichenweise in einem gleichmäßigen Tempo eingegeben, mit einem durchgehenden Blockcursor, der weiter blinkt, nachdem die Zeile fertig ist.

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)