Retro Terminal
Une fenêtre de terminal dont les lignes vertes se dévoilent l'une après l'autre, une seule fois, avant qu'un curseur plein se mette à clignoter. Tout en CSS.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
.rtm-window dessine la fenêtre : barre du haut à trois pastilles (rouge, jaune, vert), corps noir en Courier New, fines lignes de balayage posées par .rtm-body::before. Chaque ligne .rtm-line est en vert #3f3, 12 px, avec un halo de 5 px.
Une ligne qui porte aussi la classe rtm-typing commence à largeur nulle (width: 0; overflow: hidden; white-space: nowrap). L'animation rtmTyping l'élargit jusqu'à 100 % en 30 pas (steps(30)) pendant --rtm-line-time (2 s par défaut) : le texte apparaît par saccades, comme tapé. Chaque ligne attend son rang : animation-delay vaut --rtm-i × --rtm-line-time, avec --rtm-i posé de 0 à 5 sur les six premières lignes. L'animation ne joue qu'une fois et reste sur son état final.
Le pavé .rtm-cursor de la dernière ligne clignote ensuite sans fin (0,8 s, en marches). La frappe démarre quand la fenêtre est rendue : au chargement de la page, ou quand vous l'affichez (un élément passé de display: none à visible rejoue ses animations CSS). Aucun JavaScript.
Accessibilité
- Texte présent dès le départ : les lignes existent dans le HTML ; seule leur largeur visible est animée. Un lecteur d'écran lit tout le texte immédiatement, sans attendre la frappe.
- Éléments décoratifs masqués : la barre à pastilles et le curseur portent
aria-hidden="true". - Réduire les animations : sous
prefers-reduced-motion: reduce, toutes les lignes s'affichent d'un coup et le curseur reste allumé, sans clignoter. - Aucune interaction : le terminal n'est pas un champ de saisie ; il n'ajoute aucun élément focalisable. Le curseur n'invite pas à taper : ne l'utilisez pas là où le visiteur pourrait croire qu'il peut écrire.
Compatibilité navigateur
CSS seul, aucune dépendance. Le délai de chaque ligne est calculé avec calc() et des variables CSS (Chrome 49, Firefox 31, Safari 9.1 d'après les données MDN) ; la propriété la plus récente est inset (Chrome 87, Firefox 66, Safari 14.1). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : à 2,5 s, première ligne complète, deuxième en cours, suivantes vides, dans les trois moteurs ; deux copies indépendantes ; tout le texte visible en mouvement réduit.
Sans animations CSS, les lignes resteraient à largeur nulle : c'est pourquoi la règle de mouvement réduit les remet à width: auto. Pour un contexte où le texte doit être lu sans délai, retirez simplement la classe rtm-typing des lignes concernées.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0276-root">
<div class="rtm-window">
<div class="rtm-header" aria-hidden="true">
<span class="rtm-dot rtm-red"></span>
<span class="rtm-dot rtm-yellow"></span>
<span class="rtm-dot rtm-green"></span>
</div>
<div class="rtm-body">
<div class="rtm-line rtm-typing">user@retro:~$ npm install nostalgia</div>
<div class="rtm-line rtm-typing">Installing packages...</div>
<div class="rtm-line rtm-typing">Done in 3.14s</div>
<div class="rtm-line rtm-typing">user@retro:~$ <span class="rtm-cursor" aria-hidden="true"></span></div>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Lignes (HTML — <div class="rtm-line rtm-typing">) |
4 lignes | Jusqu'à 6 lignes se suivent toutes seules. Au-delà, donnez son rang à la ligne : style="--rtm-i: 6". Sans rtm-typing, une ligne s'affiche tout de suite. |
Durée par ligne (CSS — --rtm-line-time) |
2 s | 0,4 à 0,6 s pour un journal vif ; la durée sert aussi d'écart entre deux lignes. |
Largeur (CSS — --rtm-w) |
280 px | 100% remplit le parent. La frappe élargit chaque ligne jusqu'à la largeur du terminal : une fenêtre large tape plus vite les lignes courtes. |
Couleurs (CSS — --rtm-color, --rtm-glow) |
#3f3, halo rgba(51, 255, 51, .5) |
Le curseur prend --rtm-color. Ambre #ffb000 ou blanc cassé changent l'époque évoquée. |
Taille du texte (CSS — --rtm-size) |
12 px | 9 à 10 px dans un petit composant, 14 px et plus en plein écran. |
| Rejouer la frappe (HTML/JS — affichage de la racine) | Une fois, au premier rendu | Passez la racine de display: none à visible, ou remplacez-la par une copie (root.replaceWith(root.cloneNode(true))) : les animations repartent de zéro. |
Cadre de démonstration (CSS — --rtm-page, --rtm-root-h) |
#0a0a0f, 300 px de haut au minimum |
transparent et 0 pour poser la fenêtre dans votre mise en page. |
FAQ
<div class="rtm-line rtm-typing"> dans .rtm-body avec style="--rtm-i: 0" ; il se tape dès son insertion. Pensez à aria-live="polite" sur .rtm-body pour que les nouvelles lignes soient annoncées.
