--- title: "Terminal Star Field" description: "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." canonical: "https://fx.statico.io/demos/terminal-starfield" doc_version: "0.1.0" last_updated: "2026-10-14" date_modified: "2026-10-14T22:27:12-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Terminal Star Field 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. Seen on [statico's gist](https://gist.github.com/statico/6be620d98837c786bc4913cb060e85b9) · credit statico (Ian Langworth). ## How it works 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. ## Code Copy this whole file. It is a complete, runnable HTML document — also served verbatim at . ```html Terminal Star Field

Terminal Star Field

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.

How it works

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.

How to use this file

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.

Source and credit

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.

More

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.

star field mode
``` ## Source & credit Effect seen on — credit to statico (Ian Langworth). This is an independent recreation of the effect built from scratch for educational use. No proprietary source code was copied. ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups