Kaleidoscope Shader

One shader, infinite reflections

Customizations available in Framer Pattern — switch the mirrored source between Gradient Bloom, Noise Field, or an uploaded Image Texture. Texture — the image to mirror, shown only when Pattern is set to Image Texture. Colors — 2 to 5 colors that drive the Gradient and Noise patterns, and the static-export fallback. Background — the color the pattern fades into at its outer edge. Mirror Segments — how many mirrored wedges make up the kaleidoscope (2–24). Zoom — scales the pattern in or out. Distortion — amount of organic noise warp applied on top of the mirrored geometry. Rotation Speed — how fast the mirrored pattern spins (negative values reverse direction). Animation Speed — speed of the internal color/noise motion, independent of rotation. Interaction — what drives the effect beyond ambient motion: Ambient, Cursor, Scroll, or Click Pulse. Interaction Intensity — how strongly the chosen interaction affects rotation, zoom, and distortion. Performance — Auto / High / Balanced / Low render-resolution cap for pages running multiple effects at once. Reduced Motion — automatically holds a still frame for visitors who prefer reduced motion. Freeze Frame — a manual on/off toggle to pause the animation on a single frame. Opacity — blends the whole effect into the page behind it. Corner Radius — rounds the component so it drops into card-shaped layouts.

One shader, infinite reflections