CRT Overlay

Scanlines, vignette, flicker and a power-on animation over anything.

High scores

1stAOK048 220
2ndMRA041 905
3rdJNO039 410
4thTKS031 775
5thELI027 060

Insert coin

Credit 0

NK-14 colour monitor

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/crt-overlay.json

Usage

import { CrtOverlay } from "@/components/ui/crt-overlay"

<CrtOverlay curvature className="aspect-[4/3]">
  <p>Insert coin</p>
</CrtOverlay>

Examples

Monochrome phosphor

phosphor tints everything in one color, like an amber or green terminal.

Effects

Each effect can be switched off on its own.

The overlays ignore the pointer, so forms and buttons on the screen still work.

API reference

Also accepts div attributes, and the ref points at the screen. className and style go to the screen; give it a size or aspect ratio when the content doesn't set one.

Prop	Type	Default
`on`	`boolean` Power. Off collapses the picture to a line and a dot; on reverses it.	`true`
`animateOnMount`	`boolean` Play the power-on animation when the screen first mounts lit.	`false`
`onPowerComplete`	`(on: boolean) => void` Called when a power-on or power-off animation finishes.	None
`scanlines`	`boolean` Horizontal scanlines and a faint aperture grille.	`true`
`flicker`	`boolean` A slow refresh bar and the odd faint brightness dip.	`true`
`chromatic`	`boolean` Red and blue fringes on text, like a slightly misconverged tube.	`true`
`glow`	`boolean` Text blooms in the phosphor color.	`true`
`curvature`	`boolean` Rounded, bulging glass with darker edges and a curved reflection.	`false`
`phosphor`	`boolean` Tints the whole picture in the phosphor color.	`false`
`color`	`NeonColor` Phosphor color for the glow, the tint and the light the screen throws.	inherited

Accessibility

Scanlines, glass and glow are aria-hidden and ignore the pointer; the content stays readable and interactive.
While off, the content is inert and hidden from assistive tech, and it comes back when the screen powers on.
Flicker is a slow refresh bar plus a few faint dips in brightness every few seconds, never a strobe.
With reduced motion there's no flicker or refresh bar, and power on and off become a short fade.
Chromatic fringes and glow are text-shadows that the content inherits; text that sets its own text-shadow keeps it.