build guide · site 07 of 25

A terminal that boots.

PHOSPHOR is one of 25 sites built by Formwork. There's no 3D and no canvas here — just CSS light tricks and a little state machine that makes a web page feel like a CRT.

the idea

Everyone remembers green-on-black terminals as warmer than they were. PHOSPHOR leans into that nostalgia: a boot log you can actually read, a glowing banner, and a command line that answers back. The whole personality comes from light, type, and timing.

the CRT look

Three stacked, pointer-transparent layers over the page do all the work:

• Scanlines — a repeating-linear-gradient of thin dark bands.
• Vignette — a radial gradient darkening the corners like curved glass.
• Flicker — a faint green wash whose opacity steps a few times a second.

.scan{ background:
  repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.28) 3px);
  background-size:100% 3px; }

Every glowing element just gets a green text-shadow — that's the phosphor bloom.

the boot + the shell

A tiny loop prints the boot lines one at a time on a jittered timer, drops a VT323 banner, then hands control to a real command parser. Input goes to an off-screen <input> mirrored to a fake caret, so it works with a keyboard and a phone:

const [name, ...args] = cmd.split(/\s+/);
const fn = COMMANDS[name.toLowerCase()];
fn ? print(fn(args)) : print(`command not found: ${name}`);

Try help, neofetch, whoami, or guide on the site. Under prefers-reduced-motion the boot prints instantly and the flicker stops.

ship it on github pages

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-phosphor --public --source=. --push
gh api --method POST /repos/OWNER/formwork-phosphor/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

No frameworks, no images — a couple of gradients, one monospace font, and a fifty-line shell.