Wave Animation
Chaque lettre oscille entre font-weight 300 et 900 via un keyframe CSS, le délai décalé de 0,15 s par caractère propageant une vague de graisse de gauche à droite.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'animation repose sur un unique @keyframes vfWave CSS qui pilote trois propriétés à la fois : font-weight passe de 300 (light) à 900 (black) au creux et au pic de la courbe, transform: translateY lève la lettre de 10 px au moment du poids maximal, et color bascule de blanc à 60 % d'opacité vers le violet #8b5cf6. La synchronisation de ces trois axes sur une seule animation donne à l'oscillation son caractère sculptural.
Chaque lettre est un <span class="vf-wave-char"> indépendant dont le décalage de départ est injecté en style inline (animation-delay: N × 0,15 s). C'est ce décalage progressif qui crée l'effet de vague : toutes les lettres font le même cycle de 2 s, mais elles démarrent à des instants échelonnés. Un mot de 8 lettres produit une fenêtre de déphasage totale de 1,05 s.
L'interpolation de font-weight entre 300 et 900 n'est fluide que si la police utilisée est une police variable supportant l'axe wght (ex. Inter Variable, Roboto Flex, Plus Jakarta Sans). Avec une police statique, le navigateur saute entre les graisses disponibles (400, 700…) : l'effet reste lisible mais moins lissé. La police déclarée est Inter, sans-serif — sans chargement explicite d'Inter Variable, le résultat dépend de l'installation locale.
Le JS est vide : l'effet est 100 % CSS. Il n'y a ni requestAnimationFrame, ni IntersectionObserver, ni API publique — l'animation démarre dès que les classes sont présentes dans le DOM et tourne indéfiniment. Pour la stopper, il suffit d'ajouter animation-play-state: paused sur .vf-wave-char via JS ou de retirer la classe.
Accessibilité
- prefers-reduced-motion absent du code : aucune règle
@media (prefers-reduced-motion: reduce)n'est définie — l'animation boucle indéfiniment quelle que soit la préférence système. À ajouter manuellement :@media (prefers-reduced-motion: reduce) { .vf-wave-char { animation: none; font-weight: 400; color: #fff; } } - Le texte est du contenu HTML natif (spans dans le flux normal) — les lecteurs d'écran lisent les lettres dans l'ordre ; aucun canvas ni aria-label nécessaire.
- La couleur de repos
rgba(255,255,255,0.6)sur fond#0a0a0fpasse le ratio WCAG AA pour les grands textes (≥ 18 pt) ; la couleur de crête#8b5cf6atteint un ratio ≈ 4,6 : 1 sur fond noir, passant AA pour les grands textes. - Aucun élément interactif dans la structure par défaut — pas de gestion de focus ou de clavier requise.
- Par défaut, aucun
roleniaria-labeln'est posé. Si le texte animé est un titre de page, enveloppez.vf-wave-textdans un<h1>ou<h2>pour rester dans la hiérarchie sémantique.
Compatibilité navigateur
Nécessite CSS @keyframes et animation — supportés dans tous les navigateurs modernes depuis des années. L'interpolation fluide de font-weight exige une police variable (axe wght) ; sans elle, les poids snappent aux valeurs disponibles.
Si la police n'est pas variable, <code>font-weight</code> saute entre les graisses disponibles au lieu de s'interpoler — l'effet de couleur et le <code>translateY</code> restent actifs. Aucune erreur JS ; la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-wave-scene">
<div class="vf-wave-text" id="vfWaveText">
<span class="vf-wave-char" style="animation-delay:0s;">V</span>
<span class="vf-wave-char" style="animation-delay:0.15s;">O</span>
<span class="vf-wave-char" style="animation-delay:0.30s;">T</span>
<span class="vf-wave-char" style="animation-delay:0.45s;">R</span>
<span class="vf-wave-char" style="animation-delay:0.60s;">E</span>
<!-- un .vf-wave-char par lettre — animation-delay +0.15 s par caractère -->
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| animation-delay (inline style HTML) | 0,15 s × index | Décalage de départ de chaque lettre. Réduire à 0,08 s pour une onde rapide, augmenter à 0,25 s pour une vague lente et dramatique. |
| animation-duration (.vf-wave-char) | 2s | Durée d'un cycle complet par lettre. De 1 s (dynamique) à 4 s (lent et cinématique). |
| font-weight 0%/100% (@keyframes vfWave) | 300 | Graisse au repos. 100 = ultralight, 400 = regular. Réduire pour accentuer le contraste avec le pic. |
| font-weight 50% (@keyframes vfWave) | 900 | Graisse au pic. 700 = bold subtil, 900 = black maximal. N'a d'effet fluide qu'avec une police variable. |
| translateY 50% (@keyframes vfWave) | -10px | Montée verticale au pic de graisse. 0px = poids pur sans déplacement, 20px = rebond marqué. |
| color 50% (@keyframes vfWave) | #8b5cf6 | Couleur accent à plein poids. Remplacer par la couleur primaire de votre marque. |
| color 0%/100% (@keyframes vfWave) | rgba(255,255,255,.6) | Couleur et opacité au repos. rgba(255,255,255,1) pour des lettres toujours pleinement visibles. |
| font-size (.vf-wave-char) | 2.5rem | Taille des caractères. De 1,5 rem (titre de carte) à 8 rem (hero pleine largeur). La police variable doit disposer des instances à cette taille. |
| font-family (.vf-wave-char) | Inter, sans-serif | Doit être une police variable avec axe wght pour une interpolation fluide. Alternatives : Roboto Flex, Plus Jakarta Sans, Nunito Variable. |
FAQ
font-weight nécessite une police variable disposant de l'axe wght. Sans elle (ex. Inter statique ou Arial), le navigateur saute entre les graisses disponibles (400 → 700) au lieu de les interpoler. Chargez Inter Variable via Google Fonts (@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap')) pour obtenir le dégradé continu.<span class="vf-wave-char"> par lettre dans votre .vf-wave-text, en partant de animation-delay: 0s pour la première lettre et en ajoutant 0,15 s par caractère. Les espaces peuvent rester du texte HTML normal sans la classe — ils ne seront pas animés.animation-delay: 0s à la dernière lettre et augmentez vers la première. Pour une vague depuis le centre : délai 0 s sur les lettres centrales, croissant vers les extrémités. Aucun changement CSS global n'est nécessaire.
