Composants

pointer

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

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

36 sur 65

Chargement de l’index de recherche complet.

Dock menu

1528Dock menuNavigationUn dock inférieur dont les icônes prennent leur taille en fonction de la distance du pointeur, avec une étiquette au-dessus de l'icône sous le curseur et un point sous celle active.

Magnetic button

1531Magnetic buttonBoutonsUn bouton qui dérive vers le pointeur lorsqu'il se trouve à l'intérieur d'un rayon défini et revient se reposer lorsqu'il part, l'étiquette et la flèche se déplaçant un peu plus loin que le corps.

Particle drift

1536Particle driftArrière-plansUn champ de toile de particules à la dérive lente qui s'enroulent sur les bords, se lient avec des lignes pâles et s'éloignent là où passe le pointeur.

1548Arrow iconIcônesUne flèche pleine longueur qui se déplace le long de son propre axe, avec des flèches appariées pour les directions bidirectionnelles.

Bouncing sphere pit

1670Bouncing sphere pitArrière-plansUne fosse en forme de boîte de sphères lourdes qui tombent, s'entrechoquent et s'empilent, se dispersant chaque fois que le curseur les traverse.

Cursor trail grid

1681Cursor trail gridArrière-plansUne grille de cellules délimitées qui s'allume sous le pointeur et se refroidit lentement une fois qu'il avance, laissant une traînée qui s'estompe.

Drifting glass shards

1686Drifting glass shardsArrière-plansUn lent courant d'éclats translucides qui clignotent en tombant, se dispersant à partir du curseur et se rassemblant lorsque le pointeur reste immobile.

Gradient slat spotlight

1700Gradient slat spotlightArrière-plansLes lattes verticales cachent un dégradé de couleurs jusqu'à ce qu'un projecteur doux suive le pointeur sur elles et éclaire chaque latte qu'il touche.

Gravity dust field

1703Gravity dust fieldArrière-plansUn champ lent de grains de poussière brillants qui se courbent vers ou s'éloignent du pointeur et s'éclairent de plus en plus à mesure qu'ils se rapprochent.

Light Beam Flare

1714Light Beam FlareArrière-plansUn faisceau étroit tombe du haut d’une scène sombre dans une large fusée horizontale, avec une brume dérivante et un faisceau qui se penche vers le pointeur.

Liquid metal drift

1718Liquid metal driftArrière-plansDes gouttes de liquide lourd allumées par le bord s'étirent et fusionnent à travers un champ noir, se bombant vers le pointeur comme de la limaille de fer vers un aimant.

Liquid swirl vortex

1719Liquid swirl vortexArrière-plansDeux flaques de peinture épaisse pliées autour d'un lent tourbillon, avec des bords durs et de gros pixels qui lui donnent un aspect imprimé plutôt que rendu.

Magnetic particle ring

1720Magnetic particle ringArrière-plansUn champ dérivant de minuscules points que le pointeur attrape et réorganise en un anneau ondulant, les relâchant à mesure qu'il avance.

Magnetic pull target

1721Magnetic pull targetAnimationUne tuile qui se penche vers le pointeur chaque fois qu'elle entre dans un rayon défini, tirant plus fort à mesure qu'elle se rapproche et se rapprochant lorsque le pointeur s'en va.

Pointer angle sweep

1732Pointer angle sweepArrière-plansUn panneau éclairé par un balayage conique dont l'origine se trouve sous le pointeur et dont le bord brillant pointe vers lui, passant à une lente rotation au ralenti lorsque le pointeur s'en va.

Pointer lit lattice

1733Pointer lit latticeArrière-plansUn treillis de toile dont les cellules s'illuminent au fur et à mesure que le pointeur passe, tiennent, puis se désintègrent, avec une pression envoyant un anneau de lumière s'étendant vers les coins les plus éloignés.

Pointer ripple mesh

1734Pointer ripple meshArrière-plansUne plaque de couleur est échantillonnée à travers un maillage grossier dont les cellules se souviennent de l'endroit où se trouvait le pointeur, donc le fait de faire glisser l'image s'étale et le frottis se détend.

Bracket lock cursor

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.

Drag tile track

1771Drag tile trackAnimationUne tuile que vous pouvez lancer autour d'une piste délimitée qui s'incline dans la traînée, résiste au-delà des bords et s'arrête avec élan.

Fluid Splash

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.

Iron filings field

1781Iron filings fieldAnimationUne grille carrée de petits tirets qui tournent tous pour pointer vers le pointeur, comme de la limaille de fer accrochée à un aimant glissé dessus.

Lagging orb follower

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.

Magnetic project target

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.

Pixel Wake

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.

Pointer label cursor

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.

Edge tracking glow card

1854Edge tracking glow cardCartesUne carte dont le contour ne s'éclaire que là où le pointeur s'en rapproche, s'éclaircissant à mesure que vous vous approchez du bord et s'assombrissant vers le milieu.

Click ripple burst

1937Click ripple burstMessages d’étatUn effet de retour de pointeur qui génère une brève forme animée exactement à l'endroit où l'utilisateur clique ou appuie.

Cursor fluid trail

1947Cursor fluid trailArrière-plansUn champ sombre sur lequel le fait de faire glisser le pointeur étale un liquide coloré dessus, et le frottis continue de s'enrouler et de s'éclaircir après l'arrêt du pointeur.

Orbit Pointer Nav

2007Orbit Pointer NavNavigationUn anneau de navigation circulaire dans lequel un pointeur central tourne pour viser le bouton de section actif, et les boutons se transforment en pilules étiquetées lors de la sélection.

Compass bar grid

2127Compass bar gridAnimationUne grille de barres courtes qui tournent toutes pour pointer vers le pointeur, de sorte que le champ se lit comme de la limaille de fer trouvant un aimant.

Focus Lens

2155Focus LensAnimationUne forme décrite qui reste douce et floue partout, sauf dans un petit cercle qui suit le pointeur, où elle devient nette.

Gooey blob field

2159Gooey blob fieldAnimationUn champ de blobs mous qui gravitent autour de chemins ensemencés et se fondent les uns dans les autres à l'approche, avec un blob supplémentaire qui suit le pointeur.

Pointer Magnet

2206Pointer MagnetAnimationUn emballage qui permet à tout ce qu'il contient de dériver vers le pointeur alors qu'il se trouve à l'intérieur d'une zone de capture rembourrée, puis de revenir se reposer.

Dodging eyes button

2510Dodging eyes buttonBoutonsUne capsule sombre avec deux yeux de dessin animé clignotants qui sautent vers le coin le plus éloigné de votre pointeur pendant que ses pupilles continuent de vous observer.

Hairline trace submit

2647Hairline trace submitBoutonsUn bouton de soumission sombre dont la ligne d'un pixel s'allume, traçant le périmètre à partir du bord entré par le pointeur, puis recule de la même manière.

Floating text trail

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.

Bouncing sphere pit
Une fosse en forme de boîte de sphères lourdes qui tombent, s'entrechoquent et s'empilent, se dispersant chaque fois que le curseur les traverse.
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.
Click ripple burst
Un effet de retour de pointeur qui génère une brève forme animée exactement à l'endroit où l'utilisateur clique ou appuie.

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)