KQ-1595 · LANTERN/RISE

Lantern Rise

A night sky with paper lanterns rising through it and your content above: each is lit from inside, a warm glow through its paper and a halo added to the sky, and climbs from below the frame swaying on its own breeze and leaning into the sway, receding as it rises until it is a pinpoint of light. A click on the sky releases one from that spot — the flame catches, the paper fills out on the snap spring, and it dips and lifts off — and wishes, when given, are written on the paper, legible while a lantern is near. The sky is focusable and Enter releases a lantern; clicks on your own links and buttons never do.

KQ-1595 · LANTERN/RISE

Waylight · Night market

Lantern night

Saturday at the river steps

18 aloft · click the sky to release one

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/lantern-rise

Props

children: React.ReactNode; default —; Content above the sky; it stays fully interactive.
wishes: readonly string[]; default —; Short wishes written on the paper, readable while a lantern is near; released lanterns carry the next in turn.
count: number; default 18; How many lanterns are aloft at once, 0 to 60.
drift: number; default 0.45; The breeze: still air (they rise straight) to a breezy sky (they lean, sail and sway wide).
warmth: number; default 0.5; The colour of the light, pale gold (0) to deep amber (1).
speed: number; default 1; How fast they climb, 0.25 to 2.
size: number; default 64; A near lantern's height in px, scaled down on small skies.
stars: number; default 0.5; How many stars, 0 to 1.
skyColor: string; default the accent mixed toward black; The sky, any CSS colour; the top is deepened and the horizon warmed from it.
interactive: boolean; default true; A click on the sky or Enter releases a lantern.
onRelease: (wish: string | null) => void; default —; Fires when a lantern is released, with the wish it carries.
paused: boolean; default false; Hold every lantern where it is.
seed: number; default 3; Seeds where the lanterns rise and how each one sways.
label: string; default "Lantern sky"; Names the sky for assistive technology.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default "h-56 w-full"; Sizes the sky; give it a height.

Prop	Type	Default	Description
children	React.ReactNode	—	Content above the sky; it stays fully interactive.
wishes	readonly string[]	—	Short wishes written on the paper, readable while a lantern is near; released lanterns carry the next in turn.
count	number	18	How many lanterns are aloft at once, 0 to 60.
drift	number	0.45	The breeze: still air (they rise straight) to a breezy sky (they lean, sail and sway wide).
warmth	number	0.5	The colour of the light, pale gold (0) to deep amber (1).
speed	number	1	How fast they climb, 0.25 to 2.
size	number	64	A near lantern's height in px, scaled down on small skies.
stars	number	0.5	How many stars, 0 to 1.
skyColor	string	the accent mixed toward black	The sky, any CSS colour; the top is deepened and the horizon warmed from it.
interactive	boolean	true	A click on the sky or Enter releases a lantern.
onRelease	(wish: string \| null) => void	—	Fires when a lantern is released, with the wish it carries.
paused	boolean	false	Hold every lantern where it is.
seed	number	3	Seeds where the lanterns rise and how each one sways.
label	string	"Lantern sky"	Names the sky for assistive technology.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	"h-56 w-full"	Sizes the sky; give it a height.