# Kaleidoscope

Aperveil / Light, shaped for the web.

A mirrored kaleidoscope background for React with adjustable segments and twist. Explore color looks and export the animated WebGPU effect.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

Kaleidoscope folds a procedural field into mirrored angular segments. Segment count changes the symmetry while zoom, bands, twist and spin shape the movement.

## Choose it for

Create a visual opening for a creative festival. Keep the main message short and positioned away from the busiest central intersections.

## Limits

The effect does not sample a camera feed or uploaded image. It generates its own pattern and does not output editable vector geometry.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/kaleidoscope/edit?look=default)

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

```sh
npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz
```

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

```tsx
"use client";

import Kaleidoscope from "./Kaleidoscope";

export default function Hero() {
  return (
    <Kaleidoscope
      className="hero-shader"
      segments={12} background="#07060fff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `background`, `colorA`, `colorB`, `colorC`, `segments`, `zoom`, `bands`, `sharpness`, `twist`, `vignette`, `flowSpeed`, `spin`, `opacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Background (`background`, color): Colour at the very centre of the kaleidoscope.
- Colour 1 (`colorA`, color): First colour of the pattern.
- Colour 2 (`colorB`, color): Second colour of the pattern.
- Highlight (`colorC`, color): Colour of the bright lines where the pattern crosses itself.
- Segments (`segments`, slider): Number of mirrored wedges around the centre.
- Zoom (`zoom`, slider): How much of the pattern fits in each wedge; higher values make it finer.
- Band count (`bands`, slider): Number of interference bands in the pattern.
- Sharpness (`sharpness`, slider): How crisp the edges between the two colours are.
- Twist (`twist`, slider): How strongly the pattern spirals outward from the centre.
- Vignette (`vignette`, slider): How much the edges of the frame darken.
- Rotation speed (`flowSpeed`, slider): How fast the pattern turns and shifts; 0 holds it still.
- Cursor spin (`spin`, slider): Turns the whole figure. A kaleidoscope that slides around the frame stops reading as one.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

## Compatibility

WebGPU rendering requires a supported browser and secure context. The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. Text exports also retain readable HTML typography.

## Performance

0.586 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-02. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Can I change the number of mirrored sections?

Yes. Segments controls the repeated angular structure. Zoom and Band count affect detail within each section. Rotation speed sets the ongoing motion; Cursor spin controls the pointer response.

### Does changing the Color Look change the symmetry?

No. Color Looks replace only the palette. Segments, Zoom, Band count, Twist, Rotation speed and Cursor spin keep their values. Open the editor to change the pattern itself, then export that configuration.

### What should I not use Kaleidoscope for?

The effect does not sample a camera feed or uploaded image. It generates its own pattern and does not output editable vector geometry.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## License

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Spiral](https://www.aperveil.com/shaders/spiral)
- [Plasma Field](https://www.aperveil.com/shaders/plasma-field)
- [Chromatic Drift](https://www.aperveil.com/shaders/chromatic-drift)