---
title: "Kaleidoscope Shader — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Artem Kireev · Backgrounds. One shader, infinite reflections"
canonical: "https://framer.elliotli.dev/component/kaleidoscope-shader"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Kaleidoscope Shader

# Kaleidoscope Shader

One shader, infinite reflections

[View on Framer](https://framer.com/marketplace/components/kaleidoscope-shader/?via=elliot-li)

![Kaleidoscope Shader preview image 1](https://framer.elliotli.dev/og/component/kaleidoscope-shader/e9af9e641ced5877/1600x1243.jpg)

## Summary

One shader, infinite reflections

## Description

## 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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5313

## Details

- **Author**: Artem Kireev
- **Price**: $6.00
- **Published**: 2026-09-09
- **Updated**: 2026-09-09
- **Added**: 2026-09-09
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background