Vinyl UI

Scanlines

CRT scanline overlay.

CH 03

Usage

import { Scanlines } from '@vinyl-ui/effects';

<Scanlines className="bg-cyan p-6">CH 03</Scanlines>
// or: <div class="scanlines">…</div>

A 1px --color-scanline line every 3px, drawn above the content with pointer events disabled. Web uses a repeating linear gradient on ::before. Native uses an SVG pattern. The Dialog overlay uses it on the web.

Film Burn

A warm light leak drifting across a surface, like over-exposed 35mm.

SMPTE Wipe

Geometric broadcast transitions — bars, barn doors, box, iris, diagonal and blinds.

On this page

Usage