React Iridescence Background

Powered by

React

WebGL

OGL

Ever wanted to recreate that mesmerizing iridescent shimmer you see on soap bubbles, oil slicks, or holographic surfaces? Those dynamic rainbow patterns that shift and flow with organic beauty, creating depth and dimension through pure mathematics? The way colors blend and dance in impossible gradients that seem to have their own consciousness? Most visual effects rely on static gradients or simple animations, but they lack the sophisticated mathematical complexity that creates truly hypnotic iridescent patterns.

This React component creates that captivating iridescent effect using WebGL shaders with OGL library, featuring dynamic color shifting, mouse-responsive distortion, and mathematical wave algorithms that bring holographic magic to your interface.

Dynamic holographic patterns with mouse interaction

Watch iridescent colors flow and shift with mathematical precision and cursor responsiveness:

import Iridescence from "@/components/ui/shadcn-io/iridescence"export default function IridescenceDemo() {  return (    <div className="relative w-full h-full bg-black rounded-lg overflow-hidden">      <Iridescence         color={[1, 0.8, 0.9]}        speed={1.2}        amplitude={0.15}        mouseReact={true}      />    </div>  )}

// @ts-nocheck'use client';// @ts-ignoreimport { Renderer, Program, Mesh, Color, Triangle } from "ogl";import { useEffect, useRef, forwardRef } from "react";import { cn } from '@/lib/utils';const vertexShader = `attribute vec2 uv;attribute vec2 position;varying vec2 vUv;void main() {  vUv = uv;  gl_Position = vec4(position, 0, 1);}`;const fragmentShader = `precision highp float;uniform float uTime;uniform vec3 uColor;uniform vec3 uResolution;uniform vec2 uMouse;uniform float uAmplitude;uniform float uSpeed;varying vec2 vUv;void main() {  float mr = min(uResolution.x, uResolution.y);  vec2 uv = (vUv.xy * 2.0 - 1.0) * uResolution.xy / mr;  uv += (uMouse - vec2(0.5)) * uAmplitude;  float d = -uTime * 0.5 * uSpeed;  float a = 0.0;  for (float i = 0.0; i < 8.0; ++i) {    a += cos(i - d - a * uv.x);    d += sin(uv.y * i + a);  }  d += uTime * 0.5 * uSpeed;  vec3 col = vec3(cos(uv * vec2(d, a)) * 0.6 + 0.4, cos(a + d) * 0.5 + 0.5);  col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5) * uColor;  gl_FragColor = vec4(col, 1.0);}`;export interface IridescenceProps extends React.HTMLAttributes<HTMLDivElement> {  color?: [number, number, number];  speed?: number;  amplitude?: number;  mouseReact?: boolean;}export const Iridescence = forwardRef<HTMLDivElement, IridescenceProps>(({  className,  color = [1, 1, 1],  speed = 1.0,  amplitude = 0.1,  mouseReact = true,  ...props}, ref) => {  const domProps = { ...props };  delete domProps.color;  delete domProps.speed;  delete domProps.amplitude;  delete domProps.mouseReact;  const ctnDom = useRef<HTMLDivElement>(null);  const mousePos = useRef({ x: 0.5, y: 0.5 });  useEffect(() => {    if (!ctnDom.current) return;    const ctn = ctnDom.current;    const renderer = new Renderer();    const gl = renderer.gl;    gl.clearColor(1, 1, 1, 1);    let program: Program;    function resize() {      const scale = 1;      renderer.setSize(ctn.offsetWidth * scale, ctn.offsetHeight * scale);      if (program) {        program.uniforms.uResolution.value = new Color(          gl.canvas.width,          gl.canvas.height,          gl.canvas.width / gl.canvas.height        );      }    }    window.addEventListener("resize", resize, false);    resize();    const geometry = new Triangle(gl);    program = new Program(gl, {      vertex: vertexShader,      fragment: fragmentShader,      uniforms: {        uTime: { value: 0 },        uColor: { value: new Color(...color) },        uResolution: {          value: new Color(            gl.canvas.width,            gl.canvas.height,            gl.canvas.width / gl.canvas.height          ),        },        uMouse: { value: new Float32Array([mousePos.current.x, mousePos.current.y]) },        uAmplitude: { value: amplitude },        uSpeed: { value: speed },      },    });    const mesh = new Mesh(gl, { geometry, program });    let animateId: number;    function update(t: number) {      animateId = requestAnimationFrame(update);      program.uniforms.uTime.value = t * 0.001;      renderer.render({ scene: mesh });    }    animateId = requestAnimationFrame(update);    ctn.appendChild(gl.canvas);    function handleMouseMove(e: MouseEvent) {      const rect = ctn.getBoundingClientRect();      const x = (e.clientX - rect.left) / rect.width;      const y = 1.0 - (e.clientY - rect.top) / rect.height;      mousePos.current = { x, y };      program.uniforms.uMouse.value[0] = x;      program.uniforms.uMouse.value[1] = y;    }    if (mouseReact) {      ctn.addEventListener("mousemove", handleMouseMove);    }    return () => {      cancelAnimationFrame(animateId);      window.removeEventListener("resize", resize);      if (mouseReact) {        ctn.removeEventListener("mousemove", handleMouseMove);      }      ctn.removeChild(gl.canvas);      gl.getExtension("WEBGL_lose_context")?.loseContext();    };  }, [color, speed, amplitude, mouseReact]);  return (    <div      ref={ref}      className={cn("w-full h-full", className)}      {...domProps}    >      <div ref={ctnDom} className="w-full h-full" />    </div>  );});Iridescence.displayName = 'Iridescence';export default Iridescence;

