Composants

Effets de texte

Mots qui apparaissent, se mélangent, comptent ou défilent.

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

36 sur 87

Chargement de l’index de recherche complet.

Aurora glow heading

1915Aurora glow headingEffets de texteUn titre dans lequel un mot porte un remplissage dégradé multicolore à dérive lente attaché à ses lettres, comme une aurore qui brille derrière le type.

Binary Decode Text

1921Binary Decode TextEffets de texteChaque lettre scintille brièvement en un chiffre binaire lumineux avant de revenir à son caractère réel, parcourant le mot de gauche à droite.

Shimmer Wave Text

1930Shimmer Wave TextEffets de texteUne onde de luminosité balaie une fois une ligne de texte, éclairant chaque caractère tour à tour avant qu'il ne s'assombrisse, puis s'arrête brièvement et se répète.

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.

Glare Pass Text

1967Glare Pass TextEffets de texteLe texte de l'étiquette en sourdine capte périodiquement une étroite bande de lumière qui glisse dessus, comme un reflet se reflétant sur du verre, puis se tait avant de se répéter.

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.

Greeting Cycle

1973Greeting CycleEffets de texteUn court message d'accueil à côté d'un point marqueur parcourt une fois bonjour dans différentes langues, faisant glisser chacun d'eux vers le haut à mesure que le dernier glisse.

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.

Color Band Text Reveal

2124Color Band Text RevealEffets de texteUne bande douce de plusieurs couleurs glisse une fois sur une ligne de texte avec un mouvement d'entrée et de sortie facile, teintant chaque lettre au fur et à mesure de son passage avant que le texte ne prenne une couleur unie.

Comic pop text

2125Comic pop textEffets de texteDe gros lettrages de bande dessinée avec un contour épais et un remplissage de points en demi-teinte qui apparaissent sur scène avec une entrée rebondissante de scale-and-rotate.

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.

Hand-drawn text marker

2164Hand-drawn text markerEffets de texteEnveloppe une partie du texte avec une annotation de marqueur dessinée à la main, telle qu'un lavis de surbrillance, un soulignement, un cercle ou un cadre, qui s'appuie sur un trait d'esquisse légèrement imparfait.

Hover Decrypt Text

2168Hover Decrypt TextEffets de texteLes lettres brouillent les caractères aléatoires et se résolvent de gauche à droite en le mot réel en une seconde environ, rejouant le décodage chaque fois que le pointeur entre dans le texte.

Hover weight ripple text

2169Hover weight ripple textEffets de texteType d'affichage ultra-léger où le survol d'une lettre la transforme en un poids lourd avec un contour fin, s'éloignant vers l'extérieur pour que ses voisins s'épaississent également un peu.

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.

Layered shadow headline

2179Layered shadow headlineEffets de texteUn titre court et gras avec une copie décalée derrière, hachurée en diagonale dans une couleur d'accent, qui dérive lentement pour donner aux lettres une ombre en mouvement.

Looping typewriter text

2186Looping typewriter textEffets de texteUne ligne de texte se tape caractère par caractère, est conservée, supprimée et tape la phrase suivante d'une liste, en passant indéfiniment derrière un curseur clignotant.

Ascii Art Heading

2301Ascii Art HeadingEffets de texteUn gros mot est rendu comme une mosaïque de caractères à espacement fixe dont la densité imite la forme des lettres, ondulant doucement et s'inclinant vers le pointeur.

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.

Circular hover speed ring

2320Circular hover speed ringEffets de texteUne phrase tourne lentement autour d'un cercle jusqu'à ce que le pointeur arrive, puis tourne rapidement et grandit légèrement avant de reculer une fois le pointeur parti.

Count Up Number

2327Count Up NumberEffets de texteUn grand chiffre qui passe d'une valeur de départ jusqu'à une cible une fois qu'il défile, dépassant légèrement avant de se stabiliser.

Curved Text Loop

2331Curved Text LoopEffets de texteUne ligne de texte se répète sans fin le long d’un léger chemin arqué, à défilement latéral automatique et déplaçable à la main avec un élan qui inverse la direction.

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.

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.

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.

Extruded layer text

2806Extruded layer textEffets de texteUn mot restitue autant de couches de couleurs empilées derrière sa face, formant un bloc 3D extrudé qui se penche vers le pointeur et dérive lorsqu'il est inactif.

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.

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.

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

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.

Elastic weight headline

2826Elastic weight headlineEffets de texteUne seule ligne d'énormes lettres majuscules dont le poids, la largeur et l'inclinaison gonflent autour d'une position de curseur en retard et facilitée.

Highlight focus swap

2827Highlight focus swapEffets de texteLes mots d'une phrase sont nets à tour de rôle tandis que le reste est flou, avec un cadre de support d'angle lumineux glissant vers la case du mot mis au point.

Looping text ribbon

2828Looping text ribbonEffets de texteUn ruban coloré porte une phrase répétitive le long d’un chemin ondulé, circulaire ou arqué, défilant sans fin comme un sceau ou un badge.

Liquid warp headline

2835Liquid warp headlineEffets de texteUn titre dessiné sur une toile qui se plie et ondule comme la lumière dans l’eau, la distorsion s’accumulant partout où le pointeur plane.

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.

Ascii Art Heading
Un gros mot est rendu comme une mosaïque de caractères à espacement fixe dont la densité imite la forme des lettres, ondulant doucement et s'inclinant vers le pointeur.
Aurora glow heading
Un titre dans lequel un mot porte un remplissage dégradé multicolore à dérive lente attaché à ses lettres, comme une aurore qui brille derrière le type.
Binary Decode Text
Chaque lettre scintille brièvement en un chiffre binaire lumineux avant de revenir à son caractère réel, parcourant le mot de gauche à droite.

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)