❉Recipe

CRT Scanlines

HyperFrames snippet

A zero-cost CSS scanline + RGB-stripe overlay (dark every other line + faint vertical R/G/B columns) laid over the video in HyperFrames — the CRT look without re-encoding.

0 units use it

What it is

## What it is A pure-CSS overlay `<div>` that fakes a CRT/VHS scan: a repeating horizontal gradient darkens every other 1.5px line, and a second 4px-period vertical gradient adds faint R/G/B phosphor stripes. It composites over the master `<video>` with `pointer-events:none`, so it costs nothing at render and seeks deterministically (no canvas, no JS). ## When to use it - Any retro / PS1 / analog register where you want scanlines but do NOT want to bake them into the video (keeps the source crisp and lets you toggle opacity over time). - Pair with `film-grain` (added grain layer) and `chroma-split` for a full CRT stack. ## Knobs - `background-size: 100% 3px` = scanline pitch (smaller = denser lines). - The `90deg` gradient alphas (0.04 / 0.02 / 0.04) = RGB-stripe intensity. - Wrapper `opacity` = overall strength.

How to use it standalone

HyperFrames snippet

/* Verbatim from the choose-path index.html #vhs .scan rule. Drop the div over the video. */
.scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.30) 50%),
    linear-gradient(90deg, rgba(255,0,0,0.04), rgba(0,255,0,0.02), rgba(0,0,255,0.04));
  background-size: 100% 3px, 4px 100%;
}

Param	Value
scanline_alpha	0.3
scanline_pitch_px	3
rgb_stripe_period_px	4

Live demo

Units that use this recipe

0 units

Every finished unit with CRT Scanlines in its recipe. Open one to see the full ingredient list, or remix straight from a tile.

No units use this block yet — be the first.