Built for React applications with TypeScript and optimized WebGL rendering. Uses advanced GLSL shaders with trigonometric functions for authentic iridescent color generation while providing intuitive controls for speed, amplitude, and color tinting. Perfect for premium interfaces, artistic showcases, or any application needing that luxurious holographic aesthetic.

Installation

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

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

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

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

Why static gradients feel artificial

Developers create rainbow gradients with CSS and consider them iridescent. Maybe they add some basic animation or color transitions. The problem? Static gradients can't capture the organic, mathematical nature of true iridescence that emerges from wave interference patterns and optical phenomena.

Shader-based iridescence with WebGL changes everything. It taps into the fundamental physics of light—the way waves interfere and create constructive patterns, how mathematical functions generate organic flow, the hypnotic beauty that emerges from trigonometric chaos. The algorithms use real mathematical wave functions and interference patterns to create authentic optical effects.

This component handles complex shader mathematics automatically. Trigonometric wave generation, color space manipulation, mouse coordinate transformation, and interference pattern calculations all work together seamlessly. The result feels like watching actual light phenomena through your screen.

Features

• WebGL shader rendering with advanced GLSL for real-time iridescent pattern generation
• Mathematical wave algorithms using trigonometric functions for authentic optical effects
• Dynamic color shifting with customizable color tinting and intensity control
• Mouse-responsive distortion with amplitude-based pattern modification
• Interference patterns using iterative wave calculations for organic flow
• Configurable animation speed with precise timing control for different visual rhythms
• Color space optimization with efficient GPU-based color calculations
• Performance optimization with WebGL context management and efficient rendering
• Responsive design with automatic canvas scaling and device pixel ratio handling
• Memory management with proper WebGL context disposal and resource cleanup

API Reference

Iridescence

Color Configurations

Different color tints for various aesthetic themes:

Animation Settings

Different speed and amplitude combinations for various effects:

Shader mathematics

Wave Interference: Uses iterative trigonometric functions with phase shifting to create constructive and destructive interference patterns that mimic natural optical phenomena.

Color Generation: Implements mathematical color space transformations using cosine functions to generate smooth, organic color transitions across the spectrum.

Mouse Integration: Transforms screen coordinates to normalized UV space with amplitude scaling for consistent interaction across different container sizes.

Temporal Animation: Uses time-based phase offsets with configurable speed multipliers to create smooth, continuous animation loops without repetition artifacts.

Performance considerations

WebGL Optimization: Uses efficient GLSL shader compilation with optimized uniform updates and minimal state changes for consistent 60fps performance.

Fragment Shader Efficiency: Implements mathematical optimizations including loop unrolling and function inlining to reduce GPU computation overhead.

Memory Management: Properly handles WebGL context creation, canvas management, and resource disposal to prevent memory leaks and context loss.

Responsive Scaling: Uses device pixel ratio awareness with efficient canvas resizing to maintain crisp visuals across different screen densities.

Common gotchas

WebGL Context: Component requires WebGL-enabled browser. Gracefully handles context creation failures but won't render without WebGL support.

Color Range: Color values should be in 0-1 range (not 0-255). Values outside this range may cause unexpected shader behavior or clamping.

Animation Performance: Continuous shader execution can impact battery life on mobile devices. Consider pausing animation when component is not visible.

Container Sizing: Component fills its container completely. Ensure parent element has defined dimensions for proper iridescent pattern rendering.

Mouse Coordinates: Uses normalized UV coordinates for consistent behavior across different container sizes and device pixel ratios.

Speed Limits: Very high speed values (>5) may cause temporal aliasing or stuttering. Keep speed values reasonable for smooth animation.

You might also like

Questions developers actually ask