Typewriter Variable
Révèle un texte monospace lettre par lettre avec la police variable Recursive et un curseur clignotant — purement CSS, 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
Le texte est écrit entièrement dans le DOM mais dissimulé derrière overflow: hidden; white-space: nowrap. L'animation vfType fait passer la width de 0 à 280px en steps(20) — soit 20 sauts discrets d'égale largeur — ce qui simule visuellement la révélation caractère par caractère. La pause de 50 % à 80 % maintient le texte visible avant l'effacement, puis le cycle recommence indéfiniment.
Le curseur est le border-right: 2px solid de l'élément texte lui-même. L'animation vfBlink bascule la couleur de la bordure vers transparent à 50 % avec un timing step-end — aucun fondu, saut franc — ce qui reproduit exactement le clignotement d'un curseur de terminal classique.
La police Recursive est une variable font : l'axe "MONO" 1 bascule son moteur de dessin en espacement monospace strict (tous les glyphes à largeur identique). C'est cette propriété qui rend la technique steps() crédible — chaque saut de largeur correspond exactement à un caractère. Les axes "CASL" (cursivité) et "wght" (graisse) sont disponibles pour varier le style sans changer de police.
Les lignes d'accompagnement (.vf-typewriter-line) utilisent le même Recursive Mono à 0,75rem et 30 % d'opacité — elles représentent les commandes précédentes et suivantes du terminal, donnant du contexte sans attirer l'attention. La scène entière est centrée par flexbox vertical.
Accessibilité
- prefers-reduced-motion : ABSENT du code — l'animation de frappe et le clignotement du curseur s'exécutent même quand le système signale
reduce. Pour corriger, ajoutez :@media (prefers-reduced-motion: reduce) { .vf-typewriter-text { animation: none; width: 280px; border-right: none; } } - Le texte est directement dans le DOM (
<span>natif) — les lecteurs d'écran le lisent sans obstacle, aucunaria-hiddenni canvas. - Contraste :
#10b981(vert Emerald) sur fond#0a0a0f→ ratio ≈ 8,5:1, niveau WCAG AAA (texte normal). Vérifiez le ratio si vous changez la couleur. - Aucune interaction clavier requise — l'effet est purement décoratif, pas de focusable.
- La structure HTML ne porte pas de
roleni d'aria-label. Pour un usage en hero, ajoutezrole="img" aria-label="Animation de terminal"sur le conteneur.
Compatibilité navigateur
Nécessite CSS animation, steps() et font-variation-settings — disponibles dans tous les navigateurs supportant les polices variables.
Si Recursive n'est pas chargée, le navigateur bascule sur la <code>monospace</code> système (Courier New, Consolas…). L'animation reste fonctionnelle, le rendu visuel change légèrement. Sans support <code>font-variation-settings</code>, Recursive s'affiche en style statique par défaut.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="vf-preview">
<div class="vf-typewriter-scene">
<span class="vf-typewriter-line">
<span class="vf-typewriter-prompt">$</span> commande précédente
</span>
<span class="vf-typewriter-text">texte à animer ici</span>
<span class="vf-typewriter-line">
<span class="vf-typewriter-prompt">$</span> prochaine-commande
</span>
</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 (vfType) | 4s | Durée d'un cycle de frappe complet. Augmentez à 6–8s pour une frappe lente et lisible, réduisez à 2s pour un rendu nerveux. |
| steps(20) dans vfType | 20 | Nombre de colonnes révélées par cycle — doit correspondre au nombre de caractères du texte pour un alignement parfait. Comptez vos caractères et ajustez. |
| max-width sur .vf-typewriter-text | 280px | Longueur maximale visible. À aligner avec la largeur réelle du texte au corps choisi pour éviter l'effet « coupé ». |
| color sur .vf-typewriter-text | #10b981 | Couleur du texte et du curseur (le border-right hérite de la même valeur via la propriété color). |
| font-size sur .vf-typewriter-text | 1.2rem | Corps du texte animé. Ajustez en cohérence avec max-width et steps(). |
| font-variation-settings sur .vf-typewriter-text | "MONO" 1, "CASL" 0, "wght" 400 | Axes de la police Recursive. "CASL" 1 = style cursif, "wght" 700 = gras, "MONO" 1 obligatoire pour l'espacement fixe. |
| color sur .vf-typewriter-prompt | #8b5cf6 | Couleur du symbole de prompt ($). Adaptez à votre palette brand. |
| color sur .vf-typewriter-line | rgba(255,255,255,0.3) | Opacité des lignes de contexte (commandes statiques autour du texte animé). |
| gap sur .vf-typewriter-scene | 12px | Espacement vertical entre les lignes du terminal. Augmentez pour aérer, réduisez pour compacter. |
FAQ
@keyframes, une propriété animation et font-variation-settings. Aucun fichier .js n'est nécessaire. Copiez le HTML et le CSS, ajoutez la police Recursive via Google Fonts, et c'est prêt.<span class="vf-typewriter-text">. Ensuite, adaptez steps(N) dans l'animation vfType au nombre de caractères de votre texte (comptez y compris les espaces), et ajustez max-width pour que la ligne ne soit pas coupée.<span> en position absolue et décaler leurs animation-delay. Avec un peu de JS, la solution la plus propre est de modifier le textContent au moment de la réinitialisation (quand width revient à 0).
