KQ-1627 · SHADOW/BOX

Shadow Box

A card built as a real box in CSS 3D: a framed window, inner walls running back to a sky panel, outside walls in the frame's colour, and layers of cut-paper scenery standing at their own depths. One side is open and the light falls in from it, so the walls are shaded by where they face, each layer's cut edge catches the light, and each casts a blurred shadow drawn on the layers behind it, which therefore moves with the surface it falls on as the box turns. The pointer tilts the box toward it on springs.glide and it drifts level on springs.drift when the pointer leaves. Keyboard focus starts a slow tour round the inside, arrow keys tilt it a quarter of the range and Home levels it.

KQ-1627 · SHADOW/BOX

Waylight Paper Co.

Night fern trail

Five hand-cut layers · 56 mm deep

€84

light from the top · tilt to look inside

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/shadow-box

Props

layers: number | readonly ShadowBoxLayer[]; default 5; How many cut-paper layers to generate, 2 to 7, or your own layers back to front: { path (0–100 SVG path), color, depth? }.
depth: number; default 56; How deep the box is, in px: longer shadows, more parallax.
light: "top" | "left" | "right"; default "top"; The open side the light falls in from.
lightStrength: number; default 0.7; How strong that light is, 0 (flat, no shadows) to 1.
palette: "dusk" | "fern" | "snow" | "ember" | readonly string[]; default "dusk"; A named paper set, or five CSS colours: sky top, sky low, moon, far ridge, near ridge.
tilt: number; default 14; The furthest the box tilts toward the pointer, in degrees.
perspective: number; default 900; The viewing distance, in px: smaller is a stronger perspective.
frame: number; default 14; The frame's width, in px.
frameColor: string; default "color-mix(in oklab, var(--foreground) 86%, var(--background))"; The frame's colour, any CSS colour; the outside walls are it, shaded.
glass: boolean; default true; A glass pane in the frame, its reflection sliding against the tilt.
title: string; default "Night fern trail"; The piece's name, printed on the plaque and read first.
caption: string; default "Cut paper, N layers"; A line read after the title.
href: string; default —; Makes the whole box a link.
interactive: boolean; default true; Pointer, touch and keys tilt the box.
tour: boolean; default true; Keyboard focus starts a slow tour round the inside.
seed: number; default 11; Seeds the ridges, trees and stars.
label: string; default —; The accessible name, if it should say more than the title and caption.
disabled: boolean; default false; Shows the box at rest and takes no input.
className: string; default "aspect-[5/4] w-full max-w-xs"; Sizes the box.

Prop	Type	Default	Description
layers	number \| readonly ShadowBoxLayer[]	5	How many cut-paper layers to generate, 2 to 7, or your own layers back to front: { path (0–100 SVG path), color, depth? }.
depth	number	56	How deep the box is, in px: longer shadows, more parallax.
light	"top" \| "left" \| "right"	"top"	The open side the light falls in from.
lightStrength	number	0.7	How strong that light is, 0 (flat, no shadows) to 1.
palette	"dusk" \| "fern" \| "snow" \| "ember" \| readonly string[]	"dusk"	A named paper set, or five CSS colours: sky top, sky low, moon, far ridge, near ridge.
tilt	number	14	The furthest the box tilts toward the pointer, in degrees.
perspective	number	900	The viewing distance, in px: smaller is a stronger perspective.
frame	number	14	The frame's width, in px.
frameColor	string	"color-mix(in oklab, var(--foreground) 86%, var(--background))"	The frame's colour, any CSS colour; the outside walls are it, shaded.
glass	boolean	true	A glass pane in the frame, its reflection sliding against the tilt.
title	string	"Night fern trail"	The piece's name, printed on the plaque and read first.
caption	string	"Cut paper, N layers"	A line read after the title.
href	string	—	Makes the whole box a link.
interactive	boolean	true	Pointer, touch and keys tilt the box.
tour	boolean	true	Keyboard focus starts a slow tour round the inside.
seed	number	11	Seeds the ridges, trees and stars.
label	string	—	The accessible name, if it should say more than the title and caption.
disabled	boolean	false	Shows the box at rest and takes no input.
className	string	"aspect-[5/4] w-full max-w-xs"	Sizes the box.