KQ-1892 · FRESNEL/SHEET

Fresnel Sheet

A flat plastic Fresnel magnifier lying on a printed chart, drawn in one WebGL2 pass: through its concentric ridges a second picture, the same bay from the air, shows magnified about the sheet's centre and broken into rings, each flat facet a little out of register with its neighbours and fringed with rainbow where red and blue bend differently, while the risers catch the lamp, an anisotropic sheen fans across the rings and a glare band fixed in the room slides over the plastic. The sheet follows a drag 1:1 with its shadow lifting on the flick spring, and on release slides on with the release velocity and stops on friction, meeting the edge with a soft bounce on the snap spring; a tap on the chart glides it there on glide. The arrow keys move it (Shift for larger steps) and Home centres it.

KQ-1892 · FRESNEL/SHEET

Coldbrook Bay

Basinworks Charts · Sheet 4

sheet at 62% across · 50% down · 2.2×

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/fresnel-sheet

Props

src: string; default —; The picture the sheet lies on; for WebGL it must be same-origin or CORS. Defaults to a drawn chart of a bay.
alt: string; default a description of the drawn chart; What that picture shows, for assistive technology.
revealSrc: string; default —; The picture seen through the sheet, magnified about its centre. Defaults to the same bay drawn from the air.
revealAlt: string; default a description of the drawn aerial view; What the picture through the sheet shows.
rings: number; default 16; How many concentric facets the sheet has, 4 (coarse steps) to 40 (fine ridges).
magnify: number; default 2.2; How much the sheet magnifies, 1.2 to 4.
glare: number; default 0.5; How bright the glare band and the ridges' sheen are, 0 (matte) to 1.
dispersion: number; default 0.5; How strong the rainbow fringes are at each facet's edge, 0 to 1.
shape: "card" | "round"; default "card"; A credit-card sheet or a round one.
size: number; default 0.8; The sheet's height as a share of the stage's, 0.4 to 1.
friction: number; default 0.5; How quickly a thrown sheet stops, 0 (a long glide on smooth paper) to 1 (a quick stop).
position / defaultPosition: { x: number; y: number }; default { x: 0.62, y: 0.5 }; The sheet's centre as fractions of the stage; a new controlled value glides it there.
onPositionChange: (position: { x: number; y: number }) => void; default —; Fires from the drag, tap or key that moved the sheet, with where it will come to rest.
label: string; default "Fresnel sheet"; Names the sheet for assistive technology.
disabled: boolean; default false; Shows the sheet but takes no drags, taps or keys.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
className: string; default —; Sizes the stage (default h-56 w-full).

Prop	Type	Default	Description
src	string	—	The picture the sheet lies on; for WebGL it must be same-origin or CORS. Defaults to a drawn chart of a bay.
alt	string	a description of the drawn chart	What that picture shows, for assistive technology.
revealSrc	string	—	The picture seen through the sheet, magnified about its centre. Defaults to the same bay drawn from the air.
revealAlt	string	a description of the drawn aerial view	What the picture through the sheet shows.
rings	number	16	How many concentric facets the sheet has, 4 (coarse steps) to 40 (fine ridges).
magnify	number	2.2	How much the sheet magnifies, 1.2 to 4.
glare	number	0.5	How bright the glare band and the ridges' sheen are, 0 (matte) to 1.
dispersion	number	0.5	How strong the rainbow fringes are at each facet's edge, 0 to 1.
shape	"card" \| "round"	"card"	A credit-card sheet or a round one.
size	number	0.8	The sheet's height as a share of the stage's, 0.4 to 1.
friction	number	0.5	How quickly a thrown sheet stops, 0 (a long glide on smooth paper) to 1 (a quick stop).
position / defaultPosition	{ x: number; y: number }	{ x: 0.62, y: 0.5 }	The sheet's centre as fractions of the stage; a new controlled value glides it there.
onPositionChange	(position: { x: number; y: number }) => void	—	Fires from the drag, tap or key that moved the sheet, with where it will come to rest.
label	string	"Fresnel sheet"	Names the sheet for assistive technology.
disabled	boolean	false	Shows the sheet but takes no drags, taps or keys.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
className	string	—	Sizes the stage (default h-56 w-full).