KQ-1618 · AMBIENT/SPILL

Ambient Spill

A carousel of screen-like cards in a dark room where the front card glows and spills its colour onto the wall behind it, the glossy floor in front and the whole room. The position is one continuous motion value: every card's place, turn, dimming and glow, and the room's colour, mixed in oklab between the two cards it lies between, are functions of it, so the light dips and blooms as the next card takes the front. A drag follows 1:1 and rubber-bands at the ends, a flick is projected and settles on the glide spring with the release velocity, and a horizontal trackpad swipe scrolls it; the cards are slides with one tab stop, arrows and Home and End move it, and Enter opens the front card.

KQ-1618 · AMBIENT/SPILL

Waylight · the lounge

Tonight, six programmes

2 of 6 · tidewater · 38 min

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/ambient-spill

Props

items: { src?: string; alt: string; caption?: string; meta?: string; color?: string }[]; default six drawn programmes; The cards, in order; color is the light each throws into the room.
value / defaultValue: number; default 0; The card at the front, by index, controlled or initial.
onValueChange: (index: number) => void; default —; Fires from the drag, wheel, key or press that brought a new card to the front.
spill: number; default 0.7; How much light the front card throws onto the wall and floor, 0 to 1.
roomTone: "night" | "ash" | "plum" | "paper"; default "night"; The room: a blue night, neutral ash, a plum dusk or a pale gallery.
spacing: number; default 1; How far apart the cards stand, in card widths.
reflection: boolean; default true; Show each card's light on the glossy floor.
loop: boolean; default false; Carry on from the last card to the first.
wheel: "horizontal" | "off"; default "horizontal"; What a horizontal wheel or trackpad swipe does; vertical wheels always scroll the page.
onOpen: (index: number) => void; default —; Fires when the front card is pressed, or Enter is pressed on it.
captions: boolean; default true; Show the title and line on each card.
label: string; default "Featured"; The carousel's accessible name.
disabled: boolean; default false; No dragging, wheel, keys or presses.
className: string; default —; Sizes the room; it fills a 544px-tall box by default.

Prop	Type	Default	Description
items	{ src?: string; alt: string; caption?: string; meta?: string; color?: string }[]	six drawn programmes	The cards, in order; color is the light each throws into the room.
value / defaultValue	number	0	The card at the front, by index, controlled or initial.
onValueChange	(index: number) => void	—	Fires from the drag, wheel, key or press that brought a new card to the front.
spill	number	0.7	How much light the front card throws onto the wall and floor, 0 to 1.
roomTone	"night" \| "ash" \| "plum" \| "paper"	"night"	The room: a blue night, neutral ash, a plum dusk or a pale gallery.
spacing	number	1	How far apart the cards stand, in card widths.
reflection	boolean	true	Show each card's light on the glossy floor.
loop	boolean	false	Carry on from the last card to the first.
wheel	"horizontal" \| "off"	"horizontal"	What a horizontal wheel or trackpad swipe does; vertical wheels always scroll the page.
onOpen	(index: number) => void	—	Fires when the front card is pressed, or Enter is pressed on it.
captions	boolean	true	Show the title and line on each card.
label	string	"Featured"	The carousel's accessible name.
disabled	boolean	false	No dragging, wheel, keys or presses.
className	string	—	Sizes the room; it fills a 544px-tall box by default.