Interactive Axes
Trois curseurs natifs pilotent wght (300–1000), CASL et MONO de Recursive en temps réel — du romain géométrique au gras monospace via font-variation-settings.
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'effet repose sur la propriété CSS font-variation-settings appliquée inline sur #vfAxesPreview. La police Recursive expose trois axes distincts : wght (graisse de 300 à 1000), CASL (de 0 à 1 — du dessin géométrique droit à l'italique cursive) et MONO (de 0 à 1 — proportionnel à monospace strict). La règle transition: font-variation-settings .3s sur .vf-axes-preview interpole visuellement chaque changement — aucune animation autonome ne tourne : tout mouvement est déclenché par l'utilisateur.
Chaque slider est un <input type="range"> HTML natif. L'axe wght mappe directement ses entiers 300–1000. Les axes CASL et MONO utilisent une plage 0–100 côté HTML (meilleure résolution au glissement) et sont divisés par 100 dans la fonction update() avant insertion dans la chaîne font-variation-settings. Les spans .vf-axes-val affichent CASL en entier brut (0–100) et MONO en valeur normalisée (0,0–1,0) via .toFixed(1).
La logique JS est une IIFE sans dépendance : quatre getElementById ciblent le preview et les trois sliders, trois listeners input appellent update(), qui reconstruit la chaîne font-variation-settings et met à jour les spans. Un appel initial à update() reflète les valeurs par défaut du HTML (wght 600, CASL 0, MONO 0,5) sans attendre d'interaction. Les labels d'axes utilisent eux-mêmes font-variation-settings: "MONO" 1 — chaque nom d'axe s'affiche en largeur fixe monospace.
Accessibilité
- Aucun mécanisme prefers-reduced-motion n'est présent dans le code — mais l'effet ne comporte aucune animation autonome (pas de RAF, pas de boucle CSS) : la
transition font-variation-settings .3sne se déclenche que sur action utilisateur, sans risque de surcharge vestibulaire. - Les
<input type="range">sont des éléments natifs focusables au clavier — les touches fléchées ←/→ modifient la valeur sans JS supplémentaire ;min,maxetstepsont exposés à l'API d'accessibilité du navigateur. - Les spans
.vf-axes-label(wght, CASL, MONO) ne sont pas associés aux inputs par un<label for="…">— les lecteurs d'écran annoncent les sliders sans nom accessible. Correction recommandée : ajouteraria-label="wght"(ou équivalent) sur chaque<input>. - Le contraste des labels
.vf-axes-label(rgba(255,255,255,0.4)sur fond#0a0a0f) est d'environ 2,3:1 — en dessous du seuil WCAG AA (4,5:1 pour le texte courant). Les valeurs numériques en#8b5cf6atteignent ~4,5:1 sur ce même fond. - Aucun
aria-labelnirolesur la zone de prévisualisation — le contenu typographique n'est pas restitué par les lecteurs d'écran, ce qui est acceptable pour un composant purement visuel de démonstration.
Compatibilité navigateur
Nécessite font-variation-settings (CSS Fonts Level 4) et la police Recursive chargée depuis Google Fonts. Zéro dépendance JS externe.
Si Recursive n'est pas chargée (réseau absent, Google Fonts bloqué), le navigateur utilise la police monospace système — <code>font-variation-settings</code> est ignorée silencieusement, les sliders restent fonctionnels mais sans effet visuel notable.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-preview">
<div class="vf-axes-scene">
<div class="vf-axes-preview" id="vfAxesPreview">Recursive</div>
<div class="vf-axes-controls">
<div class="vf-axes-control">
<span class="vf-axes-label">wght</span>
<input type="range" class="vf-axes-slider" id="vfWght" min="300" max="1000" value="600">
<span class="vf-axes-val" id="vfWghtVal">600</span>
</div>
<div class="vf-axes-control">
<span class="vf-axes-label">CASL</span>
<input type="range" class="vf-axes-slider" id="vfCasl" min="0" max="100" value="0">
<span class="vf-axes-val" id="vfCaslVal">0</span>
</div>
<div class="vf-axes-control">
<span class="vf-axes-label">MONO</span>
<input type="range" class="vf-axes-slider" id="vfMono" min="0" max="100" value="50">
<span class="vf-axes-val" id="vfMonoVal">0.5</span>
</div>
</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 |
|---|---|---|
| #vfAxesPreview (textContent) | "Recursive" | Texte affiché dans la prévisualisation — remplacez par un mot, une phrase courte ou votre propre marque. |
| .vf-axes-preview { font-size } | 2rem | Taille du texte de prévisualisation. Portez à 3–5rem pour un usage hero, réduisez à 1.2rem pour un panneau compact. |
| value sur #vfWght + inline style | 600 | Poids initial au chargement (plage 300–1000). Ajustez aussi la valeur inline de font-variation-settings sur #vfAxesPreview. |
| value sur #vfCasl | 0 (→ CASL 0.0) | CASL initial (0–100 côté HTML → 0–1 dans l'axe). 0 = géométrique droit, 100 = italique cursive complète. |
| value sur #vfMono | 50 (→ MONO 0.5) | MONO initial (0–100 → 0–1). 0 = espacement proportionnel, 100 = monospace strict. |
| background dans .vf-axes-slider::-webkit-slider-thumb | #8b5cf6 | Couleur de la pastille des curseurs. Modifiez aussi color dans .vf-axes-val pour garder la cohérence visuelle. |
| transition sur .vf-axes-preview | font-variation-settings .3s | Durée de l'interpolation CSS. 0s pour un retour instantané, 0.8s pour un rendu plus cinématique. |
| font-family dans .vf-axes-preview | Recursive, monospace | Remplacez par toute autre fonte variable (ex. Inter Variable, Source Serif 4) — adaptez min/max et les noms d'axes en conséquence. |
FAQ
font-family: Recursive, monospace mais n'embarque pas de <link> ni d'@import. Ajoutez <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"> dans votre <head>. Sans cette balise, le navigateur utilisera la police monospace système et les sliders n'auront pas d'effet visuel notable.font-family: Recursive, monospace par votre fonte dans .vf-axes-preview, mettez à jour min, max et value de chaque slider pour correspondre aux plages réelles de ses axes, et changez les noms dans la chaîne font-variation-settings — par exemple 'opsz', 'slnt' ou 'wdth' selon la fonte choisie.vfAxesPreview, vfWght, etc.). Pour plusieurs instances, dupliquez le HTML avec des IDs uniques et réutilisez la logique dans une factory : function makeAxes(previewId, wghtId, caslId, monoId) { … } — les quatre getElementById et les trois listeners deviennent locaux à chaque appel.
