KQ-1839 · INTERLACE/LOAD

Interlace Load

An image that arrives the way old progressive images did: coarse blocks first, then each pass fills the gaps at a finer resolution behind a faint scan line running down the frame, the picture above the line at the new resolution and below it still at the last, with the freshly arrived rows briefly brighter, until the last pass lands the sharp picture with one small lift of light that settles away. The scheme is interlaced rows stretched over the rows still missing, a halving grid of up to seven passes, or a coarse-to-fine averaged scan, and each pass's time follows how much data it carries. It starts when half in view, on mount, from a Load button or from the play prop, and a Load again button fades in on an enter tween once it has landed.

KQ-1839 · INTERLACE/LOAD

Fernworks Journal · field notes

Three days on the North Fork

North Fork · first light

waiting · 7 passes · grid

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/interlace-load

Props

src: string; default —; The picture to load, cover-fitted. Without one, a lake valley at first light is drawn in code.
alt: string; default "A lake valley at first light"; What the picture shows.
scheme: "rows" | "grid" | "scan"; default "grid"; How the passes arrive: interlaced rows, a halving grid (width, then height), or a coarse-to-fine averaged scan.
passes: number; default 7; How many passes, 3 to 7; the first is coarser the more there are, and the last is always the sharp picture.
speed: number; default 1; How fast the data arrives, as a multiple of a 3.2 s load.
trigger: "inView" | "mount" | "button" | "manual"; default "inView"; What starts the load: being half in view, mounting, a Load button over the placeholder, or the play prop alone.
play: boolean; default —; Starts the load when it turns true and clears back to waiting when it turns false; overrides trigger.
delay: number; default 200; A wait before the first pass, in ms.
scanLine: boolean; default true; The faint scan line the data arrives behind, and the brighter fresh rows above it.
replayButton: boolean; default true; A small Load again button once the picture has landed.
onPassChange: (pass: number, total: number) => void; default —; Fires as each pass begins, counting from 1.
onComplete: () => void; default —; Fires when the last pass lands.
caption: React.ReactNode; default —; A caption laid over the lower left of the picture, shown in every phase.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default "h-full w-full"; Sizes the frame; it fills its parent by default.

Prop	Type	Default	Description
src	string	—	The picture to load, cover-fitted. Without one, a lake valley at first light is drawn in code.
alt	string	"A lake valley at first light"	What the picture shows.
scheme	"rows" \| "grid" \| "scan"	"grid"	How the passes arrive: interlaced rows, a halving grid (width, then height), or a coarse-to-fine averaged scan.
passes	number	7	How many passes, 3 to 7; the first is coarser the more there are, and the last is always the sharp picture.
speed	number	1	How fast the data arrives, as a multiple of a 3.2 s load.
trigger	"inView" \| "mount" \| "button" \| "manual"	"inView"	What starts the load: being half in view, mounting, a Load button over the placeholder, or the play prop alone.
play	boolean	—	Starts the load when it turns true and clears back to waiting when it turns false; overrides trigger.
delay	number	200	A wait before the first pass, in ms.
scanLine	boolean	true	The faint scan line the data arrives behind, and the brighter fresh rows above it.
replayButton	boolean	true	A small Load again button once the picture has landed.
onPassChange	(pass: number, total: number) => void	—	Fires as each pass begins, counting from 1.
onComplete	() => void	—	Fires when the last pass lands.
caption	React.ReactNode	—	A caption laid over the lower left of the picture, shown in every phase.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	"h-full w-full"	Sizes the frame; it fills its parent by default.