KQ-1208 · FILM/BURN

Film Burn

An image placeholder that is a frame of unexposed film: light gets in through the flickering perforations first, then burns in from every edge on a ragged, breathing front — white-hot, amber, ember ahead — computed on a coarse grid and scaled up smooth, while a light leak drifts across and the picture it uncovers is blown out and warm. When the burn has taken the frame and the picture is ready, the overexposure, leak and grain clear on the enter ease and the perforations leave. Hovering holds the burn where it is, and the frame is a real toggle button, so a press, Space or Enter latches the hold.

KQ-1208 · FILM/BURN

Evening sail, Port Avel2 h · 6 berths

exposing · hover or press to hold the burn

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/film-burn

Props

alt: string; default —; What the picture shows. Always its accessible name: the picture's role="img" label, or the img's own alt for src.
src: string; default —; The picture's address. Without it, children is the picture.
children: ReactNode; default —; The finished picture when there is no src: an inline SVG or an image, sized to fill the box.
ready: boolean; default —; Controlled: the picture may show. Uncontrolled, it is ready once the picture exists (a src has loaded or failed) and the burn has had its run.
progress: number; default —; 0 to 1, while not ready: how far the effect may come, for a determinate load.
onReady: () => void; default —; Fires once per load, when the effect has resolved and the picture is whole.
speed: number; default 1; How fast the light burns in and clears, 0.5 to 2.
leak: "amber" | "rose" | "teal"; default "amber"; The colour of the light leak drifting across the frame.
grain: number; default 0.5; Film grain over the film and the burned picture, 0 (clean) to 1 (coarse, dancing). It clears with the frame.
sound: boolean; default false; Play a soft whoosh when a press holds the burn and a brighter one when it lets it catch again. Hover and the burn itself are silent.
disabled: boolean; default false; The film still burns; it cannot be held.
className: string; default —; Sizes the box; the default is aspect-[21/9] w-full.

Prop	Type	Default	Description
alt	string	—	What the picture shows. Always its accessible name: the picture's role="img" label, or the img's own alt for src.
src	string	—	The picture's address. Without it, children is the picture.
children	ReactNode	—	The finished picture when there is no src: an inline SVG or an image, sized to fill the box.
ready	boolean	—	Controlled: the picture may show. Uncontrolled, it is ready once the picture exists (a src has loaded or failed) and the burn has had its run.
progress	number	—	0 to 1, while not ready: how far the effect may come, for a determinate load.
onReady	() => void	—	Fires once per load, when the effect has resolved and the picture is whole.
speed	number	1	How fast the light burns in and clears, 0.5 to 2.
leak	"amber" \| "rose" \| "teal"	"amber"	The colour of the light leak drifting across the frame.
grain	number	0.5	Film grain over the film and the burned picture, 0 (clean) to 1 (coarse, dancing). It clears with the frame.
sound	boolean	false	Play a soft whoosh when a press holds the burn and a brighter one when it lets it catch again. Hover and the burn itself are silent.
disabled	boolean	false	The film still burns; it cannot be held.
className	string	—	Sizes the box; the default is aspect-[21/9] w-full.