{`> LOGIN\nUSER .......... GUEST\nACCESS ........ GRANTED\n\nSELECT A COATING BELOW.\nTHE TEXT IS REAL — TRY SELECTING IT.\n> `}

Change the phosphor — click a coating or focus it and press the arrow keys.

); } ``` ## Accessibility & performance Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. ## Source (`phosphor.tsx`) ```tsx "use client"; import * as React from "react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; /** The three phosphor coatings a monochrome CRT could be built with. */ export type PhosphorColor = "amber" | "green" | "white"; export interface PhosphorProps extends Omit, "color"> { /** Controlled phosphor coating. Pair with `onPhosphorChange`. */ phosphor?: PhosphorColor; /** Initial phosphor when uncontrolled. @default "amber" */ defaultPhosphor?: PhosphorColor; /** Fires with the next coating whenever the switcher changes it. */ onPhosphorChange?: (phosphor: PhosphorColor) => void; /** Render the built-in amber / green / white switcher strip. @default true */ switcher?: boolean; /** Terminal content. Falls back to a boot readout when omitted. */ children?: React.ReactNode; /** Show the blinking block caret after the content. @default true */ caret?: boolean; /** Scanline + vignette strength, 0–1. @default 1 */ intensity?: number; /** Blink / flicker / roll rate multiplier. @default 1 */ speed?: number; /** Freeze all motion — steady glow, solid caret, no flicker. @default false */ paused?: boolean; /** Override the three phosphor text hues (any CSS hex color). */ colors?: Partial>; /** Accessible label for the switcher radiogroup. @default "Phosphor coating" */ switcherLabel?: string; } const ORDER: PhosphorColor[] = ["amber", "green", "white"]; /** Deliberately amber-first — the coating every terminal clone forgets exists. */ const DEFAULT_HUES: Record = { amber: "#ffb000", green: "#38ff7b", white: "#eef2ff", }; const LABELS: Record = { amber: "Amber", green: "Green", white: "White", }; /** Default boot readout — generic terminal copy, no brand names. */ const DEFAULT_CONTENT = `PHOSPHOR TERMINAL v1.0 MEMORY ......... 64K OK DISPLAY ........ ONLINE READY. > `; /** Parse a #rgb/#rrggbb hex into a space-separated "r g b" for modern rgb(). */ function hexToRgbTriplet(hex: string): string { const h = hex.replace("#", ""); const full = h.length === 3 ? h .split("") .map((c) => c + c) .join("") : h; const n = Number.parseInt(full, 16); if (Number.isNaN(n)) return "255 176 0"; return `${(n >> 16) & 255} ${(n >> 8) & 255} ${n & 255}`; } /** * Phosphor — a themed panel styled as a monochrome CRT monitor. A dark, * vignetted screen carries glowing selectable monospace text over fine * scanlines, a slow refresh bar rolls down the glass, and a hard block caret * blinks at the prompt. The built-in switcher recoats the tube between the * three classic phosphors — amber, green, and paper-white — driving one hue * through every layer via a CSS variable. All content is real, selectable * text; the effect layers are `aria-hidden` and never intercept the pointer. * Pure CSS. Reduced motion (or `paused`) holds a steady glow with a solid * caret and no flicker. */ export function Phosphor({ phosphor, defaultPhosphor = "amber", onPhosphorChange, switcher = true, children, caret = true, intensity = 1, speed = 1, paused = false, colors, switcherLabel = "Phosphor coating", className, style, ...rest }: PhosphorProps) { const reducedMotion = useReducedMotion(); const animate = !reducedMotion && !paused; const isControlled = phosphor !== undefined; const [internal, setInternal] = React.useState(defaultPhosphor); const active = isControlled ? phosphor : internal; const hues = { ...DEFAULT_HUES, ...colors }; const hue = hues[active] ?? DEFAULT_HUES[active]; const rgb = hexToRgbTriplet(hue); const i = Math.min(Math.max(intensity, 0), 1); const spd = Math.min(Math.max(speed, 0.1), 4); const radioRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const select = React.useCallback( (next: PhosphorColor) => { if (!isControlled) setInternal(next); onPhosphorChange?.(next); }, [isControlled, onPhosphorChange] ); const handleRadioKey = React.useCallback( (event: React.KeyboardEvent, index: number) => { let next = index; switch (event.key) { case "ArrowRight": case "ArrowDown": next = (index + 1) % ORDER.length; break; case "ArrowLeft": case "ArrowUp": next = (index - 1 + ORDER.length) % ORDER.length; break; case "Home": next = 0; break; case "End": next = ORDER.length - 1; break; default: return; } event.preventDefault(); select(ORDER[next]); radioRefs.current[next]?.focus(); }, [select] ); return (

{/* The screen — a stacking context so the -z effect layers stay behind text. */}

{/* Selectable terminal content. */}

{children ?? DEFAULT_CONTENT} {caret && ( )}

{/* Fine scanlines. */}

{/* Slow refresh bar rolling down the glass. */}

{/* Phosphor bloom flicker. */}

{/* Vignette + curved-glass edge darkening. */}

{/* Switcher — recoat the tube. A real radiogroup with roving focus. */} {switcher && (

{ORDER.map((p, index) => { const on = p === active; const swatch = hues[p] ?? DEFAULT_HUES[p]; return ( ); })}

)}

); } ```