retro-text-effects.js:
Terminal-Texteffekte für den Browser

Wer im Terminal lebt, kennt TerminalTextEffects (TTE) - die Python-Library, die Text im Terminal entschlüsselt, regnen oder explodieren lässt. Ich fand das großartig und wollte diese Effekte auch in meinen Web-Projekten haben - ohne Canvas-Zwang, ohne Framework, ohne Build-Step. Also habe ich TTE portiert: retro-text-effects.js ist dependency-freies Vanilla JavaScript, ausgeliefert als eine einzige Datei ohne externe Requests - auch DSGVO-technisch entspannt.

Live-Demo

Genug geredet - die Library läuft direkt hier im Artikel (die Buttons starten den jeweiligen Effekt):

 R E T R O - T E X T - E F F E C T S . J S
42 Effekte für den Browser
eine Datei - null Dependencies
der Text bleibt selektierbar
kein Canvas nötig (außer du willst)

Drei Effekt-Gruppen

Inzwischen sind es 42 Effekte, aufgeteilt in drei Gruppen:

• Text-Effekte (15 Stück) laufen auf einem normalen <pre>-Block und schreiben nur dessen Textinhalt um - kein Canvas, der Text bleibt selektierbar, Box-Drawing-Zeichen bleiben ausgerichtet, und die Farbe wird vom Element geerbt. Dazu gehören decrypt, print, matrix, burn, vhstape, waves, slide, pour und mehr.
• Canvas-Effekte (24 Stück) legen temporär ein Canvas über das Element für freie 2D-Bewegung (fireworks, blackhole, rain, swarm, synthgrid, thunderstorm und weitere), blenden es danach aus und geben den unangetasteten Text darunter frei. Einige tragen eine 2 im Namen (matrix2, decrypt2, print2, overflow2): das sind die Canvas-Zwillinge der gleichnamigen Text-Effekte, aufwendiger, aber mit mehr Bewegung.
• Style-Effekte (3 Stück) verändern das Element an Ort und Stelle, ohne den Text neu zu schreiben: crt legt eine dauerhafte Phosphor-Optik mit Scanlines darüber, colorshift einen laufenden Farbverlauf, highlight einen einzelnen Lichtstreifen.

Integration in drei Zeilen

<pre id="log">=== System ready ===</pre>

<script src="retro-text-effects.min.js"></script>
<script>
  RetroTextEffects.decrypt('#log');
</script>

Das ist die komplette Integration: Ein Script-Tag exponiert window.RetroTextEffects, dann wird ein Effekt mit Element oder CSS-Selektor aufgerufen. Jeder Effekt liefert einen kleinen Controller zurück:

const fx = RetroTextEffects.print('#log', { cps: 80 });
fx.cancel();        // vorzeitig stoppen
await fx.finished;  // Promise, aufgeloest am Ende der Animation

Optionen wie speed, fps, glyphs oder color lassen sich pro Effekt anpassen. Schrift, Farbe und Zeichenraster liest die Library vom Ziel-Element ab, damit beim Übergang zum echten Text kein sichtbarer Sprung entsteht.

Warum Single File?

Die Library ist für den Fall gebaut, in dem man kein npm-Projekt hat: eine CMS-Seite, ein Widget, eine statische Demo. Datei kopieren, Script-Tag setzen, fertig - keine Dependencies, kein Build, keine externen Requests. Genau so ist übrigens auch die Demo in diesem Artikel eingebunden.

Links: GitHub-Repo · Live-Demo aller Effekte