Composants

stagger

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 40

Chargement de l’index de recherche complet.

Masonry flow

1532Masonry flowMise en pageUn mur de maçonnerie qui regroupe des carreaux de différentes hauteurs dans des colonnes, soulève chacun d'entre eux lorsqu'il défile et réinstalle la grille entière lorsque le nombre de colonnes change.

Split text reveal

1543Split text revealEffets de texteUn titre dont les mots ou les caractères surgissent d'un masque de clip, floutés et teintés, décalés de gauche à droite sur le support, et rejoués au clic.

Share target swap button

1650Share target swap buttonBoutonsUn bouton de partage compact qui conserve une empreinte et échange son étiquette contre une rangée décalée de glyphes de destination en survol ou en focus.

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.

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.

Letter cascade button

1712Letter cascade buttonBoutonsUn large bouton solide dont l'étiquette centrée disparaît et se reconstruit une lettre à la fois au fur et à mesure que chaque caractère se met en place par le haut.

Scale in on view

1743Scale in on viewAnimationUn wrapper qui maintient son enfant petit jusqu'à ce qu'il défile pour la première fois, puis le fait apparaître en taille réelle, avec un décalage facultatif par élément pour les listes.

Staggered Fade List

1751Staggered Fade ListAnimationLignes qui s'estompent à partir d'une opacité de départ choisie l'une après l'autre à mesure que le groupe entre dans la vue, l'écart entre elles étant réglable.

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.

Tile trail

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.

Stagger bar row

1811Stagger bar rowAnimationUne rangée de barres qui se mettent en place les unes après les autres, la vague partant de chaque extrémité ou du milieu vers l'extérieur.

Bouncing Photo Fan

1844Bouncing Photo FanCartesUne rangée de vignettes photo carrées qui se chevauchent et qui apparaissent avec un dépassement élastique, puis s'écartent lorsque l'une d'entre elles est survolée.

Scroll entrance wrapper

1880Scroll entrance wrapperDéfilementUn wrapper qui maintient ses enfants garés hors position jusqu'à ce qu'ils défilent, puis joue une arrivée facilitée et ne la répète jamais.

Letter roll in

1991Letter roll inEffets de texteUne ligne de texte où chaque personnage se retourne sur un axe horizontal, l'ancien visage roulant tandis qu'un visage identique arrive par le bas.

Split text entrance

2049Split text entranceEffets de texteCopie découpée en caractères, mots ou lignes et animée pièce par pièce sur un échelonnement partagé, avec quelques préréglages d'entrée parmi lesquels choisir.

Cube flip letters

2136Cube flip lettersEffets de texteLe survol d'une ligne fait tourner chaque lettre d'un quart de tour en 3D, l'une après l'autre à partir d'une origine choisie, révélant une seconde face qui porte le même glyphe dans l'accent.

Hopping dot loader

2167Hopping dot loaderMessages d’étatUne courte rangée de points qui sautent dans une vague progressive, chacun quittant le sol un battement après le point à côté.

Staggered Reveal Text

2242Staggered Reveal TextEffets de texteUne phrase apparaît en morceaux décalés, divisée en mots, caractères ou lignes, en utilisant un style d'entrée choisi tel que fondu, flou, glissement ou échelle.

Blur in word reveal

2307Blur in word revealEffets de texteLes mots d’une phrase passent d’un léger flou à une netteté l’un après l’autre à mesure que la phrase défile.

Bubble burst menu

2309Bubble burst menuNavigationUne pilule à logo flottant et une bascule qui se transforment en une superposition plein écran de liens de pilule surdimensionnés, chacun se mettant en place avec un décalage élastique.

Circle reveal sidebar

2318Circle reveal sidebarNavigationUn panneau de menu qui s'ouvre sous la forme d'un cercle s'élevant à partir de sa propre bascule, avec des lignes apparaissant en séquence et les barres de bascule se repliant en croix.

Flip panel headline reveal

2355Flip panel headline revealEffets de texteUn titre dont les caractères sont assis derrière de petits panneaux articulés qui se rabattent les uns après les autres, comme un panneau d'arrivée, pour révéler les lettres en dessous.

Line by line headline reveal

2379Line by line headline revealEffets de texteUn titre révèle une ligne complète à la fois : chaque ligne se déclipse de gauche à droite comme un rideau qui se lève tandis qu'une graduation colorée se pose sur son bord arrière et reste allumée, laissant une trace visible une fois la séquence installée.

Ripple Origin Grid

2415Ripple Origin GridMise en pageUne grille de tuiles colorées qui s'illuminent selon une ondulation rayonnant vers l'extérieur à partir d'une tuile choisie, chronométrée en fonction de la distance par rapport à cette tuile.

Scroll blur reveal text

2418Scroll blur reveal textEffets de texteUn bloc de texte qui commence par être flou et décalé, puis s'accentue mot par mot ou lettre par lettre la première fois qu'il défile.

Split curtain reveal button

2435Split curtain reveal buttonBoutonsUn bouton caché sous quatre panneaux décoratifs qui se séparent d'abord latéralement et verticalement un battement plus tard, découvrant l'étiquette en deux mouvements étagés.

Staggered Offer Drawer

2441Staggered Offer DrawerSuperpositionsUn tiroir du bas promouvant une offre limitée, où le titre, le prix et les boutons apparaissent les uns après les autres au lieu d'apparaître tous en même temps.

Letter drop press button

2517Letter drop press buttonBoutonsUn bouton de touche sur un rebord plus sombre dont l'étiquette disparaît au survol et est reconstruite lettre par lettre par le haut, en appuyant sur le rebord lorsque vous cliquez dessus.

Compass share burst

2604Compass share burstBoutonsUn bouton de partage rond qui distribue ses jetons de destination vers les points cardinaux en une rafale décalée et les ramène à leur point d'origine dans l'ordre inverse.

Split flap face button

2681Split flap face buttonBoutonsLe visage rempli sort du bas du bouton au survol et l'étiquette se reconstruit lettre par lettre derrière elle.

Letter swap copy button

2718Letter swap copy buttonBoutonsUn bouton de copie en relief dont l'étiquette se reconstruit lettre par lettre au survol tandis que sa puce d'icône pulse et dessine un chèque lorsque la copie atterrit.

Paper fold text

2809Paper fold textEffets de texteLe texte est divisé en caractères, mots ou lignes qui s'ouvrent le long d'un bord de charnière choisi avec une ombre de pli, décalées sur la phrase.

Rotating Word Swap

2819Rotating Word SwapEffets de texteUne phrase d'introduction reste fixe tandis qu'un mot de fin parcourt une liste, chacun échangeant des caractères coulissants vers le haut et vers l'extérieur à mesure que le mot suivant glisse vers le haut et vers l'intérieur.

Cascading Letter Reveal

2824Cascading Letter RevealEffets de texteUn titre qui se révèle lettre par lettre avec une montée et une décoloration douces à mesure qu'il apparaît, puis reste stable une fois terminé.

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 in word reveal
Les mots d’une phrase passent d’un léger flou à une netteté l’un après l’autre à mesure que la phrase défile.
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.
Bouncing Photo Fan
Une rangée de vignettes photo carrées qui se chevauchent et qui apparaissent avec un dépassement élastique, puis s'écartent lorsque l'une d'entre elles est survolée.

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)