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
42 effects for the browser
one file - zero dependencies
the text stays selectable
no canvas needed (unless you want it)

Three effect groups

By now there are 42 effects, split into three groups:

• Text effects (15 of them) 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, waves, slide, pour and more.
• Canvas effects (24 of them) lay a temporary canvas over the element for free 2D character motion (fireworks, blackhole, rain, swarm, synthgrid, thunderstorm and others), then fade it out and reveal the untouched text below. Some carry a 2 in the name (matrix2, decrypt2, print2, overflow2): those are the canvas twins of the text effects with the same name - more elaborate, with more motion.
• Style effects (3 of them) change the element in place without rewriting the text: crt lays a persistent phosphor look with scanlines over it, colorshift a sliding gradient, highlight a single band of light.

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 there is no visible jump when the real text takes over.

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