make-of · phosphor-1

A CRT terminal that is a real, accessible input

Most web "terminals" are a div that listens for keystrokes. This one is a genuine form field wearing a cathode-ray costume — which is why screen readers, mobile keyboards, and muscle memory all work.

What it demonstrates

That a heavy aesthetic and accessibility are not enemies. The whole CRT look — glow, scanlines, curvature, flicker — is non-interactive decoration layered over ordinary semantic HTML: a form, an input, and a log region that screen readers announce politely.

The techniques, honestly named

Phosphor glow — two stacked text-shadow layers; no filters, no canvas.
Scanlines + aperture grille — two repeating-linear-gradient overlays on one pseudo-element.
Screen curvature — an elliptical border-radius plus a radial-gradient vignette that darkens the corners. There is no 3D transform; the eye fills it in.
Flicker — a stepped keyframe that flashes a translucent overlay for three frames every ~4 seconds, removed entirely under prefers-reduced-motion.
Block cursor on a real input — the native caret is transparent; a hidden mirror span measures the text before the caret and positions a glowing block there.
Games — snake and matrix rain draw to one shared canvas with requestAnimationFrame, stop on visibilitychange, and hand focus back to the prompt when they end.

Recreate it

Paste this prompt into your AI coding tool of choice. It contains the full art direction and the quality bar.

recreation prompt · ~250 words

Build a single self-contained HTML file: an interactive green-phosphor CRT terminal you can actually type into.

Art direction: a dark room with one glowing screen. Charcoal bezel with rounded corners; screen in deep green-black (#031208); primary phosphor green (#41ff8a) with a soft double text-shadow glow; amber (#ffc26e) as the only accent. Type everything in VT323 (Google Fonts) with a monospace fallback. The CRT is layered CSS only: repeating-linear-gradient scanlines plus a faint RGB aperture grille, a radial-gradient vignette that sells the curvature, elliptical border-radius on the screen, and a rare, brief flicker keyframe.

Interactions: a real <input> (aria-labelled, transparent caret) with a blinking block cursor positioned by a hidden mirror span so it tracks the caret. Commands: help, about, clear, history, echo, date, whoami, a playable canvas snake (arrows/WASD, swipe on touch, q quits, walls wrap), a matrix-rain toy dismissed by any key, and two or three witty easter eggs (sudo, cat on a forbidden file). Up/down arrows walk command history. Boot prints BIOS lines and an ASCII nameplate, then focuses the prompt.

Quality bar: semantic HTML with a role="log" aria-live output region; visible focus styles; WCAG-AA contrast for every piece of text; fully keyboard-operable. prefers-reduced-motion disables flicker, cursor blink, and boot typing, and swaps matrix rain for a static frame. requestAnimationFrame only; every loop stops when the tab is hidden or the game ends. No horizontal scroll, no libraries, no build step.