A browser port of TerminalTextEffects (TTE), the Python terminal-effects library - rebuilt in vanilla JavaScript. Thirty text and canvas effects, no dependencies, no external requests, one self-contained file you can drop into any page.
Every button below runs the real library, right here in your browser. Pick an effect and watch the text resolve.
██████ ███████ ████████ ██████ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██████ █████ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███████ ██ ██ ██ ██████ . j s
=== Link scan started === 14 domains loaded from blacklist fields: title, body, url, summary, code [staging.example.com] 3 matches in content_items [staging.example.com] 3 entries repaired [www.example.org] 1 match in content_items [www.example.org] 1 entry repaired === Scan finished in 7.2s === domains scanned: 14 found: 4 repaired: 4 errors: 0
Text effects rewrite the element's text content - no canvas, the text stays selectable. Canvas effects lay a temporary canvas over the element for free 2D character motion, then fade out to reveal the untouched text. The *2 effects are canvas twins of their text counterparts.
decrypt | Cells flicker through random glyphs, then lock onto the final text. |
print | Reveals the text in reading order with a moving print head. |
matrix | Each column resolves top-to-bottom behind a falling bright glyph. |
overflow | Rows scroll and reshuffle, then settle into order. |
errorcorrect | Character pairs start swapped and swap back one by one. |
randomsequence | The characters appear one after another in random order. |
middleout | The text grows from the centre of the block outward. |
sweep | A noisy band sweeps across and leaves the resolved text behind. |
pour | The text fills up from the bottom like a liquid, snaking back and forth. |
slide | The rows slide in as blocks, alternating from the left and the right. |
burn | An ember front with a ragged edge burns the text in. |
vhstape | Glitch bands shift rows and sprinkle noise until the tracking settles. |
crt | Persistent CRT style treatment: glow, scanlines, flicker. Toggle on, cancel() removes it. |
matrix2 | The classic falling-glyph screen: katakana rain, then reveal (canvas twin of matrix). |
decrypt2 | Canvas twin of decrypt: the text emerges bright from dimmed ciphertext. |
print2 | Canvas twin of print: glowing print head with a hot afterglow on fresh characters. |
overflow2 | Canvas twin of overflow: the block spins past sub-pixel-smooth and decelerates onto the text. |
beams | Bright beams sweep the rows and columns, then a wipe brings the text to full brightness. |
rain | Every character falls from above straight into its place. |
bouncyballs | Characters drop in as coloured balls and bounce into position. |
bubbles | Every character floats down in its own swaying bubble and pops into place. |
scattered | Characters start scattered across the stage and glide to their spot. |
expand | The whole text bursts outward from the centre. |
spray | A nozzle in the corner sprays the characters onto the block in curved arcs. |
swarm | The characters arrive in wobbling swarms that settle area by area. |
fireworks | Rockets launch, explode into sparks and throw their characters to the text. |
blackhole | Characters spiral into a singularity, then erupt back out to the text. |
rings | Characters orbit on concentric spinning rings, then disperse to their positions. |
unstable | The text shakes, explodes towards the edges and reassembles. |
laseretch | A laser beam traces the text in and throws off falling sparks. |
Download retro-text-effects.min.js from the releases and include it with a plain script tag. No build step, no dependencies.
<script src="retro-text-effects.min.js"></script>
<script>
RetroTextEffects.decrypt('#log');
RetroTextEffects.print('#banner', { cps: 80 });
RetroTextEffects.fireworks('#log', { speed: 1.2 });
const screen = RetroTextEffects.crt('#log'); // screen.cancel() removes it
</script>
| Option | Type | Default | Effects |
|---|---|---|---|
speed | number | 1 | all |
onDone | function | - | all |
fps | number | 30 | text effects |
glyphs | string | built-in pool | decrypt, decrypt2, matrix, matrix2, sweep |
preserveWhitespace | boolean | true | decrypt |
cps | number | 60 | print, print2 |
head | string | █ | |
cycles | number | 3 | overflow, overflow2 |
ratio | number | 0.1 | errorcorrect |
band | number | 6 | sweep |
duration | number (ms) | 1500 | matrix2 |
fontSize | number | 20 | matrix2 |
color | string | #00ff00 / #33ff33 | matrix2, crt |
scanlineOpacity | number | 0.15 | crt |
glow | boolean | true | crt |
flicker | boolean | true | crt |
Each effect takes an element or a CSS selector and returns { finished, cancel }.