retro-text-effects.js: terminal text effects for the browser

If you live in the terminal you probably know TerminalTextEffects (TTE) — the Python library that decrypts, rains or explodes text in your terminal. I loved it and wanted those effects in my own web projects too — without forced canvas, without a framework, without a build step. So I ported TTE: retro-text-effects.js is dependency-free vanilla JavaScript, shipped as a single file with no external requests — which also keeps GDPR lawyers relaxed.

Live demo

Enough talk — the library runs right here in this article (the buttons trigger each effect):

 R E T R O - T E X T - E F F E C T S . J S
28+ effects for the browser
one file - zero dependencies
the text stays selectable
no canvas needed (unless you want it)

Two effect families

The effects come in two groups:

• Text effects run on a plain <pre> block and only rewrite its text content — no canvas, the text stays selectable, box-drawing characters stay aligned, and the color is inherited from your element. This group includes decrypt, print, matrix, burn, vhstape, sweep and more — plus crt as a persistent phosphor look with scanlines.
• Canvas effects lay a temporary canvas over the element for free 2D character motion (fireworks, blackhole, rain, bouncyballs, swarm, …), then fade it out and reveal the untouched text below.

Integration in three lines

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

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

That is the whole integration: one script tag exposes window.RetroTextEffects, then you call an effect with an element or a CSS selector. Every effect returns a small controller:

const fx = RetroTextEffects.print('#log', { cps: 80 });
fx.cancel();        // stop early
await fx.finished;  // promise, resolves when the animation ends

Options like speed, fps, glyphs or color can be tuned per effect; font, color and character grid are read from the target element so the hand-off to the real text is seamless.

Why single file?

The library is built for the case where there is no npm project: a CMS page, a widget, a static demo. Copy the file, add a script tag, done — no dependencies, no build, no external requests. That is exactly how the demo in this article is embedded, by the way.

Links: GitHub repo · Live demo of all effects