Composants

drift

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

17 sur 17

1685Drifting border sheenArrière-plansUn panneau dont le contour est éclairé par une douce lueur bicolore, plusieurs fois la taille du panneau, dérivant lentement autour du cadre.

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.

1687Drifting gradient washArrière-plansUn panneau dégradé bicolore surdimensionné au-delà de son cadre et se déplaçant lentement d'avant en arrière, de sorte que la limite de couleur dérive pour toujours sur la surface.

1688Drifting Light BeamsArrière-plansDe hautes barres de lumière inclinées dérivent vers le haut à différentes vitesses et se confondent pour former une brume qui se déplace lentement.

1722Merging blob backdropArrière-plansUne large toile de fond de gouttes molles surdimensionnées qui glissent et orbitent sur des boucles décalées, fusionnant en une seule masse liquide avec un flou et un seuil franchissant partout où elles se rencontrent.

1748Smoke veil driftArrière-plansDe larges nappes de brume colorée traversent un champ noir en biais, s'amincissant et s'épaississant à mesure qu'elles glissent les unes sur les autres.

1851Drifting Gradient ButtonBoutonsUn bouton dont le remplissage bicolore en diagonale est surdimensionné et ne cesse de glisser, courant plus vite au survol et écrasant au clic.

1900Turbulence Decay CardCartesUn panneau d'illustration qui se transforme en bruit lorsque le pointeur se déplace rapidement et se reforme lorsqu'il ralentit, dérivant et s'inclinant vers le curseur au fur et à mesure.

1952Drifting particle fieldArrière-plansUn nuage de petits points ronds qui s'effondre lentement, chacun dérivant sur son propre chemin, le nuage entier s'éloignant du pointeur.

2000Particle FieldArrière-plansUn champ de toile de points flottants doux qui dérivent d'eux-mêmes et se penchent vers le pointeur avec une légère traction magnétique, s'atténuant une fois qu'il s'éloigne.

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.

2548Shifting frame buttonBoutonsUn bouton suivi sombre encadré par quelques pixels d'une large rampe bicolore qui glisse lentement pour que le cadre visible continue de changer de ton.

2560Drifting aura buttonBoutonsUn tampon incliné légèrement gaufré qui réveille une bande de couleur floue derrière ses bords et laisse la partie la plus brillante dériver autour du contour.

2713Drifting mesh tiltBoutonsUne pilule tenue selon une légère inclinaison tridimensionnelle tandis que de douces fleurs de lumière dérivent sous sa surface, se balançant entre deux poses lorsqu'elle est planée ou focalisée.

2745Parallax photo columnsMédiasUn mur à fond perdu de colonnes de photos dérivantes en perspective 3D où les tuiles s'éclaircissent et se soulèvent sous le curseur ou le focus du clavier pendant que leur colonne s'arrête.

2764Drifting halo buttonBoutonsUn bouton sombre entouré d'un cadre en forme de halo légèrement plus grand dans lequel une bande lumineuse de l'accent dérive sans fin autour du périmètre, éclaircissant et soulevant la plaque en survol.

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.

Drifting aura button
Un tampon incliné légèrement gaufré qui réveille une bande de couleur floue derrière ses bords et laisse la partie la plus brillante dériver autour du contour.
Drifting border sheen
Un panneau dont le contour est éclairé par une douce lueur bicolore, plusieurs fois la taille du panneau, dérivant lentement autour du cadre.
Drifting glass shards
Un lent courant d'éclats translucides qui clignotent en tombant, se dispersant à partir du curseur et se rassemblant lorsque le pointeur reste immobile.

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)