Experiment · 2025 · 09 / 10
Interactive Terminal Website.
A terminal pretending to be a website, built in vanilla JS, with fourteen themes, six canvas backdrops, a handful of games, and a branching horror story hiding inside.
Launch Project↗- Context
Interactive Terminal Website is a single HTML page that boots into a fake shell: blinking block cursor, ASCII banner, `help`, `whois`, `social`, `projects`, `theme`, `effect`. Behind that prompt sits roughly four thousand lines of vanilla JavaScript that draw six different canvas backgrounds (matrix rain, stars, rain, bubbles, snow, fireflies), swap between fourteen hand-tuned color themes with persistent `localStorage` choice, run Hangman / Number Guessing / Rock Paper Scissors inline, fetch live weather from geolocation, accept voice commands through the Web Speech API, and hide a full 1,800-line branching horror text-adventure called Project ECHO-341. No framework, no build step, just scripts in a folder and a `http-server` script to serve them.
- Approach
The build leans into the constraint. One textarea captures input, one dispatcher routes commands, one canvas handles every visual effect, one theme map owns every palette, one `localStorage` key per preference. Every script tag is versioned (`?v=1.3.7`) with a small node release script so cache-busting stays boring and deterministic. Games are plain classes with their own state flags on the main event loop, which keeps the horror game's nine endings, voice recognition's async permission dance, and the Konami code sequence detector from stepping on each other. The whole thing is CI-less, framework-less, and runs unchanged from a file URL.
- Outcome
Shipped as a toy on GitHub Pages under `sallahboussettah.github.io/terminal-website`. Useful as a pressure-test of how far vanilla JS goes before structure pays off, and as the place I kept going back to try one more theme, one more effect, one more ending. The horror game outgrew the terminal it lives in and is the piece I am proudest of here. Archived as a creative frontend artifact, not maintained, kept around because it still runs.
- Process
- 01
Command surface first
Everything starts from a single textarea that streams characters into a fake prompt line. The command dispatcher is a flat switch with aliases, command history via arrow keys, and a small cache-busting versioning system wired into every `<script>` tag so a visitor never gets a stale build.
- 02
One canvas, six effects
A single pinned canvas drives matrix rain, rain drops, stars, bubbles, snow, and fireflies. Each effect owns its own particle array and draw loop, switches are throttled through `requestAnimationFrame` at ~50fps, and the chosen effect persists in `localStorage` so the page remembers how you left it.
- 03
Themes as CSS variable sets
Fourteen themes (Default, three Cyberpunk variants, three Retro, two Hacker, two Synthwave, Dracula, Nord, Ocean) live as plain JS objects of background / text / cursor / command / accent / prompt colors. Changing theme rewrites the variables, retints the canvas effect, and writes the choice back to storage.
- 04
A narrative game inside a prompt
Project ECHO-341 is a 1,800-line branching horror text-adventure with three consciousness paths, nine endings, glitch / whisper / error text classes, and an audio bed (ambient static, whispers, screams) triggered from scene transitions. It is the piece the rest of the terminal was built to frame.
- 05
Everything else earning its keep
Hangman on programming words, number-guessing with difficulties, rock-paper-scissors best-of-three, a Web Speech voice-command beta, OpenWeather geolocation lookup, an ASCII-art gallery, Konami code, `follow the white rabbit` and `42` easter eggs, a `nokta` Moroccan-joke sequence with a laugh track, and a shutdown animation on `sudo rm`.
- Credits
- Build
- Salah Boussettah
- Next
→ XO Game
Game · 2025