Composants

Animation

Primitives de mouvement et séquences chorégraphiées.

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

36 sur 56

Chargement de l’index de recherche complet.

Blur reveal

1669Blur revealAnimationUn wrapper qui maintient son enfant flou et légèrement décalé jusqu'à ce qu'il entre pour la première fois dans la fenêtre, puis résout le flou et comble l'espace en un seul mouvement.

Burst particle emitter

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.

Celebration burst

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é.

Coiled Spring Drag

1675Coiled Spring DragAnimationUne tuile déplaçable attachée à son point d'origine par une bobine tirée qui s'étire et s'amincit lorsque vous tirez, puis ramène la tuile lorsque vous la lâchez.

Composable Reveal

1676Composable RevealAnimationUn emballage de révélation dont les parties diapositive, fondu, zoom et défocalisation peuvent chacune être activées et combinées en une seule transition à ressort.

Diagonal Glare Sweep

1682Diagonal Glare SweepAnimationUn emballage qui fait glisser une étroite bande de lumière en diagonale sur tout ce qu'il contient lorsque le focus du pointeur ou du clavier arrive.

Directional Slide In

1684Directional Slide InAnimationUne révélation qui pousse le contenu depuis l'un des quatre côtés d'une distance définie et permet à un ressort d'absorber l'arrivée.

Focus in reveal

1697Focus in revealAnimationUne révélation qui rend le contenu flou et lui permet de s'affiner lorsqu'il entre dans la vue, avec un délai facultatif par élément pour une pile de lignes.

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.

1724Orbiting Avatar IntroAnimationUne pile de portraits ronds qui se soulève, se déploie en cercle puis tourne lentement autour du centre tandis que chaque portrait reste droit.

Particle spray

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.

Bobble tile grid

1763Bobble tile gridAnimationUne grille de tuiles colorées qui s'éloignent du pointeur sur un ressort, rebondissant plus fort à mesure que le pointeur les traverse rapidement.

Circular wipe switcher

1765Circular wipe switcherAnimationUn sélecteur de couleurs où le nouveau thème inonde toute la surface sous la forme d'un cercle s'étendant à partir du point exact sur lequel vous avez appuyé, tandis que l'anneau de sélection glisse entre les échantillons.

Color blend compare

1766Color blend compareAnimationDeux échantillons bouclent entre la même paire de couleurs, l'un mélangé avec des valeurs de canal brutes et l'autre avec une lumière linéaire, montrant le creux provoqué par une transition simple.

Connector Pulse Beam

1767Connector Pulse BeamAnimationDessine un connecteur incurvé entre deux éléments et envoie un segment de dégradé brillant le long d'une boucle.

Dismiss exit card

1770Dismiss exit cardAnimationUne carte qui rétrécit et s'estompe lors de sa sortie et réapparaît lorsqu'elle est restaurée, avec la disposition environnante immobile pour que rien ne saute.

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.

Easing preview tile

1772Easing preview tileAnimationUne tuile qui joue la même échelle sous n'importe quelle courbe d'assouplissement que vous choisissez, avec la courbe dessinée à côté et un marqueur qui la chevauche de manière synchronisée.

Entrance timing playground

1773Entrance timing playgroundAnimationUn disque rejoue le même mouvement d'entrée à la demande afin que vous puissiez ressentir exactement la durée, le retard et la courbe d'assouplissement de chacun.

Interruptible hover swell

1780Interruptible hover swellAnimationUne tuile dont le gonflement en deux étapes commence toujours à partir de sa taille actuelle, donc l'activation et la désactivation du pointeur ne la font jamais se casser.

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.

Keyframe morph loop

1782Keyframe morph loopAnimationUn carré qui exécute une routine en boucle consistant à grandir, tourner et arrondir en cercle, en se tenant à chaque pose car les arrêts de timing sont inégaux.

Mount pop in

1787Mount pop inAnimationUne rangée de formes qui surgissent de zéro au moment où elles montent, décalées pour que le groupe se lit comme une seule vague, avec un bouton de relecture pour la revoir.

Number reel

1789Number reelAnimationUne bobine fenêtrée de valeurs échelonnées qui tourne à partir de zéro et s'arrête avec la cible atterrissant dans un emplacement central en surbrillance.

Odometer number

1790Odometer numberAnimationUn nombre construit à partir de colonnes de chiffres indépendantes, chacune roulant verticalement jusqu'à son nouveau chiffre afin que celles-ci tournent tandis que les premiers chiffres bougent à peine.

Orbiting badges

1791Orbiting badgesAnimationPetits badges répartis uniformément autour d'une ou deux pistes circulaires, chaque anneau tournant à sa propre vitesse et direction tandis que les badges restent droits.

Path follower

1792Path followerAnimationUne tuile arrondie qui parcourt une piste en spirale enroulée tandis que la piste elle-même passe devant elle, puis revient au début.

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.

Crackling border frame

2135Crackling border frameAnimationUne monture arrondie dont le contour est redessiné à chaque image comme un arc de lumière tremblant, avec une lueur constante en dessous et parfaitement immobile sur le dessus.

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.

2170Icon Shape MorphAnimationUne seule icône remplie se transforme en douceur en l'icône suivante dans une séquence, le contour se déformant continuellement entre les formes plutôt que par un fondu enchaîné ou un échange.

Liquid chrome emblem

2183Liquid chrome emblemAnimationUn emblème dessiné rendu sous forme de métal liquide coulé, ses reflets rampant et s'accumulant sur la forme à mesure que le pointeur se déplace.

2192Morphing icon loopAnimationUne seule icône remplie se remodèle continuellement en icône suivante dans une courte liste, son contour s'écoulant doucement d'une silhouette à l'autre tandis que sa couleur de remplissage change pour correspondre.

2193Morphing icon toggleAnimationUne petite icône transforme continuellement son contour entre deux formes et deux couleurs sur une boucle régulière.

Path Orbit

2201Path OrbitAnimationLes cartes parcourent un chemin fermé partagé, uniformément espacé et tournant sans fin, avec la forme du chemin commutable entre une ellipse, un cercle et une étoile.

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.

Blur reveal
Un wrapper qui maintient son enfant flou et légèrement décalé jusqu'à ce qu'il entre pour la première fois dans la fenêtre, puis résout le flou et comble l'espace en un seul mouvement.
Bobble tile grid
Une grille de tuiles colorées qui s'éloignent du pointeur sur un ressort, rebondissant plus fort à mesure que le pointeur les traverse rapidement.
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.

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)