KQ-1895 · RAKING/LIGHT

Raking Light

An object on a light table, relit per pixel in WebGL2 by a lamp that lies low at its side, so the light skims the surface and every ridge throws a long shadow marched through a height map toward the lamp: the brush ridges of an oil sketch, a plate mark, an embossed fern and a blind-stamp in paper that look blank in flat light, the wedges in a clay tablet, or your own photo. The pointer's direction from the centre is the light's direction and its distance from the rim is its height, so moving in raises the light and flattens the shadows; the direction follows on springs.glide, the height on springs.drift, a click sets the lamp down with the marker landing on springs.recoil, and the first time it is seen the light comes down from overhead and the relief rises out of a flat picture. On the keyboard, Left and Right orbit the lamp and Up and Down raise and lower it.

KQ-1895 · RAKING/LIGHT

Study 14 · oil on canvas

Fieldline Archive · Study 14

raking light · from left · 12° above the surface

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/raking-light

Props

subject: "canvas" | "paper" | "tablet"; default "canvas"; The object on the table, drawn in code: an oil sketch, a sheet of embossed paper or a clay tablet.
src: string; default —; Your own photograph to relight instead (it must be readable across origins). Its height comes from depthSrc, or from its brightness.
depthSrc: string; default —; A depth map for src, white for high, black for low.
alt: string; default —; What the image shows, for assistive technology. Each subject has its own description by default.
inscription: string; default "COLD PRESSED · MADE BY HAND · NO. 14 ·"; The words pressed around the paper's blind-stamp.
elevation: number; default 12; The raking angle: how many degrees above the surface the light skims when it lies at the edge, 2 to 40.
relief: number; default 0.6; How tall the surface's ridges stand, 0 (flat print) to 1 (deep relief).
warmth: number; default 0.55; The light's colour, 0 (cool north daylight) to 1 (warm tungsten); the shadows fill with the other.
softness: number; default 0.35; The lamp's size, 0 (a pin-point with crisp shadows) to 1 (a softbox with soft ones).
gloss: number; default 0.4; How much the surface glints where it faces the light, 0 (matte) to 1.
azimuth / defaultAzimuth: number; default 290; The direction the resting light comes from, degrees clockwise from the top; controlled or uncontrolled.
onAzimuthChange: (azimuth: number) => void; default —; Fires when a click, a tap or the arrow keys set the light down in a new direction, in whole degrees.
onLightChange: (light: { azimuth: number; elevation: number; held: boolean }) => void; default —; Fires as the hand moves the lamp, with the light it is asking for, in whole degrees.
intro: boolean; default true; The light comes down from overhead to its raking angle the first time the object is seen.
showLamp: boolean; default true; Show a small lamp where the light comes from while it is held.
interactive: boolean; default true; The pointer and the keyboard move the lamp.
seed: number; default 1; Seeds the brushstrokes, the paper's fibres and the wedges in the clay.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Lamp"; The accessible name of the lamp control.
className: string; default "h-56 w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
subject	"canvas" \| "paper" \| "tablet"	"canvas"	The object on the table, drawn in code: an oil sketch, a sheet of embossed paper or a clay tablet.
src	string	—	Your own photograph to relight instead (it must be readable across origins). Its height comes from depthSrc, or from its brightness.
depthSrc	string	—	A depth map for src, white for high, black for low.
alt	string	—	What the image shows, for assistive technology. Each subject has its own description by default.
inscription	string	"COLD PRESSED · MADE BY HAND · NO. 14 ·"	The words pressed around the paper's blind-stamp.
elevation	number	12	The raking angle: how many degrees above the surface the light skims when it lies at the edge, 2 to 40.
relief	number	0.6	How tall the surface's ridges stand, 0 (flat print) to 1 (deep relief).
warmth	number	0.55	The light's colour, 0 (cool north daylight) to 1 (warm tungsten); the shadows fill with the other.
softness	number	0.35	The lamp's size, 0 (a pin-point with crisp shadows) to 1 (a softbox with soft ones).
gloss	number	0.4	How much the surface glints where it faces the light, 0 (matte) to 1.
azimuth / defaultAzimuth	number	290	The direction the resting light comes from, degrees clockwise from the top; controlled or uncontrolled.
onAzimuthChange	(azimuth: number) => void	—	Fires when a click, a tap or the arrow keys set the light down in a new direction, in whole degrees.
onLightChange	(light: { azimuth: number; elevation: number; held: boolean }) => void	—	Fires as the hand moves the lamp, with the light it is asking for, in whole degrees.
intro	boolean	true	The light comes down from overhead to its raking angle the first time the object is seen.
showLamp	boolean	true	Show a small lamp where the light comes from while it is held.
interactive	boolean	true	The pointer and the keyboard move the lamp.
seed	number	1	Seeds the brushstrokes, the paper's fibres and the wedges in the clay.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Lamp"	The accessible name of the lamp control.
className	string	"h-56 w-full"	Sizes and shapes the box.