Film Burn

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

Summer '86

Usage

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

<FilmBurn className="rounded-md bg-ultraviolet p-6">Summer '86</FilmBurn>

Or the utility: <div class="film-burn">…</div>. It uses ::after, so it combines with scanlines (::before).

Props

Prop

Type

How it works

Web: two radial gradients in --color-burn on a ::after layer with mix-blend-mode: screen, drifting over --film-burn-duration (6s). The container gets overflow: hidden and isolation: isolate.
Native: an react-native-svg radial-gradient overlay with mixBlendMode: 'screen' (New Architecture), animated by Reanimated.

Works best on mid-to-dark surfaces. On cream backgrounds the screen blend is barely visible.

RGB Split

Chromatic aberration — offset red and blue channels, with optional glitch bursts.

Scanlines

CRT scanline overlay.

On this page

Usage Props How it works