Source:CSS

DPI-Locked Scanlines

Locks the scanline period to integer device pixels using CSS round() and the --dpr CSS variable, preventing subpixel shimmer and moiré artifacts at fractional display scales.

crt-screen-dpi.css.ts

1const devicePixelRatio = 'var(--dpr, 1)';
2const snapToDevicePixels = (cssPixels: string) => [
3  `calc(round(${cssPixels} * ${devicePixelRatio}, 1)`,
4  `* 1px / ${devicePixelRatio})`,
5].join(' ');
6
7const scanLinePeriod = snapToDevicePixels('4');
8
9const scanLineOverlayStyles = {
10  position: 'fixed',
11  background: `repeating-linear-gradient(0deg, black, white ${scanLinePeriod})`,
12  mixBlendMode: 'overlay',
13} as const;