Radial mirror segments repeat the input into a kaleidoscope pattern.
Also known as: KaleidoscopeKaleidoscopic mirror
Moves in browsers that support WebGPU
This device could not render the demo — showing a still
Code reflects the control values
React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, Kaleidoscope } from 'shaders/react'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: 320 }} disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<Kaleidoscope />
</Shader>
)
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, ImageTexture, Kaleidoscope } from 'shaders/vue'
</script>
<template>
<Shader style="width: 100%; height: 320px" :disable-telemetry="true">
<ImageTexture
object-fit="cover"
url="/samples/photo.jpg"/>
<Kaleidoscope/>
</Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
import { Shader, ImageTexture, Kaleidoscope } from 'shaders/svelte'
</script>
<Shader style="width: 100%; height: 320px" disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<Kaleidoscope />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, Kaleidoscope } from 'shaders/solid'
export default function ShaderEffect() {
return (
<Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
<ImageTexture
objectFit="cover"
url="/samples/photo.jpg" />
<Kaleidoscope />
</Shader>
)
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'
const shader = await createShader(document.getElementById("canvas"), {
components: [
{
type: 'ImageTexture',
props: {
objectFit: 'cover',
url: '/samples/photo.jpg',
},
},
{
type: 'Kaleidoscope',
}
]
}, { disableTelemetry: true })
Props · Kaleidoscope
Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).
Name
Value
Default
Range / options
Description
centerCenter
xy
{"x":0.5,"y":0.5}
x, y: 0 – 1
The center point of the kaleidoscope effect
segmentsSegments
6
2 – 24 (step 1)
Number of radial segments in the kaleidoscope
angleAngle
0
0 – 360 (step 1)
Rotation offset for the entire kaleidoscope pattern
edgesEdges
mirror
stretch · transparent · mirror · wrap
How to handle edges when distortion pushes content out of bounds
Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id
Like looking at colored paper through angled mirrors, one part of the image repeats into a radial, symmetrical pattern.
Increase `segments` to add more wedges, move `center` to reposition the pattern's axis, and adjust `angle` to rotate the whole design. `edges` controls how samples beyond the canvas are handled.
Place it above an image, color, or other input layer. Pair it with `Mirror` for more layered symmetry. Faces and copy repeat into the pattern, so this works best with abstract source art.
When to use
Use it for abstract backgrounds, music visuals, and decorative transitions. Avoid it when people, products, or copy need to remain immediately recognizable.
