About this component
Kaleidoscope
A live WebGL kaleidoscope that folds any photo into a crisp mandala of mirrored segments, turning slowly while its view drifts and zooms over the photo so the pattern keeps blooming into new symmetric forms. Seen as a circle with a soft vignette and a thin glass rim that bends color only at its edge, or as a full rectangle of pattern. The cursor turns the tube and zooms the view. Segments, speed, zoom, drift, rim and vignette are all props. Adapts its resolution, pauses offscreen, holds a still pattern for reduced motion and falls back to the plain photo without WebGL.
Usage
The import and the props worth knowing about, in one place.
import { Kaleidoscope } from "@/components/beste/component/kaleidoscope";
<Kaleidoscope
className="aspect-square w-full max-w-xl"
src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=2400&q=80"
alt="Orange poppies against a clear blue sky"
segments={10} // mirrored segments, 6 to 12
zoom={0.7} // look closer into the photo, 0 to 1
drift={0.3} // how far the view wanders, 0 to 1
/>
// As a full rectangle of pattern instead of a round tube
<Kaleidoscope src="/petals.jpg" round={false} rim={false} className="h-[32rem]" />Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Photo folded into the pattern. Loaded with CORS so WebGL can read it. |
alt | string | — | Description of the photo for screen readers. |
segments | number | — | Number of mirrored segments, 6 to 12. |
speed | number | — | Speed of the slow turn and drift, 1 is the default pace. |
zoom | number | — | How close the tube looks into the photo, 0 (wide) to 1 (tight). |
drift | number | — | How far the view wanders over the photo, 0 (still) to 1 (roaming). |
rim | boolean | — | A thin glass rim around the circle. |
vignette | number | — | Darkening toward the edge of the tube, 0 to 1. |
interactive | boolean | — | The cursor turns and zooms the tube. |
paused | boolean | — | Hold the pattern where it is. |
round | boolean | — | Circle (looking into a tube) or a full rectangle of pattern. |
className | string | — | |
children | ReactNode | — |
