A three-layer parallax star field of monospace glyphs scrolling right-to-left in a real in-browser terminal, drawn with ANSI escapes and xterm 256 colors, with live controls for glyph mode, star count, speed, and color saturation.
This is statico's Bun terminal script, running in a real terminal in the browser. The page is an [xterm.js](https://xtermjs.org/) terminal sized to the window, and the script is the original almost line for line. It builds ANSI escape strings (cursor moves like ESC[r;cH and 256-color codes like ESC[38;5;nm) and writes them to the terminal, the same way it writes to process.stdout under Bun. Every glyph sits in a monospace cell.
Three depth layers move 1, 2 and 4 cells per frame at 30fps. The far layer holds half the stars, the mid layer a third, and the near layer the rest. Each star gets a glyph from an ASCII set (. * +) or a Unicode set (· ∗ ⋆ ✦ ✧ ✶ ⁎ ⊹ ★) and an xterm 256-color index from a gray or a colored palette for its layer. The saturation level (0–4) sets the chance of a colored pick, and about 0.5% of stars pick a new color each frame. The renderer is a dirty-cell diff: it builds a map of this frame's cells, erases cells that went empty, and writes only the cells that changed. A nearer layer wins a shared cell. A HUD line on row 1 flashes the current setting.
Changes from the original are small. term.write replaces process.stdout.write. term.onData replaces raw-mode stdin, so the original hotkeys work (a/u, +/-, [/], s/d), and a page-level listener keeps them working after the panel takes focus. Added stars land at random across the sky instead of off the right edge, so a big batch doesn't arrive as one wave. A resize clears the screen and resets the diff. The hotkeys also have a form panel (a mode toggle and sliders for stars, speed and color) that calls the same adjust functions. xterm.js 5.5.0 and its fit addon are the only dependencies, vendored (MIT) in /vendor/xterm/ rather than loaded from a CDN, so copy that folder along with the file. Under prefers-reduced-motion one still frame is drawn, and it is redrawn only when a control changes.
This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/terminal-starfield.md. Full writeup and live preview: https://fx.statico.io/demos/terminal-starfield.
Effect originally seen on statico's gist (https://gist.github.com/statico/6be620d98837c786bc4913cb060e85b9) — credit to statico (Ian Langworth). This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.
Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.