Composants

texte

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.

Scramble text

1539Scramble textEffets de texteTexte monospace qui fait atterrir un caractère à la fois en faisant rouler des glyphes derrière une tête d'écriture, et se détache à nouveau partout où le pointeur l'effleure.

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.

Center out underline link

1929Center out underline linkBoutonsUn lien de navigation dont le soulignement s'étend vers l'extérieur du milieu vers les deux extrémités lors du survol et se rétracte jusqu'à un point lorsque le pointeur s'éloigne.

Fill sweep loading text

1959Fill sweep loading textMessages d’étatUne étiquette de chargement dont le contour pâle se trouve sous une copie entièrement colorée qui s'étend depuis la gauche, atteint toute la largeur et ressort, se répétant aussi longtemps que quelque chose se charge.

Flowing gradient headline

1962Flowing gradient headlineEffets de texteUn titre dont les lettres sont remplies par un dégradé bicolore mobile, de sorte qu'une bande lumineuse dérive sans fin à travers les mots, avec une douce floraison facultative derrière.

Gradient shift text

1970Gradient shift textEffets de texteUne pilule arrondie dont le texte est rempli d'un dégradé bicolore qui balaie continuellement les lettres.

Gradient sweep heading

1971Gradient sweep headingEffets de texteUn grand titre dont le remplissage est une bande de dégradé mobile qui s'étend continuellement d'un bord à l'autre, donnant au texte un éclat brillant et toujours changeant.

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.

Marker highlight

1995Marker highlightEffets de texteUne phrase avec une bande de marqueur qui s'efface derrière elle de gauche à droite lorsque la ligne apparaît pour la première fois, laissant les mots posés sur un bloc de couleur.

Shimmer sweep text

2036Shimmer sweep textEffets de texteUne ligne de texte où chaque lettre s'éclaircit et s'assombrit à son tour, envoyant une bande de lumière voyageant le long de la phrase en boucle.

Split Reveal Hover Text

2048Split Reveal Hover TextEffets de texteLe texte est découpé en deux moitiés supérieure et inférieure ; en survol, la moitié supérieure glisse et s'efface tandis que la moitié inférieure glisse vers le haut pour compléter le mot, et elle s'inverse lorsque le pointeur s'en va.

Sweeping status text

2060Sweeping status textEffets de texteUn grand mot de statut qui échange sur un rythme régulier tandis qu'une bande lumineuse parcourt sans fin les formes des lettres.

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.

Keystroke Text

2177Keystroke TextEffets de texteLe texte apparaît un caractère à la fois comme s'il était tapé en direct, avec un curseur clignotant qui continue une fois la saisie terminée.

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.

Twinkle highlight text

2260Twinkle highlight textEffets de texteTexte surligné en gras avec de petites étoiles scintillantes à quatre branches qui apparaissent et sortent continuellement à des positions aléatoires autour et sur les lettres.

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.

Cipher reveal text

2317Cipher reveal textEffets de texteUne étiquette qui commence par être brouillée en symboles aléatoires et se décrypte en son texte réel lors de l'affichage, du survol ou du clic.

Hover duplicate text nav

2365Hover duplicate text navNavigationUne liste de navigation verticale fait glisser chaque étiquette vers le haut et vers le haut en survol, tandis qu'une étiquette en double glisse par le bas pour prendre sa place.

Hover speed text ring

2367Hover speed text ringEffets de texteUne phrase inscrite dans un anneau de lettres tournées vers l’extérieur qui tourne doucement au repos et change radicalement de vitesse lorsque le pointeur la survole.

Pointer scatter headline

2405Pointer scatter headlineEffets de texteUn titre divisé en caractères uniques qui s’écartent et dégringolent lorsque le pointeur les parcourt, puis reviennent dans la ligne.

Reading highlight copy

2410Reading highlight copyEffets de texteUn paragraphe qui s'éclaire mot par mot lorsque vous le faites défiler, laissant les mots lus clairs et les mots non lus atténués, de sorte que la position de défilement sert également de position de lecture.

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.

Typewriter caption

2457Typewriter captionEffets de texteUne légende se tape un caractère à la fois à un rythme constant, avec un curseur de bloc solide qui continue de clignoter une fois la ligne terminée.

Caret tail link

2508Caret tail linkBoutonsUn lien texte discret avec un petit crochet angulaire juste après sa dernière lettre, qui glisse vers l'extérieur et est souligné au survol.

Trailing arrows text button

2526Trailing arrows text buttonBoutonsUn lien texte sans bordure qui élargit l'espacement des lettres au survol tandis qu'une traînée de flèches se déploie vers la droite, chacune plus grande et plus faible que la précédente.

Opposing rule text button

2537Opposing rule text buttonBoutonsUn bouton de texte en majuscules sans bordure encadré par deux règles qui balayent depuis les extrémités opposées lors du survol ou de la mise au point et reculent comme elles sont venues.

Text field

2785Text fieldChamps de saisieUn champ de texte d'une seule ligne avec une bordure douce, une bague de mise au point d'accent, un espace réservé en sourdine et un état désactivé approprié.

Fuzzy static text

2807Fuzzy static textEffets de texteUn mot dessiné sur la toile et repeint en lignes de balayage instables, bourdonnant comme des parasites de télévision et se déformant plus fortement au survol ou en appuyant sur.

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.

Flowing gradient text

2814Flowing gradient textEffets de texteUn dégradé multicolore balaie en continu le remplissage d'un titre, éventuellement encadré par une bordure de dégradé assortie.

Particle formation text

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.

Sweeping shine text

2822Sweeping shine textEffets de texteTexte rempli d'un dégradé atténué et d'une bande diagonale lumineuse qui se déplace d'avant en arrière comme un reflet de lumière et peut se figer en survol.

Character shuffle reveal

2825Character shuffle revealEffets de texteChaque personnage parcourt une bande de glyphes aléatoires comme une bobine de machine à sous avant d'atterrir sur la vraie lettre, révélée lors du défilement avec relecture en survol.

Outline draw text

2829Outline draw textEffets de texteLes lettres affichées se tracent les unes après les autres sous forme de contours brillants, puis un remplissage solide s'efface derrière les traits pour terminer le mot.

Scroll dim text reveal

2838Scroll dim text revealDéfilementUn paragraphe est grisé et s'éclaircit mot par mot au fur et à mesure de la progression du défilement, puis s'assombrit à nouveau lorsque vous faites défiler vers l'arrière.

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.
Caret tail link
Un lien texte discret avec un petit crochet angulaire juste après sa dernière lettre, qui glisse vers l'extérieur et est souligné au survol.
Center out underline link
Un lien de navigation dont le soulignement s'étend vers l'extérieur du milieu vers les deux extrémités lors du survol et se rétracte jusqu'à un point lorsque le pointeur s'éloigne.

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)