KQ-1626 · SHOP/LIGHT

Shop Light

A room in the dark with a fluorescent batten hanging over your content. On reveal the tube starts the way a cold tube does: its cathodes glow orange at both ends, it tries to strike in uneven, seeded flashes with dim swims between them, and it catches dimmer and cooler than it will be, settling to full on springs.drift while its colour warms to the chosen temperature and the content rises a nudge into the lit pool on springs.glide. The light is composited rather than tinted, so the wall and the content are multiplied by it and the pool dies into the dark below. The pull cord is a real switch that follows a downward drag 1:1 and springs back on springs.recoil with the drag's velocity; Space or Enter pulls it, and keyboard focus entering the content in the dark switches the light on.

KQ-1626 · SHOP/LIGHT

Fieldline Workshop · after hours

Fieldline Workshop

Bench plane No. 4

€148

tube cold · pull the cord

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

Props

children: React.ReactNode; default —; The content on the wall under the light; it stays available to assistive technology in the dark.
lit / defaultLit: boolean; default false; Whether the tube is switched on, controlled or initial.
onLitChange: (lit: boolean) => void; default —; Fires from the cord, the key, the reveal or the focus that switched it, with the new state.
trigger: "inView" | "mount" | "manual"; default "inView"; What switches the tube on by itself: coming into view, mounting, or nothing but the cord.
once: boolean; default true; Light once and stay lit; false puts it out when it leaves the view and strikes it again on return.
delay: number; default 250; Pause before an automatic strike, in ms.
flicker: number; default 0.6; How hard the cold tube fights before it catches, 0 (strikes clean) to 1 (a long preheat and five or six failed strikes).
warmth: number; default 0.55; The settled light's colour, 0 (6500 K daylight) to 1 (2700 K warm white).
falloff: number; default 0.5; How quickly the light dies below the tube, 0 (a wash to the floor) to 1 (a tight pool under it).
tubeLength: number; default 0.6; The tube's length as a share of the width, 0.3 to 0.9.
hang: number; default 22; How far below the top edge the fixture hangs, in px.
ambient: number; default 0.08; How much of the room shows with the tube out, 0 (pitch dark) to 0.5.
surface: "pegboard" | "plaster" | "slats"; default "pegboard"; The wall the content hangs on.
cord: boolean; default true; Show the pull cord, the visitor's switch.
seed: number; default 7; Seeds the stutter: the same seed fails the same way.
label: string; default "Shop light"; The switch's accessible name.
onSettle: () => void; default —; Fires when a strike has settled to a steady light.
sound: boolean; default false; Plays the cord's click and the tube's buzz on each flash, only for the visitor's own pull, key or focus.
disabled: boolean; default false; Shows the room but takes no input.
className: string; default "h-60 w-full"; Sizes the room.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on the wall under the light; it stays available to assistive technology in the dark.
lit / defaultLit	boolean	false	Whether the tube is switched on, controlled or initial.
onLitChange	(lit: boolean) => void	—	Fires from the cord, the key, the reveal or the focus that switched it, with the new state.
trigger	"inView" \| "mount" \| "manual"	"inView"	What switches the tube on by itself: coming into view, mounting, or nothing but the cord.
once	boolean	true	Light once and stay lit; false puts it out when it leaves the view and strikes it again on return.
delay	number	250	Pause before an automatic strike, in ms.
flicker	number	0.6	How hard the cold tube fights before it catches, 0 (strikes clean) to 1 (a long preheat and five or six failed strikes).
warmth	number	0.55	The settled light's colour, 0 (6500 K daylight) to 1 (2700 K warm white).
falloff	number	0.5	How quickly the light dies below the tube, 0 (a wash to the floor) to 1 (a tight pool under it).
tubeLength	number	0.6	The tube's length as a share of the width, 0.3 to 0.9.
hang	number	22	How far below the top edge the fixture hangs, in px.
ambient	number	0.08	How much of the room shows with the tube out, 0 (pitch dark) to 0.5.
surface	"pegboard" \| "plaster" \| "slats"	"pegboard"	The wall the content hangs on.
cord	boolean	true	Show the pull cord, the visitor's switch.
seed	number	7	Seeds the stutter: the same seed fails the same way.
label	string	"Shop light"	The switch's accessible name.
onSettle	() => void	—	Fires when a strike has settled to a steady light.
sound	boolean	false	Plays the cord's click and the tube's buzz on each flash, only for the visitor's own pull, key or focus.
disabled	boolean	false	Shows the room but takes no input.
className	string	"h-60 w-full"	Sizes the room.