Composants

Curseur

Pointeurs, traînées et cibles personnalisés.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

20 sur 20

1764Bracket lock cursorCurseurUn pointeur personnalisé composé de quatre crochets d'angle qui tourne lorsqu'il est inactif et s'ouvre autour de tout élément marqué comme cible.

1776Fluid SplashCurseurLe fait de glisser sur le panneau pousse l'encre à travers une simulation fluide, de sorte que la couleur gonfle, s'enroule et se dissipe lentement derrière le pointeur.

1777Gooey blob trailCurseurUne chaîne de formes poursuit le pointeur et se fond en une seule goutte liquide qui s'étire en mouvement et se rassemble lorsqu'elle s'arrête.

1783Lagging orb followerCurseurUn disque souple qui poursuit le pointeur sur un ressort délibérément souple, le dépassant et vacillant en arrière au lieu de se verrouiller.

1786Magnetic project targetCurseurUn curseur rond personnalisé avec du texte entourant son bord qui dérive après le pointeur et s'enclenche sur une pilule d'appel à l'action lorsqu'il se rapproche.

1788Neon trail cursorCurseurUn faisceau de lumière effilé traversait la trajectoire récente du pointeur, chaud et large au niveau de la tête, s'amincissant et changeant de couleur vers la queue.

1793Pixel WakeCurseurUne grille grossière de cellules s'allume sous le pointeur et se refroidit derrière lui, laissant un sillage en blocs sur le panneau.

1794Pointer label cursorCurseurÀ l'intérieur d'un panneau délimité, le curseur système est remplacé par une flèche dessinée avec une petite puce nominative derrière elle sur un ressort souple.

1795Pointer takeover zoneCurseurUn panneau qui masque le curseur système lorsque le pointeur est à l'intérieur et dessine sa propre marque à sa place, apparaissant à l'entrée et ressortant à la sortie.

1796Tile trailCurseurUn sentier de pointeur qui laisse tomber de petites tuiles arrondies le long du chemin, chacune sortant d'une piscine recyclée et s'éloignant au fur et à mesure que de nouvelles prennent leur place.

1803Ribbon trail flowCurseurPlusieurs rubans colorés poursuivent le pointeur sur leurs propres ressorts, se rétrécissant en pointe et s'écartant lorsque le pointeur tourne.

1806Smoke trail cursorCurseurUn doux nuage tourbillonnant qui suit le pointeur comme de la fumée, se recroquevillant sur lui-même lorsque vous changez de direction et se dissolvant lorsque vous vous arrêtez.

1809Spring lag trailCurseurUne chaîne de cercles qui poursuivent le pointeur avec des ressorts de plus en plus doux, si rapides que les mouvements les étirent en une queue de comète qui se rassemble au repos.

1812Stamped cursor trailCurseurPetites cartes estampées le long du chemin du pointeur à intervalles de distance fixes, chacune tombant avec une inclinaison et vieillissant derrière le curseur.

1815Swarm trail cursorCurseurUn nuage de gouttes molles orbite autour du pointeur à l’intérieur d’un panneau, laissant des traînées effilées et fusionnant en une seule forme là où elles se chevauchent.

1819Tracking crosshair overlayCurseurDes lignes de cheveux pleine largeur et pleine hauteur qui suivent le pointeur avec un petit décalage et frissonnent en statique chaque fois qu'elles franchissent une cible.

1820Trailing cursorCurseurUn curseur dessiné qui poursuit le véritable pointeur sur un ressort, traînant une douce lueur et des images rémanentes s'estompant pendant qu'il se tourne pour faire face à la direction dans laquelle il se déplace.

1823Velocity comet trailCurseurUne chaîne de points qui poursuivent chacun celui qui les précède avec inertie, s'étirant en une comète lors de mouvements rapides et s'enroulant pour former un amas au repos.

1824Zoned cursor tagCurseurUn pointeur personnalisé dont la balise de fin se réécrit et se retourne de l'autre côté lorsqu'elle traverse les zones d'un panneau divisé.

2833Floating text trailCurseurUn panneau sombre où le déplacement du pointeur laisse tomber des copies flottantes d'un mot le long du chemin de déplacement, chacune oscillant brièvement avant de disparaître.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Bracket lock cursor
Un pointeur personnalisé composé de quatre crochets d'angle qui tourne lorsqu'il est inactif et s'ouvre autour de tout élément marqué comme cible.
Floating text trail
Un panneau sombre où le déplacement du pointeur laisse tomber des copies flottantes d'un mot le long du chemin de déplacement, chacune oscillant brièvement avant de disparaître.
Fluid Splash
Le fait de glisser sur le panneau pousse l'encre à travers une simulation fluide, de sorte que la couleur gonfle, s'enroule et se dissipe lentement derrière le pointeur.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)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)billing (10)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 (7)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 (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)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)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)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 (13)finance (10)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 (50)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)log (3)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)product (6)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 (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)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 (21)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)workflow (18)workspace (36)wrapper (3)zoom (4)