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.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 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 monospace système (Courier New, Consolas…). L'animation reste fonctionnelle, le rendu visuel change légèrement. Sans support font-variation-settings, Recursive s'affiche en style statique par défaut.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec 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>Le code complet HTML + CSS + JS de Typewriter Variable, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
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).
