KQ-1792 · AGATE/SLICE

Agate Slice

A thin polished slice of banded agate held up to the light, drawn in one WebGL2 pass: an irregular nodule whose bands follow its outline inward as warped, scaled copies — opaque coloured layers, milky chalcedony that glows, fine laminations — round a small druse of quartz that glints as the lamp crosses it. New bands crystallise outward from the core in a slow loop, born soft and glowing, sharpening as they travel and hardening into the rough rind at the edge; the lamp behind the slice follows the pointer on the springs.drift constants, so the clear bands near it brighten and the far ones dim. A drag turns the slice 1:1 and a throw coasts on friction; as a slider of the angle, arrows turn it 15° on springs.glide, Page keys 45°, Home back to 0, and Shift with the arrows moves the lamp.

KQ-1792 · AGATE/SLICE

Fieldline Minerals · Specimen 112

Carnelian agate, 6 mm slice

turned 0° · a new band every 6.4 s

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/agate-slice

Props

palette: "lace" | "carnelian" | "moss" | "botswana"; default "carnelian"; The stone's bands.
colors: string[]; default —; Your own five band colours, CSS, pale to deep; overrides palette.
translucency: number; default 0.6; How much light the clear bands let through, 0 (opaque stone) to 1 (glowing).
pace: number; default 0.35; How fast new bands grow from the core, 0 (one every 9 s) to 1 (one every 1.6 s).
bands: number; default 0.5; How many bands fit across the slice, 0 (broad) to 1 (fine).
rind: number; default 0.4; How thick the rough rind is, 0 to 1.
core: number; default 0.45; How large the quartz core is, 0 to 1.
rindColor: string; default a stone brown from the warn token; The rind, any CSS colour.
angle / defaultAngle: number; default 0; The slice's turn in degrees; controlled or uncontrolled.
onAngleChange: (degrees: number) => void; default —; Fires when a drag, throw or key leaves the slice at a new turn, in whole degrees 0 to 359.
followPointer: boolean; default true; The pointer moves the lamp behind the slice.
paused: boolean; default false; Hold the bands still.
seed: number; default 1; Seeds the nodule's outline and every band.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Agate slice"; The slice's accessible name.
disabled: boolean; default false; No turning.
className: string; default —; Sizes the piece; the slice centres in it as a square.

Prop	Type	Default	Description
palette	"lace" \| "carnelian" \| "moss" \| "botswana"	"carnelian"	The stone's bands.
colors	string[]	—	Your own five band colours, CSS, pale to deep; overrides palette.
translucency	number	0.6	How much light the clear bands let through, 0 (opaque stone) to 1 (glowing).
pace	number	0.35	How fast new bands grow from the core, 0 (one every 9 s) to 1 (one every 1.6 s).
bands	number	0.5	How many bands fit across the slice, 0 (broad) to 1 (fine).
rind	number	0.4	How thick the rough rind is, 0 to 1.
core	number	0.45	How large the quartz core is, 0 to 1.
rindColor	string	a stone brown from the warn token	The rind, any CSS colour.
angle / defaultAngle	number	0	The slice's turn in degrees; controlled or uncontrolled.
onAngleChange	(degrees: number) => void	—	Fires when a drag, throw or key leaves the slice at a new turn, in whole degrees 0 to 359.
followPointer	boolean	true	The pointer moves the lamp behind the slice.
paused	boolean	false	Hold the bands still.
seed	number	1	Seeds the nodule's outline and every band.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Agate slice"	The slice's accessible name.
disabled	boolean	false	No turning.
className	string	—	Sizes the piece; the slice centres in it as a square.