KQ-1205 · KALEIDO/RESOLVE

Kaleido Resolve

A picture that loads as a kaleidoscope of its own wedges: one slice is turned into the even pieces and reflected into the odd, so every seam meets, and it keeps turning behind the mirrors while the picture loads. When the picture is ready the pieces open one by one clockwise on the snap spring — even pieces turn back upright, odd ones flip over on their hinges — until the plain picture remains. Circling the pointer turns it 1:1 and a throw carries on along the drift spring; it is a slider, so arrow keys turn it a step, Page keys a whole piece and Home turns it back.

KQ-1205 · KALEIDO/RESOLVE

Fernworks Garden Journal · 14 June

turning · 8 pieces

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/kaleido-resolve

Props

alt: string; default —; What the picture shows. On the picture from the first frame, loading or not.
src: string; default —; An image to load. Without it, children is the picture.
children: React.ReactNode; default —; The finished picture when there is no src: an illustration, a figure.
ready: boolean; default —; Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children after 1.6 s of on-screen turning.
progress: number; default —; How far the load has got, 0 to 1: that share of the pieces turns into place. The last piece waits for ready.
onReady: () => void; default —; Fires once per load, when the last piece has landed.
speed: number; default 1; The pace of the turning and of the pieces opening, 0.5 to 2.
wedges: number; default 8; How many mirrored pieces the kaleidoscope is cut into: 6, 8, 10 or 12 (rounded to an even count).
spin: number; default 0.4; How briskly it turns while it waits, 0 (a still mandala) to 1.
sound: boolean; default false; A shimmer each time a hand turns the pattern past another piece. The automatic spin and the resolve are silent.
disabled: boolean; default false; It still resolves; it cannot be turned.
className: string; default —; Sizes the box. Defaults to w-full aspect-[3/2]; the box is a size container, so give it a definite size.

Prop	Type	Default	Description
alt	string	—	What the picture shows. On the picture from the first frame, loading or not.
src	string	—	An image to load. Without it, children is the picture.
children	React.ReactNode	—	The finished picture when there is no src: an illustration, a figure.
ready	boolean	—	Controlled readiness. Uncontrolled, an image is ready once it has loaded (or failed), and children after 1.6 s of on-screen turning.
progress	number	—	How far the load has got, 0 to 1: that share of the pieces turns into place. The last piece waits for ready.
onReady	() => void	—	Fires once per load, when the last piece has landed.
speed	number	1	The pace of the turning and of the pieces opening, 0.5 to 2.
wedges	number	8	How many mirrored pieces the kaleidoscope is cut into: 6, 8, 10 or 12 (rounded to an even count).
spin	number	0.4	How briskly it turns while it waits, 0 (a still mandala) to 1.
sound	boolean	false	A shimmer each time a hand turns the pattern past another piece. The automatic spin and the resolve are silent.
disabled	boolean	false	It still resolves; it cannot be turned.
className	string	—	Sizes the box. Defaults to w-full aspect-[3/2]; the box is a size container, so give it a definite size.