Composants

particles

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

18 sur 18

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.

1641Magnetic dust buttonBoutonsUn bouton de pilule entouré de grains de poussière qui se précipitent en son centre en vol stationnaire et retournent vers leur propre endroit de repos lorsqu'ils sont relâchés.

1642Particle burst buttonBoutonsUn bouton qui projette une courte pulvérisation de taches vers le haut et hors de lui-même à chaque clic, puis se réinitialise silencieusement pendant que l'étiquette confirme que l'action a atterri.

1656Star count buttonBoutonsUn bouton étoile de référentiel dont le total s'affiche colonne par colonne et projette une courte rafale de petites étoiles lorsqu'on appuie dessus.

1672Burst particle emitterAnimationEnveloppe n'importe quel élément et déclenche un éventail décalé de petites taches à partir d'un bord choisi, lors d'un clic, sur une boucle ou la première fois qu'il défile dans la vue.

1674Celebration burstAnimationUn éclat de toile de flocons de papier tirés d'un bouton, s'arquant en un bord étalé et flottant alors qu'ils tombent et se déposent hors du cadre sous l'effet de la gravité.

1691Firework burst canvasArrière-plansLes obus sont lancés depuis le bord inférieur, montent en arc de cercle, puis éclatent en étincelles qui tombent sous l'effet de la gravité.

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.

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.

1728Particle sprayAnimationMaintenez le pointeur enfoncé sur une commande et il pulvérise de petites particules partout où se trouve le pointeur, chacune se courbant, tournant, puis tombant et se dissipant.

1875Pixel Bloom CardCartesUne carte dont la surface se remplit de minuscules carrés qui s'épanouissent vers l'extérieur à partir du centre en survol, scintillent lorsqu'ils sont tenus et rétrécissent lorsqu'ils sont en congé.

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.

2042Sliding digit counterAffichage des donnéesUn total qui compte en faisant rouler chaque colonne de chiffres pendant qu'une étoile se remplit à côté d'elle et fait éclater quelques particules lorsqu'elle atterrit.

2079Vector Flow FieldArrière-plansUn fond de toile à fond perdu où des milliers de minuscules points lumineux dérivent le long d'un courant qui évolue lentement, laissant derrière eux de douces traînées qui s'estompent.

2376Launch orbit buttonBoutonsUne pilule qui souffle un anneau vers l'extérieur sur une boucle, disperse ses particules de poussière en vol stationnaire et envoie un petit engin en boucle à travers l'étiquette.

2409Reactive bento panelsMise en pageUne grille bento de panneaux qui brillent au pointeur, s'inclinent en 3D, dérivent vers le curseur et éclatent de particules et d'ondulations au clic.

2816Particle formation textEffets de texteUne toile de minuscules particules qui se rassemble sous la forme d’un mot, dérive une fois formée et s’éloigne du pointeur.

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.

Burst particle emitter
Enveloppe n'importe quel élément et déclenche un éventail décalé de petites taches à partir d'un bord choisi, lors d'un clic, sur une boucle ou la première fois qu'il défile dans la vue.
Celebration burst
Un éclat de toile de flocons de papier tirés d'un bouton, s'arquant en un bord étalé et flottant alors qu'ils tombent et se déposent hors du cadre sous l'effet de la gravité.
Drifting particle field
Un nuage de petits points ronds qui s'effondre lentement, chacun dérivant sur son propre chemin, le nuage entier s'éloignant du 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)