Effets Texte & Typographie
Effets de texte, typographie cinétique, splitting et variable fonts.
Mis à jour le
Comment animer du texte sans nuire à la lisibilité ni au référencement ?
Les effets de texte animent titres et mots : dégradés, machine à écrire, glitchs, apparitions lettre par lettre, variations de graisse avec les polices variables. Ils utilisent background-clip: text, @keyframes et les axes des polices variables, plus un petit script qui découpe un titre en un span par caractère quand chaque lettre doit bouger seule.
Comment choisir, performances et accessibilité
- Réservez-les aux textes courts et visibles : Animated Gradient ou Typing Effect pour un titre de héros, Letter Fade In pour une accroche, Neon Flicker pour une page d'événement.
- Laissez le vrai texte dans le HTML pour que moteurs de recherche et lecteurs d'écran le lisent normalement ; quand un titre est découpé en lettres, gardez un
aria-labelavec la phrase complète. - Évitez d'animer de longs paragraphes et affichez directement l'état final pour
prefers-reduced-motion. - Animated Gradient, Typing Effect, Letter Fade In et Weight Breathing sont gratuits avec leur code complet ; les autres sont inclus dans Premium.
Voir le code source
<div class="demo-preview">
<span class="demo-text text-animated-gradient">Gradient Flow</span>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.demo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.text-animated-gradient {
background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef, #6366f1);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientMove 4s linear infinite;
}
.demo-text span {
display: inline-block;
}
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
100% {
background-position: 300% 50%;
}
}/* CSS pur — aucun JavaScript requis */Voir le code source
<div class="demo-preview">
<span class="demo-text text-typing">Hello World</span>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.demo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.text-typing {
overflow: hidden;
border-right: 3px solid #6366f1;
white-space: nowrap;
animation: typing 3s steps(20) infinite, blink 0.5s step-end infinite alternate;
width: 0;
max-width: fit-content;
}
.demo-text span {
display: inline-block;
}
@keyframes typing {
0%,
90%,
100% {
width: 0;
}
30%,
60% {
width: 100%;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}/* CSS pur — aucun JavaScript requis */Voir le code source
<div class="demo-preview">
<span class="demo-text text-fade-in" id="fadeInText"></span>
<button class="replay-btn" onclick="replayFadeIn()">Replay</button>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
--primary-light: #818cf8;
--radius-md: 0.5rem;
--transition-fast: 150ms ease;
}
.demo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.text-fade-in span {
opacity: 0;
animation: fadeInLetter 0.5s ease forwards;
}
.replay-btn {
position: absolute;
bottom: 15px;
right: 15px;
padding: 8px 16px;
background: rgba(99, 102, 241, 0.2);
border: 1px solid rgba(99, 102, 241, 0.4);
border-radius: var(--radius-md);
color: var(--primary-light);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.replay-btn:hover {
background: rgba(99, 102, 241, 0.4);
transform: scale(1.05);
}
.demo-text span {
display: inline-block;
}
@keyframes fadeInLetter {
to {
opacity: 1;
}
}(function() {
function splitText(element, text, delayStep = 0.05) {
element.innerHTML = text.split('').map((char, i) => {
if (char === ' ') return ' ';
return `<span style="animation-delay: ${i * delayStep}s">${char}</span>`;
}).join('');
}
function initFadeIn() {
const el = document.getElementById('fadeInText');
splitText(el, 'FADE IN', 0.08);
}
function replayFadeIn() {
const el = document.getElementById('fadeInText');
el.innerHTML = '';
setTimeout(() => initFadeIn(), 50);
}
initFadeIn();
window.replayFadeIn = replayFadeIn;
})();Scramble Text
Text scrambles through random characters then resolves like a decoder.
Page de l’effet →Scatter to Word
Les caractères volent depuis des positions aléatoires et s'assemblent en un mot au chargement ou au clic.
Page de l’effet →Wave Text
Chaque lettre oscille verticalement avec un timing décalé créant une vague continue.
Page de l’effet →Elastic Bounce Letters
Le texte s'étire et rebondit avec une physique de ressort à l'apparition.
Page de l’effet →Magnetic Cursor Text
Les caractères individuels sont attirés vers la position du curseur.
Page de l’effet →Gravity Drop Text
Les lettres tombent du haut avec la gravité et rebondissent sur la ligne de base.
Page de l’effet →Text Whirlpool
Les caractères orbitent en motif circulaire puis se stabilisent en texte lisible.
Page de l’effet →Typewriter Glitch
Machine à écrire classique avec des interruptions glitch aléatoires (échanges de caractères, scintillements).
Page de l’effet →Breathing Text
Le texte se dilate et se contracte subtilement comme une respiration, décalé par mot.
Page de l’effet →Text Shuffle Reveal
Les caractères cyclent rapidement à travers des lettres aléatoires avant de se fixer sur la bonne.
Page de l’effet →Parallax Depth Text
Texte multi-couches se déplaçant à des vitesses différentes au mouvement de souris, créant de la 3D.
Page de l’effet →Liquid Stretch Text
Les lettres s'étirent comme du caramel au survol avec un retour élastique.
Page de l’effet →Text Explosion
Cliquer pour disperser les caractères avec physique, cliquer à nouveau pour les rassembler.
Page de l’effet →