Phosphor Tube

A WebGL cathode-ray tube. Each variant paints its picture into an offscreen 2D canvas, then a fragment shader adds barrel curvature, scanlines, an aperture grille, chromatic fringing, phosphor halation, a rolling bar, flicker, grain and a vignette. By default the tube's light is mapped through the theme tokens, so its phosphor takes on the active palette in both light and dark mode; set palette="original" for the source phosphor colours.

• countdown (default) is a monochrome film leader: a sweeping 8 to 2 countdown, scrolling perforations, registration marks and a running timecode, then a title card set in the theme's heading font.
• terminal types out the Modus studio boot log with a status column and a blinking block cursor.
• fault is a fault report with analogue tracking jitter, a rolling dropout band and a head-switching scramble.
• arcade is a 320x180 pixel-art title screen, sampled with nearest filtering, where a runner jumps crates under a sweeping wordmark.

It pauses off screen. When the user prefers reduced motion it renders one still frame, with the terminal log fully typed.

Installation

CLI

npx @modus-ui/cli add phosphor-tube

Manual

1. Install framer-motion.
2. Copy the code from the component tab.
3. Create a file at components/ui/phosphor-tube.tsx.
4. Paste the code.

Usage

import { PhosphorTube } from "@/components/ui/phosphor-tube";

export default function Example() {
  return (
    <div className="relative h-[420px] w-full overflow-hidden">
      <PhosphorTube variant="terminal" />
    </div>
  );
}

Props