KQ-1808 · BULLSEYE/PANES

Bullseye Panes

A view seen through a leaded window of bullseye glass, drawn per pixel in one WebGL2 pass: roundels in hexagonal rows, each spun crown glass that is thick at its centre with a pontil knob that turns its piece of the view over, swirled so the picture twists toward the middle, magnified there, rippled by spiral ridges and fringed with colour, between flatter quarries and rounded lead cames that each carry one thin highlight. The view drifts slowly behind the glass (a garden painted in code that wraps, or your own image or video), and the pointer shifts the viewpoint on springs.glide so the thick centres move most and every swirl turns with the hand; it returns, and the first sighting swings in, on springs.drift. The keyboard's way in is a button behind the content: arrow keys shift the viewpoint, Enter, Space or Escape bring it back to centre.

KQ-1808 · BULLSEYE/PANES

Waylight · crown glass

Spun by hand, leaded by eye.

8 across · swirl 0.60 · move to turn the glass

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/bullseye-panes

Props

roundels: number; default 8; How many roundels sit across the window, 4 to 14; none is ever narrower than 36 px.
swirl: number; default 0.6; How hard each disc is swirled, 0 (plain lenses) to 1 (the view twists half a turn toward the middle).
lead: number; default 3; The lead cames' width, in px, 1 to 8.
src: string; default —; The view behind the glass: an image or video URL. A cross-origin file must allow CORS. Defaults to a garden painted in code.
kind: "image" | "video"; default —; Whether `src` is an image or a video. Defaults to a guess from the file's extension.
alt: string; default "A garden seen through bullseye glass"; Describes the view for assistive technology.
magnify: number; default 0.5; How much the thick centres magnify, 0 to 1.
tint: string; default "oklch(0.93 0.035 150)"; The glass's own colour, any CSS colour; old crown glass is a pale green.
leadColor: string; default "oklch(0.33 0.012 250)"; The cames' colour, any CSS colour.
drift: number; default 0.3; How fast the view drifts behind the glass, 0 (still) to 1.
parallax: number; default 0.6; How far the pointer shifts the viewpoint, 0 to 1.
children: React.ReactNode; default —; Content above the window: a hero line, a heading, a call to action.
intro: boolean; default true; The first time the window is seen, the viewpoint swings in from the side and every swirl turns into place.
interactive: boolean; default true; The pointer and keys shift the viewpoint.
paused: boolean; default false; Hold the view where it is; the viewpoint still answers.
label: string; default "Bullseye window"; Names the window for assistive technology.
seed: number; default 6; Seeds the garden and each disc's swirl, so two windows never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; Shows the window but takes no input.
className: string; default "h-56 w-full"; Sizes the box.

Prop	Type	Default	Description
roundels	number	8	How many roundels sit across the window, 4 to 14; none is ever narrower than 36 px.
swirl	number	0.6	How hard each disc is swirled, 0 (plain lenses) to 1 (the view twists half a turn toward the middle).
lead	number	3	The lead cames' width, in px, 1 to 8.
src	string	—	The view behind the glass: an image or video URL. A cross-origin file must allow CORS. Defaults to a garden painted in code.
kind	"image" \| "video"	—	Whether `src` is an image or a video. Defaults to a guess from the file's extension.
alt	string	"A garden seen through bullseye glass"	Describes the view for assistive technology.
magnify	number	0.5	How much the thick centres magnify, 0 to 1.
tint	string	"oklch(0.93 0.035 150)"	The glass's own colour, any CSS colour; old crown glass is a pale green.
leadColor	string	"oklch(0.33 0.012 250)"	The cames' colour, any CSS colour.
drift	number	0.3	How fast the view drifts behind the glass, 0 (still) to 1.
parallax	number	0.6	How far the pointer shifts the viewpoint, 0 to 1.
children	React.ReactNode	—	Content above the window: a hero line, a heading, a call to action.
intro	boolean	true	The first time the window is seen, the viewpoint swings in from the side and every swirl turns into place.
interactive	boolean	true	The pointer and keys shift the viewpoint.
paused	boolean	false	Hold the view where it is; the viewpoint still answers.
label	string	"Bullseye window"	Names the window for assistive technology.
seed	number	6	Seeds the garden and each disc's swirl, so two windows never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	Shows the window but takes no input.
className	string	"h-56 w-full"	Sizes the box.