KQ-1444 · BEACON/PILLAR

Beacon Pillar

A background of one vertical pillar of light standing on a floor and rising past the top of the frame: a near-white core, a coloured body and a faint halo with heat wavering at its edges, a pool of light and a rippled reflection on the floor, and motes drifting up through the column in three depths. The pillar leans toward the pointer, planted at the floor and bending more the higher it climbs, on springs.drift, and a press sends a surge up it through a critically damped drift-spring impulse that brightens the column, hurries the motes and rings out across the floor on the enter easing; keyboard focus on a control inside is the hand there, with a half surge.

KQ-1444 · BEACON/PILLAR

Fernworks Signal

A light to steer by

Offline charts for every harbour

pillar standing · amber light

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/beacon-pillar

Props

children: React.ReactNode; default —; The content beside the light: a hero line, a heading, a call to action.
width: number; default 90; How wide the pillar's body is, px (held under 45 % of the box).
intensity: number; default 1; How bright the pillar burns, 0.2 to 1.5.
color: string; default "var(--warn)"; The light's colour, any CSS colour; it is taken at a fixed light lightness so both themes read it the same.
position: number; default 0.5; Where the pillar stands across the box, 0 (left) to 1 (right).
floor: number; default 0.84; Where the floor line sits, as a fraction of the height.
shimmer: number; default 0.5; How much the edges waver with heat, 0 to 1.
motes: number; default 0.5; How many motes rise through the light, 0 (none) to 1.
haze: number; default 0.5; The soft glow of air around the pillar, 0 to 1.
speed: number; default 1; How fast the motes and the heat rise, 0 (still) to 2.
interactive: boolean; default true; The pointer and keyboard focus bend the pillar, and a press surges it.
pointerStrength: number; default 0.6; How far the pillar leans toward the hand and how hard a press surges it, 0 to 1.
paused: boolean; default false; Hold the motes and the heat still; the pillar still leans.
seed: number; default 1; Seeds the motes and the heat, so two pillars never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) bending the pillar.
onSurge: () => void; default —; Fires when a press sends a surge up the column.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content beside the light: a hero line, a heading, a call to action.
width	number	90	How wide the pillar's body is, px (held under 45 % of the box).
intensity	number	1	How bright the pillar burns, 0.2 to 1.5.
color	string	"var(--warn)"	The light's colour, any CSS colour; it is taken at a fixed light lightness so both themes read it the same.
position	number	0.5	Where the pillar stands across the box, 0 (left) to 1 (right).
floor	number	0.84	Where the floor line sits, as a fraction of the height.
shimmer	number	0.5	How much the edges waver with heat, 0 to 1.
motes	number	0.5	How many motes rise through the light, 0 (none) to 1.
haze	number	0.5	The soft glow of air around the pillar, 0 to 1.
speed	number	1	How fast the motes and the heat rise, 0 (still) to 2.
interactive	boolean	true	The pointer and keyboard focus bend the pillar, and a press surges it.
pointerStrength	number	0.6	How far the pillar leans toward the hand and how hard a press surges it, 0 to 1.
paused	boolean	false	Hold the motes and the heat still; the pillar still leans.
seed	number	1	Seeds the motes and the heat, so two pillars never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) bending the pillar.
onSurge	() => void	—	Fires when a press sends a surge up the column.
className	string	"h-full w-full"	Sizes and shapes the box.