React Kaleidoscope Shaders

Powered by

React

react-shaders

WebGL

Need animated backgrounds that don't tank performance? Most developers struggle with CSS animations that look flat or JavaScript libraries that kill frame rates. This React kaleidoscope component uses WebGL fragment shaders for GPU-accelerated animations.

Copy-paste TypeScript component that creates mathematical kaleidoscope patterns with rotating layers, wave synthesis, and dynamic colors. Built for Next.js applications with shadcn/ui design system. Zero dependencies beyond react-shaders—you own the code.

React kaleidoscope with WebGL shaders

GPU-accelerated patterns with mathematical precision and smooth 60fps animations:

import Kaleidoscope from "@/components/ui/shadcn-io/kaleidoscope"export default function KaleidoscopeDemo() {  return (    <div className="relative w-full h-full bg-black rounded-lg overflow-hidden">      <Kaleidoscope        speed={1.0}        glowIntensity={1.5}        colorTint={[1.0, 2.0, 9.0]}      />    </div>  )}

'use client';import React, { forwardRef } from 'react';import { Shader } from 'react-shaders';import { cn } from '@/lib/utils';export interface KaleidoscopeProps extends React.HTMLAttributes<HTMLDivElement> {  /**   * Animation speed multiplier   * @default 1.0   */  speed?: number;  /**   * Glow intensity   * @default 1.0   */  glowIntensity?: number;  /**   * Color tint for the kaleidoscope patterns   * @default [1.0, 2.0, 9.0]   */  colorTint?: [number, number, number];}const kaleidoscopeShader = `void mainImage( out vec4 fragColor, in vec2 fragCoord ){    // Normalized pixel coordinates centered around origin    vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.y;    // Distance from center for radial effects    float dist = length(uv);    // Create multiple rotating layers for depth    float time = iTime * u_speed;    float angle1 = time * 0.3;    float angle2 = time * -0.2;    float angle3 = time * 0.15;    // Rotation matrices    mat2 rot1 = mat2(cos(angle1), -sin(angle1), sin(angle1), cos(angle1));    mat2 rot2 = mat2(cos(angle2), -sin(angle2), sin(angle2), cos(angle2));    mat2 rot3 = mat2(cos(angle3), -sin(angle3), sin(angle3), cos(angle3));    // Create multiple rotating coordinate systems    vec2 uv1 = rot1 * uv;    vec2 uv2 = rot2 * uv;    vec2 uv3 = rot3 * uv;    // Create complex wave patterns    float wave1 = sin(uv1.x * 8.0 + time) * cos(uv1.y * 6.0 + time * 1.3);    float wave2 = sin(uv2.x * 12.0 - time * 0.8) * cos(uv2.y * 9.0 - time * 0.6);    float wave3 = sin(uv3.x * 5.0 + time * 1.5) * cos(uv3.y * 7.0 + time * 0.9);    // Combine waves with different frequencies    float combined = (wave1 + wave2 * 0.7 + wave3 * 0.5) / 2.2;    // Create radial gradient with pulsing    float pulse = sin(time * 2.0) * 0.1 + 0.9;    float radial = 1.0 - smoothstep(0.0, 1.5 * pulse, dist);    // Create spiral pattern    float spiral = sin(atan(uv.y, uv.x) * 6.0 + dist * 15.0 - time * 3.0);    // Combine all patterns    float pattern = combined * radial + spiral * 0.3;    pattern = smoothstep(-0.3, 0.8, pattern);    // Create dynamic color based on position and time    vec3 color1 = u_colorTint * 0.1;    vec3 color2 = u_colorTint * 0.3;    vec3 color3 = vec3(u_colorTint.z, u_colorTint.x, u_colorTint.y) * 0.2;    // Mix colors based on pattern and position    vec3 finalColor = mix(color1, color2, pattern);    finalColor = mix(finalColor, color3, sin(dist * 5.0 - time) * 0.5 + 0.5);    // Add glow effect    float glow = exp(-dist * 2.0) * u_glowIntensity;    finalColor += glow * u_colorTint * 0.5;    // Add subtle vignette    float vignette = smoothstep(1.8, 0.8, dist);    finalColor *= vignette;    // Final output with alpha    fragColor = vec4(finalColor, 1.0);}`;export const Kaleidoscope = forwardRef<HTMLDivElement, KaleidoscopeProps>(({  className,  speed = 1.0,  glowIntensity = 1.0,  colorTint = [1.0, 2.0, 9.0],  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={kaleidoscopeShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_glowIntensity: { type: '1f', value: glowIntensity },          u_colorTint: { type: '3fv', value: colorTint },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});Kaleidoscope.displayName = 'Kaleidoscope';export default Kaleidoscope;

Original shader by Dov Azencot

Perfect for React 19, Next.js 15, and modern TypeScript projects. Mathematical kaleidoscope patterns rendered entirely on GPU using GLSL fragment shaders. Customizable speed, colors, and intensity. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/kaleidoscope.json

npx shadcn@latest add https://www.shadcn.io/registry/kaleidoscope.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/kaleidoscope.json

bunx shadcn@latest add https://www.shadcn.io/registry/kaleidoscope.json

Usage

import { Kaleidoscope } from "@/components/ui/kaleidoscope";

export default function Hero() {
  return (
    <Kaleidoscope>
      <div className="relative z-10">
        <h1>Your content here</h1>
      </div>
    </Kaleidoscope>
  );
}

Why JavaScript animations struggle with performance

JavaScript-based animations hit performance walls fast. CSS keyframes look flat. Animation libraries bundle heavy dependencies. Result? Choppy frame rates, high CPU usage, poor mobile experience.

WebGL fragment shaders solve this. GPU parallel processing handles millions of calculations per frame. Mathematical precision creates perfect patterns. Hardware acceleration maintains 60fps even on mobile.

This React kaleidoscope uses GLSL fragment shaders through react-shaders. Zero CPU animation loops. All pattern calculations happen on graphics card using rotating coordinate systems, wave functions, and color mixing algorithms.

React kaleidoscope shader features

• WebGL GPU rendering - Hardware acceleration for 60fps animations on any device
• Fragment shader patterns - Mathematical precision with GLSL programming
• Three rotating layers - Multiple coordinate systems create complex depth effects
• Wave synthesis algorithms - Sine and cosine combinations generate organic motion
• Dynamic color mixing - Real-time RGB blending based on position and time
• Radial gradient effects - Pulsing center-to-edge animations with smooth falloff
• Spiral mathematics - Logarithmic spirals integrated with wave functions
• TypeScript React component - Full IDE support with prop definitions
• Next.js compatible - Works with App Router and modern React patterns
• shadcn/ui integration - Consistent with Tailwind CSS design systems
• Copy-paste installation - No vendor lock-in, you own the shader code
• Mobile optimized - Efficient GPU usage for smooth mobile performance

API Reference

Kaleidoscope

Main container component for the dynamic kaleidoscope shader effect.

WebGL shader troubleshooting

Dark kaleidoscope patterns: Increase glowIntensity to 1.5+ for brighter effects. Fragment shaders use different brightness scales than CSS.

Animation speed issues: Multiple rotating layers can feel overwhelming. Reduce speed to 0.5 for meditative effects, or increase to 2.0+ for energetic patterns.

Mobile performance drops: GPU-intensive shaders need optimization. Lower glowIntensity to 0.8 on mobile devices. Consider device detection for automatic adjustments.

Wrong colors in patterns: colorTint uses 0-10 range for shader math, not standard 0-1 RGB. Try [3.0, 1.0, 2.0] for red-dominant patterns.

Black screen on old devices: WebGL 1.0 compatibility issues. Check WebGLRenderingContext support and provide CSS gradient fallbacks for older browsers.

TypeScript errors: Ensure react-shaders types are installed. Component props use strict TypeScript definitions for better developer experience.

More React shader components

Explore other GPU-accelerated shader components for Next.js applications:

React kaleidoscope shader FAQ