Casual Morph
Animation CSS pure : Recursive morphe entre ses axes CASL, MONO et wght en 3 états distincts — typographie vivante, zéro JavaScript.
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
font-variation-settings est une propriété CSS numérique : le moteur de rendu l'interpole via les @keyframes exactement comme opacity ou transform. L'animation vfCasualMorph définit trois arrêts (0 %/100 %, 33 %, 66 %) pour trois axes simultanés, en boucle ease-in-out de 4 secondes — sans une ligne de JavaScript.
Chaque axe de Recursive contrôle une dimension distincte du caractère : CASL (0 = traits linéaires mécaniques → 1 = rondeurs et rebonds d'écriture manuscrite), MONO (1 = chasse fixe code → 0 = espacement proportionnel display), wght (400 Regular → 700 Bold → 900 Black). Les trois axes combinés font basculer la police entre trois personnalités : monospace strict et léger, casual gras et proportionnel, semi-mono noir — des registres typographiques opposés produits par une seule famille.
La propriété color est co-animée dans les mêmes keyframes pour amplifier visuellement chaque état : blanc atténué à l'état neutre (mono, régulier), rose #ec4899 à l'état casual (manuscrit, bold), violet #8b5cf6 à l'état lourd (semi-mono, black). Le navigateur interpole les valeurs hex comme des tuples RGB — aucun code supplémentaire requis.
Les éléments auxiliaires (.vf-casual-label, .vf-casual-axis) maintiennent "MONO" 1 fixe sur la propriété font-variation-settings : leur chasse reste constante et sert de repère visuel stable face au texte principal qui morphe.
Accessibilité
- prefers-reduced-motion : absent du code — l'animation CSS tourne en boucle inconditionnellement. Ajoutez
@media (prefers-reduced-motion:reduce) { .vf-casual-text { animation: none } }pour respecter la préférence système. - Aucun attribut
aria-*sur les éléments : pour un usage décoratif, ajoutezaria-hidden="true"sur.vf-casual-scene; pour un usage informatif (texte significatif), wrappez dans unrole="img"avecaria-labeldécrivant l'état final ou le mot affiché. - Contraste des trois couleurs sur
#0a0a0f: blanc atténué (~7:1), rose#ec4899(~6:1), violet#8b5cf6(~5:1) — tous ≥ 4,5:1, WCAG AA respecté. - L'effet est purement décoratif et non interactif : aucun élément focusable, aucune contrainte de navigation clavier.
- Les badges
.vf-casual-axisfournissent un contexte textuel sur les axes animés, mais sans rôleariaexplicite — masquez-les avecaria-hidden="true"s'ils sont purement illustratifs.
Compatibilité navigateur
Nécessite font-variation-settings animable (CSS Fonts Level 4) et la police Recursive (variable font). Zéro dépendance JS.
Sans Recursive chargée, le navigateur utilise la police de secours <code>monospace</code> — l'animation de poids et de couleur fonctionne encore, mais les axes CASL et MONO restent sans effet visible sur les glyphes.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-preview">
<div class="vf-casual-scene">
<span class="vf-casual-text">Recursive</span>
<span class="vf-casual-label">CASL · MONO · wght</span>
<div class="vf-casual-axes">
<span class="vf-casual-axis">CASL 0→1</span>
<span class="vf-casual-axis">MONO 0→1</span>
<span class="vf-casual-axis">wght 400→900</span>
</div>
</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-duration sur `.vf-casual-text` | 4s | Durée d'un cycle complet. 2 s = vif et nerveux, 8 s = lent et contemplatif. |
| font-size sur `.vf-casual-text` | 2rem | Taille du texte morphant. Montez à 4–6 rem pour un headline hero, descendez à 1 rem pour un label compact. |
| color dans `@keyframes vfCasualMorph` (3 valeurs) | rgba(255,255,255,.7) / #ec4899 / #8b5cf6 | Palette des trois états : neutre, casual, lourd. Remplacez par vos couleurs brand ou par une seule valeur fixe pour désactiver la transition chromatique. |
| CASL dans les 3 keyframes | 0 / 1 / 0.5 | Contrôle du registre manuscrit à chaque état. 0 = géométrique pur, 1 = plein casual. Réduisez à 0→0,5 pour une variation discrète. |
| MONO dans les 3 keyframes | 1 / 0 / 0.5 | Passage monospace ↔ proportionnel. Fixez MONO 1 partout pour un affichage uniquement code ; fixez MONO 0 pour un affichage uniquement display. |
| wght dans les 3 keyframes | 400 / 700 / 900 | Plage de graisse entre les états. Réduisez à 300–600 pour un effet plus fin ; la valeur 900 (Black) maximise le contraste de masse entre états. |
| animation-timing-function sur `.vf-casual-text` | ease-in-out | linear = morphe continu sans plateau ni pause aux extrêmes ; cubic-bezier(0.4,0,0.2,1) = accélération nette aux transitions, pause marquée aux états. |
FAQ
font-family: Recursive, monospace mais ne charge pas la police — ajoutez <link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"> dans votre <head>. Pour un usage offline ou conforme RGPD, hébergez le fichier woff2 en self-hosted via fontsource.font-variation-settings de chaque keyframe : "CRSV" 0, "slnt" -12. Attention : si un axe est omis dans un keyframe, il revient à sa valeur par défaut au lieu d'interpoler — listez tous les axes dans chaque arrêt pour un morphe cohérent.IntersectionObserver : el.style.animationPlayState = isVisible ? 'running' : 'paused'. Cela n'affecte pas la visibilité — l'animation reprend exactement là où elle s'était arrêtée.
