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
28+ Effekte für den Browser
eine Datei - null Dependencies
der Text bleibt selektierbar
kein Canvas nötig (außer du willst)

Zwei Effekt-Familien

Die Effekte kommen in zwei Gruppen:

• Text-Effekte 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, sweep und mehr — plus crt als dauerhafte Phosphor-Optik mit Scanlines.
• Canvas-Effekte legen temporär ein Canvas über das Element für freie 2D-Bewegung (fireworks, blackhole, rain, bouncyballs, swarm, …), blenden es danach aus und geben den unangetasteten Text darunter frei.

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 die Übergabe an den echten Text nahtlos ist.

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