Library · version 0.1.0
tte.js
Dependency-free terminal-style text effects for the browser. Animate ASCII art and text with 37 Canvas effects written in plain JavaScript.
Why I built this
I saw terminal effects that made plain text feel physical. Letters burned, scattered, decrypted, and snapped into place. I wanted the same kind of animation in a web page.
tte.js recreates that idea with browser-native JavaScript and Canvas. It has no framework, runtime dependency, or WebAssembly module. The included gallery runs every effect and lets you change its speed, colors, and random seed.
See every effect
This 14-second run contains all 37 effects. The live gallery lets you replay each one and change the speed, colors, and seed.
What it includes
37 effects
Use beams, decrypt, laseretch, matrix, rain, wipe, and 31 more effects from the same small API.
Pure JavaScript
Run the library as browser modules without a framework, build step, runtime package, or WebAssembly.
Canvas rendering
Keep the original text in the document while Canvas draws each animated frame over it.
Repeatable animations
Pass a seed to reproduce the same particles, paths, and character choices on every run.
Playback controls
Play, stop, restart, replace an effect, or destroy the animation through one returned object.
Custom elements
Register the included text-effect element when declarative HTML fits better than JavaScript setup.
Use it
Download and extract the ZIP. Keep its src directory in your project, then add the text you want to animate:
<pre id="title">WELCOME TO THE TERMINAL</pre>Import the library from the extracted directory:
import { createTextEffect } from './tte.js/src/index.js'
createTextEffect('#title', {
effect: 'laseretch',
duration: 2400,
colors: ['#8a5cff', '#00d1ff', '#ffffff'],
})The original element controls the font and layout. Canvas draws the animation over it while screen readers keep the source text.
All 37 effects
beamsbinarypathblackholebouncyballsbubblesburncolorshiftcrumbledecrypterrorcorrectexpandfireworkshighlightlaseretchmatrixmiddleoutorbittingvolleyoverflowpourprintrainrandomsequenceringsscatteredsliceslidesmokespotlightssprayswarmsweepsynthgridthunderstormunstablevhstapewaveswipe
Credits and license
The effect names, concepts, and animation designs come from the open source projects below.
TerminalTextEffects by ChrisBuilds
The original Python project. The 37 effect names, concepts, animation designs, and engine architecture originate here.
ttfx by 37signals and omacom
The parity-focused Rust port provided another reference for the behavior of every effect.
Omarchy WebAssembly demo by Christoffer Hallas
The browser demo shared by DHH inspired this JavaScript adaptation. tte.js does not include its WebAssembly build.
tte.js uses the MIT License. The download preserves the upstream copyright notices and includes the original MIT license text from both projects. Read the tte.js license and third-party notices.
MIT licensed with upstream notices
Download tte.js
The ZIP includes the complete source, tests, demo, GIF capture script, documentation, MIT license, original upstream licenses, and attribution notice.