Liquid Stretch Text
Chaque lettre s'étire à la verticale comme du caramel chaud au survol et rebondit élastiquement jusqu'à sa taille d'origine — pur CSS, zéro dépendance.
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
Le texte est découpé en autant de <span class="char"> que de caractères — chacun porte la lettre en texte ET dans un attribut data-char. La propriété display: inline-block sur chaque .char est la clé : elle isole la transformation de la lettre sans affecter ses voisines, contrairement à un élément inline natif. Le découpage peut être fait manuellement dans le HTML ou via la fonction utilitaire splitChars(el) exposée par le script, qui lit data-text ou le textContent de l'élément cible.
Au survol, la règle .kt-liquid .char:hover applique transform: scaleY(1.5) scaleX(.8) — la lettre grandit de 50 % en hauteur pendant qu'elle se comprime de 20 % en largeur, imitant le comportement d'un fluide incompressible étiré (caramel, taffy). Simultanément, color bascule vers #a78bfa (violet) et filter: blur(0.5px) ajoute une légère diffusion optique au pic de déformation.
Le rebond élastique au relâchement est produit entièrement par la CSS transition : transform 0.4s cubic-bezier(.34, 1.56, .64, 1). La courbe de Bézier avec son 2e point de contrôle à y = 1.56 (supérieur à 1) fait dépasser la valeur cible lors du retour — la lettre franchit brièvement scaleY(1) vers le bas (légère « écrasement ») avant de se stabiliser, ce qui produit le snap élastique caractéristique. Aucun RAF ni moteur physique JS n'est impliqué.
L'animation est 100 % CSS. La seule responsabilité du JS est la fonction utilitaire splitChars(), non appelée automatiquement — le HTML peut pré-découper les chars statiquement, ce qui rend l'effet compatible avec n'importe quel pipeline de rendu serveur, SSG ou CSS-in-JS sans exécution JS côté client.
Accessibilité
- prefers-reduced-motion non géré dans le code fourni : la transition CSS se déclenche sur tout OS sans vérification de la préférence système. Pour respecter WCAG 2.3.3, ajoutez dans votre feuille de style :
@media (prefers-reduced-motion: reduce) { .kt-liquid .char { transition: none; } }. - Le contenu texte est dans de vrais noeuds texte DOM (
<span>inline-block) — les lecteurs d'écran lisent les lettres normalement ; aucunaria-hiddenn'est nécessaire sur les chars. - Aucun
roleniaria-labeln'est défini sur le conteneur dans le code de base : si le texte porte une valeur sémantique (titre, label), enveloppez-le dans un élément sémantique approprié (<h1>,<p>) et ajoutez unaria-labelavec le texte complet pour éviter que les lecteurs d'écran lisent les lettres une par une. - L'effet n'est déclenché que par
:hoverCSS — aucun équivalent:focusn'est défini. Les utilisateurs au clavier ne voient pas la déformation. Ajoutez.kt-liquid .char:focus { … }(ou:focus-withinsur le parent) pour l'accessibilité au clavier. user-select: nonesur.kt-textempêche la sélection du texte. Retirez cette règle si le texte est censé être copiable (liens, titres de page).
Compatibilité navigateur
Nécessite CSS Transforms niveau 1 et CSS Transitions — natifs dans tous les navigateurs modernes depuis 2017. Zéro dépendance JS pour le rendu.
Sans support CSS Transforms, le texte s'affiche normalement avec sa police et sa couleur — aucune erreur, aucun script cassé. Sur mobile (touch sans hover), les lettres n'interagissent pas ; une alternative <code>touchstart</code> JS peut simuler le survol si nécessaire.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="kt-text kt-liquid" data-text="HELLO">
<!-- Chaque lettre dans un span.char — généré par splitChars(el) ou pré-découpé -->
<span class="char" data-char="H">H</span>
<span class="char" data-char="E">E</span>
<span class="char" data-char="L">L</span>
<span class="char" data-char="L">L</span>
<span class="char" data-char="O">O</span>
</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 |
|---|---|---|
| font-size sur .kt-text | 2.2rem | Taille de la typographie. Augmentez à 4–8 rem pour amplifier la déformation caramel — l'effet est bien plus frappant à grande échelle. |
| font-weight sur .kt-text | 800 | Graisse du texte. Les fontes condensed ou extra-bold (900) accentuent le contraste entre état normal et état étiré. |
| scaleY dans .kt-liquid .char:hover | 1.5 | Facteur d'étirement vertical au survol. 1.2 = effet subtil ; 1.8–2.0 = étirement prononcé de type caramel. |
| scaleX dans .kt-liquid .char:hover | 0.8 | Compression horizontale au survol. Réduire à 0.6 accentue l'incompressibilité liquide ; remonter à 0.95 pour un étirement vertical seul. |
| color dans .kt-liquid .char:hover | #a78bfa | Couleur de la lettre au pic de déformation. Remplacez par votre couleur brand ou utilisez currentColor pour hériter du parent. |
| blur() dans filter: blur() de .kt-liquid .char:hover | 0.5px | Diffusion optique au survol. Mettez 0 pour désactiver ; 1–2 px pour un rendu plus « fondu » et liquide. |
| transition-duration dans .kt-liquid .char | 0.4s | Durée du retour élastique. 0.2–0.25 s = snap nerveux ; 0.6–0.8 s = rebond lent et visqueux. |
| cubic-bezier(.34, 1.56, .64, 1) dans transition | .34, 1.56, .64, 1 | Courbe du ressort. Augmentez le 2e paramètre (1.56 →) pour un overshoot plus marqué ; rapprochez-le de 1.0 pour un retour sans rebond. |
FAQ
:hover + transition). Le JS expose uniquement splitChars(el), une fonction utilitaire non appelée automatiquement. Si le HTML contient déjà les <span class="char">, aucun JS n'est exécuté.cubic-bezier(.34, 1.56, .64, 1) dans la propriété transition contrôle l'overshoot. Le 2e paramètre (1.56) dépasse 1.0 : c'est lui qui produit le snap. Montez-le (ex. 2.0) pour un rebond plus élastique, ramenez-le à 1.0 pour un retour sans rebond. Visualisez la courbe sur cubic-bezier.com.kt-text kt-liquid dont les enfants ont la classe char. Appelez splitChars(el) sur chaque conteneur pour le découpage dynamique ; les instances sont indépendantes.
