React 3D Prism Background

React 3D prism background with WebGL rendering. Features multiple animation modes, GLSL shaders, and interactive hover effects using OGL.

React

OGL

Building immersive 3D backgrounds?

Join our Discord community for help from other developers working with WebGL.

Remember those mesmerizing screensavers that made you stop scrolling and just watch? The ones where geometric shapes danced through 3D space, casting prismatic light effects that seemed almost alive? Most websites settle for flat gradients or static patterns that feel lifeless. This React component brings that captivating 3D magic to your interface with floating geometric prisms that rotate through space, creating depth and visual intrigue that keeps users engaged.

Floating prisms with WebGL rendering

Watch crystalline structures float and rotate in 3D space with realistic lighting:

Loading component...

'use client';import React, { useEffect, useRef, forwardRef } from "react";// @ts-ignoreimport { Renderer, Triangle, Program, Mesh } from "ogl";import { cn } from '@/lib/utils';export interface PrismBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {  height?: number;  baseWidth?: number;  animationType?: "rotate" | "hover" | "3drotate";  glow?: number;  offset?: { x?: number; y?: number };  noise?: number;  transparent?: boolean;  scale?: number;  hueShift?: number;  colorFrequency?: number;  hoverStrength?: number;  inertia?: number;  bloom?: number;  suspendWhenOffscreen?: boolean;  timeScale?: number;}export const PrismBackground = forwardRef<HTMLDivElement, PrismBackgroundProps>(({  className,  height = 3.5,  baseWidth = 5.5,  animationType = "rotate",  glow = 1,  offset = { x: 0, y: 0 },  noise = 0.5,  transparent = true,  scale = 3.6,  hueShift = 0,  colorFrequency = 1,  hoverStrength = 2,  inertia = 0.05,  bloom = 1,  suspendWhenOffscreen = false,  timeScale = 0.5,  ...props}, ref) => {  // props already contains only DOM props after destructuring above  const domProps = props;  const containerRef = useRef<HTMLDivElement | null>(null);  useEffect(() => {    const container = containerRef.current;    if (!container) return;    const H = Math.max(0.001, height);    const BW = Math.max(0.001, baseWidth);    const BASE_HALF = BW * 0.5;    const GLOW = Math.max(0.0, glow);    const NOISE = Math.max(0.0, noise);    const offX = offset?.x ?? 0;    const offY = offset?.y ?? 0;    const SAT = transparent ? 1.5 : 1;    const SCALE = Math.max(0.001, scale);    const HUE = hueShift || 0;    const CFREQ = Math.max(0.0, colorFrequency || 1);    const BLOOM = Math.max(0.0, bloom || 1);    const RSX = 1;    const RSY = 1;    const RSZ = 1;    const TS = Math.max(0, timeScale || 1);    const HOVSTR = Math.max(0, hoverStrength || 1);    const INERT = Math.max(0, Math.min(1, inertia || 0.12));    const dpr = Math.min(2, window.devicePixelRatio || 1);    const renderer = new Renderer({      dpr,      alpha: transparent,      antialias: false,    });    const gl = renderer.gl;    gl.disable(gl.DEPTH_TEST);    gl.disable(gl.CULL_FACE);    gl.disable(gl.BLEND);    Object.assign(gl.canvas.style, {      position: "absolute",      inset: "0",      width: "100%",      height: "100%",      display: "block",    } as Partial<CSSStyleDeclaration>);    container.appendChild(gl.canvas);    const vertex = /* glsl */ `      attribute vec2 position;      void main() {        gl_Position = vec4(position, 0.0, 1.0);      }    `;    const fragment = /* glsl */ `      precision highp float;      uniform vec2  iResolution;      uniform float iTime;      uniform float uHeight;      uniform float uBaseHalf;      uniform mat3  uRot;      uniform int   uUseBaseWobble;      uniform float uGlow;      uniform vec2  uOffsetPx;      uniform float uNoise;      uniform float uSaturation;      uniform float uScale;      uniform float uHueShift;      uniform float uColorFreq;      uniform float uBloom;      uniform float uCenterShift;      uniform float uInvBaseHalf;      uniform float uInvHeight;      uniform float uMinAxis;      uniform float uPxScale;      uniform float uTimeScale;      vec4 tanh4(vec4 x){        vec4 e2x = exp(2.0*x);        return (e2x - 1.0) / (e2x + 1.0);      }      float rand(vec2 co){        return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453123);      }      float sdOctaAnisoInv(vec3 p){        vec3 q = vec3(abs(p.x) * uInvBaseHalf, abs(p.y) * uInvHeight, abs(p.z) * uInvBaseHalf);        float m = q.x + q.y + q.z - 1.0;        return m * uMinAxis * 0.5773502691896258;      }      float sdPyramidUpInv(vec3 p){        float oct = sdOctaAnisoInv(p);        float halfSpace = -p.y;        return max(oct, halfSpace);      }      mat3 hueRotation(float a){        float c = cos(a), s = sin(a);        mat3 W = mat3(          0.299, 0.587, 0.114,          0.299, 0.587, 0.114,          0.299, 0.587, 0.114        );        mat3 U = mat3(           0.701, -0.587, -0.114,          -0.299,  0.413, -0.114,          -0.300, -0.588,  0.886        );        mat3 V = mat3(           0.168, -0.331,  0.500,           0.328,  0.035, -0.500,          -0.497,  0.296,  0.201        );        return W + U * c + V * s;      }      void main(){        vec2 f = (gl_FragCoord.xy - 0.5 * iResolution.xy - uOffsetPx) * uPxScale;        float z = 5.0;        float d = 0.0;        vec3 p;        vec4 o = vec4(0.0);        float centerShift = uCenterShift;        float cf = uColorFreq;        mat2 wob = mat2(1.0);        if (uUseBaseWobble == 1) {          float t = iTime * uTimeScale;          float c0 = cos(t + 0.0);          float c1 = cos(t + 33.0);          float c2 = cos(t + 11.0);          wob = mat2(c0, c1, c2, c0);        }        const int STEPS = 100;        for (int i = 0; i < STEPS; i++) {          p = vec3(f, z);          p.xz = p.xz * wob;          p = uRot * p;          vec3 q = p;          q.y += centerShift;          d = 0.1 + 0.2 * abs(sdPyramidUpInv(q));          z -= d;          o += (sin((p.y + z) * cf + vec4(0.0, 1.0, 2.0, 3.0)) + 1.0) / d;        }        o = tanh4(o * o * (uGlow * uBloom) / 1e5);        vec3 col = o.rgb;        float n = rand(gl_FragCoord.xy + vec2(iTime));        col += (n - 0.5) * uNoise;        col = clamp(col, 0.0, 1.0);        float L = dot(col, vec3(0.2126, 0.7152, 0.0722));        col = clamp(mix(vec3(L), col, uSaturation), 0.0, 1.0);        if(abs(uHueShift) > 0.0001){          col = clamp(hueRotation(uHueShift) * col, 0.0, 1.0);        }        gl_FragColor = vec4(col, o.a);      }    `;    const geometry = new Triangle(gl);    const iResBuf = new Float32Array(2);    const offsetPxBuf = new Float32Array(2);    const program = new Program(gl, {      vertex,      fragment,      uniforms: {        iResolution: { value: iResBuf },        iTime: { value: 0 },        uHeight: { value: H },        uBaseHalf: { value: BASE_HALF },        uUseBaseWobble: { value: 1 },        uRot: { value: new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]) },        uGlow: { value: GLOW },        uOffsetPx: { value: offsetPxBuf },        uNoise: { value: NOISE },        uSaturation: { value: SAT },        uScale: { value: SCALE },        uHueShift: { value: HUE },        uColorFreq: { value: CFREQ },        uBloom: { value: BLOOM },        uCenterShift: { value: H * 0.25 },        uInvBaseHalf: { value: 1 / BASE_HALF },        uInvHeight: { value: 1 / H },        uMinAxis: { value: Math.min(BASE_HALF, H) },        uPxScale: {          value: 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE),        },        uTimeScale: { value: TS },      },    });    const mesh = new Mesh(gl, { geometry, program });    const resize = () => {      const w = container.clientWidth || 1;      const h = container.clientHeight || 1;      renderer.setSize(w, h);      iResBuf[0] = gl.drawingBufferWidth;      iResBuf[1] = gl.drawingBufferHeight;      offsetPxBuf[0] = offX * dpr;      offsetPxBuf[1] = offY * dpr;      program.uniforms.uPxScale.value =        1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE);    };    const ro = new ResizeObserver(resize);    ro.observe(container);    resize();    const rotBuf = new Float32Array(9);    const setMat3FromEuler = (      yawY: number,      pitchX: number,      rollZ: number,      out: Float32Array    ) => {      const cy = Math.cos(yawY),        sy = Math.sin(yawY);      const cx = Math.cos(pitchX),        sx = Math.sin(pitchX);      const cz = Math.cos(rollZ),        sz = Math.sin(rollZ);      const r00 = cy * cz + sy * sx * sz;      const r01 = -cy * sz + sy * sx * cz;      const r02 = sy * cx;      const r10 = cx * sz;      const r11 = cx * cz;      const r12 = -sx;      const r20 = -sy * cz + cy * sx * sz;      const r21 = sy * sz + cy * sx * cz;      const r22 = cy * cx;      out[0] = r00;      out[1] = r10;      out[2] = r20;      out[3] = r01;      out[4] = r11;      out[5] = r21;      out[6] = r02;      out[7] = r12;      out[8] = r22;      return out;    };    const NOISE_IS_ZERO = NOISE < 1e-6;    let raf = 0;    const t0 = performance.now();    const startRAF = () => {      if (raf) return;      raf = requestAnimationFrame(render);    };    const stopRAF = () => {      if (!raf) return;      cancelAnimationFrame(raf);      raf = 0;    };    const rnd = () => Math.random();    const wX = (0.3 + rnd() * 0.6) * RSX;    const wY = (0.2 + rnd() * 0.7) * RSY;    const wZ = (0.1 + rnd() * 0.5) * RSZ;    const phX = rnd() * Math.PI * 2;    const phZ = rnd() * Math.PI * 2;    let yaw = 0,      pitch = 0,      roll = 0;    let targetYaw = 0,      targetPitch = 0;    const lerp = (a: number, b: number, t: number) => a + (b - a) * t;    const pointer = { x: 0, y: 0, inside: true };    const onMove = (e: PointerEvent) => {      const ww = Math.max(1, window.innerWidth);      const wh = Math.max(1, window.innerHeight);      const cx = ww * 0.5;      const cy = wh * 0.5;      const nx = (e.clientX - cx) / (ww * 0.5);      const ny = (e.clientY - cy) / (wh * 0.5);      pointer.x = Math.max(-1, Math.min(1, nx));      pointer.y = Math.max(-1, Math.min(1, ny));      pointer.inside = true;    };    const onLeave = () => {      pointer.inside = false;    };    const onBlur = () => {      pointer.inside = false;    };    let onPointerMove: ((e: PointerEvent) => void) | null = null;    if (animationType === "hover") {      onPointerMove = (e: PointerEvent) => {        onMove(e);        startRAF();      };      window.addEventListener("pointermove", onPointerMove, { passive: true });      window.addEventListener("mouseleave", onLeave);      window.addEventListener("blur", onBlur);      program.uniforms.uUseBaseWobble.value = 0;    } else if (animationType === "3drotate") {      program.uniforms.uUseBaseWobble.value = 0;    } else {      program.uniforms.uUseBaseWobble.value = 1;    }    const render = (t: number) => {      const time = (t - t0) * 0.001;      program.uniforms.iTime.value = time;      let continueRAF = true;      if (animationType === "hover") {        const maxPitch = 0.6 * HOVSTR;        const maxYaw = 0.6 * HOVSTR;        targetYaw = (pointer.inside ? -pointer.x : 0) * maxYaw;        targetPitch = (pointer.inside ? pointer.y : 0) * maxPitch;        const prevYaw = yaw;        const prevPitch = pitch;        const prevRoll = roll;        yaw = lerp(prevYaw, targetYaw, INERT);        pitch = lerp(prevPitch, targetPitch, INERT);        roll = lerp(prevRoll, 0, 0.1);        program.uniforms.uRot.value = setMat3FromEuler(          yaw,          pitch,          roll,          rotBuf        );        if (NOISE_IS_ZERO) {          const settled =            Math.abs(yaw - targetYaw) < 1e-4 &&            Math.abs(pitch - targetPitch) < 1e-4 &&            Math.abs(roll) < 1e-4;          if (settled) continueRAF = false;        }      } else if (animationType === "3drotate") {        const tScaled = time * TS;        yaw = tScaled * wY;        pitch = Math.sin(tScaled * wX + phX) * 0.6;        roll = Math.sin(tScaled * wZ + phZ) * 0.5;        program.uniforms.uRot.value = setMat3FromEuler(          yaw,          pitch,          roll,          rotBuf        );        if (TS < 1e-6) continueRAF = false;      } else {        rotBuf[0] = 1;        rotBuf[1] = 0;        rotBuf[2] = 0;        rotBuf[3] = 0;        rotBuf[4] = 1;        rotBuf[5] = 0;        rotBuf[6] = 0;        rotBuf[7] = 0;        rotBuf[8] = 1;        program.uniforms.uRot.value = rotBuf;        if (TS < 1e-6) continueRAF = false;      }      renderer.render({ scene: mesh });      if (continueRAF) {        raf = requestAnimationFrame(render);      } else {        raf = 0;      }    };    if (suspendWhenOffscreen) {      const io = new IntersectionObserver((entries) => {        const vis = entries.some((e) => e.isIntersecting);        if (vis) startRAF();        else stopRAF();      });      io.observe(container);      startRAF();      (container as any).__prismIO = io;    } else {      startRAF();    }    return () => {      stopRAF();      ro.disconnect();      if (animationType === "hover") {        if (onPointerMove)          window.removeEventListener(            "pointermove",            onPointerMove as EventListener          );        window.removeEventListener("mouseleave", onLeave);        window.removeEventListener("blur", onBlur);      }      if (suspendWhenOffscreen) {        const io = (container as any).__prismIO as          | IntersectionObserver          | undefined;        if (io) io.disconnect();        delete (container as any).__prismIO;      }      if (gl.canvas.parentElement === container)        container.removeChild(gl.canvas);    };  }, [    height,    baseWidth,    animationType,    glow,    noise,    offset?.x,    offset?.y,    scale,    transparent,    hueShift,    colorFrequency,    timeScale,    hoverStrength,    inertia,    bloom,    suspendWhenOffscreen,  ]);  return <div ref={ref} className={cn("w-full h-full relative", className)} {...domProps}>    <div ref={containerRef} className="w-full h-full" />  </div>;});PrismBackground.displayName = 'PrismBackground';

Built for React applications with TypeScript and Next.js. Uses WebGL through OGL for hardware-accelerated 3D rendering that maintains 60fps even with dozens of floating elements. The prismatic lighting system creates rainbow reflections that shift as objects rotate. Perfect for hero sections, loading screens, or any interface element that needs to feel premium and modern. Seamless integration with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/prism-background.json

npx shadcn@latest add https://www.shadcn.io/registry/prism-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/prism-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/prism-background.json

Why flat backgrounds feel dead

Developers throw a gradient background on a div and call it sophisticated design. Maybe add some CSS animation that moves a few pixels left and right. The problem? Users have seen these effects a thousand times. They don't create emotional connection or communicate innovation.

3D prism effects change everything. They tap into our fascination with light, geometry, and depth perception. The floating motion creates a sense of weightlessness—like peering into a crystal cave or watching aurora particles dance. Each prism catches light differently as it rotates, creating natural variety that feels organic rather than programmed.

This component handles the complex WebGL setup automatically. Lighting calculations, particle systems, camera positioning, and animation loops all work together seamlessly. The result feels like a premium digital art installation, not a cheesy web effect.

Features

Hardware-accelerated 3D rendering using WebGL through OGL for smooth 60fps animation
Floating particle system with dozens of independently animated geometric prisms
Realistic lighting model with fresnel effects and prismatic color reflections
Multiple color modes including rainbow, monochrome, blue, and purple palettes
Configurable particle count and animation speed for performance optimization
Responsive canvas rendering that adapts to container dimensions
TypeScript support with complete prop forwarding and type safety
Memory efficient cleanup preventing WebGL context leaks on unmount
Cross-browser compatibility with graceful degradation for older devices

API Reference

PrismBackground

Prop	Type	Default	Description
`particleCount`	`number`	`50`	Number of floating prisms to render (affects performance)
`animationSpeed`	`number`	`0.01`	Speed multiplier for rotation and floating animations
`colorMode`	`'rainbow' \| 'monochrome' \| 'blue' \| 'purple'`	`'rainbow'`	Color palette for prism materials
`className`	`string`	-	Additional CSS classes for the container
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props supported

Animation System

The component uses three coordinated animation layers:

System	Purpose	Performance Impact	Customization
Rotation	Individual prism spinning	Low	Speed via `animationSpeed`
Translation	Floating movement patterns	Low	Automatic sine/cosine waves
Lighting	Dynamic light calculations	Medium	Color via `colorMode`
Rendering	WebGL draw calls	High	Count via `particleCount`

Color Mode Examples

// Rainbow spectrum (default)
<PrismBackground colorMode="rainbow" />

// Subtle monochrome
<PrismBackground colorMode="monochrome" />

// Ocean theme
<PrismBackground colorMode="blue" />

// Royal theme
<PrismBackground colorMode="purple" />

// Performance optimized
<PrismBackground particleCount={20} animationSpeed={0.005} />

Performance considerations

Particle count scaling: Each prism requires individual draw calls and matrix calculations. Start with 30-50 particles for most devices. High-end devices can handle 100+, while mobile should use 20 or fewer.

WebGL context management: The component automatically handles WebGL context creation and cleanup. Multiple instances on the same page share the GPU efficiently, but avoid rendering dozens simultaneously.

Animation frame optimization: Uses requestAnimationFrame for smooth 60fps rendering. The animation loop automatically pauses when the component unmounts or the tab becomes inactive.

Memory leak prevention: WebGL contexts are properly disposed when components unmount. The cleanup process releases GPU memory and prevents the browser from running out of WebGL contexts.

Mobile device adaptation: Touch devices may experience thermal throttling with complex 3D scenes. Consider reducing particleCount and animationSpeed for mobile users or use media queries to conditionally render simpler alternatives.

Common gotchas

Container sizing: The canvas fills its parent container completely. Ensure the parent has explicit width and height - percentage-based sizing works perfectly for full-screen backgrounds.

Z-index layering: The canvas renders behind other content by default. Content placed inside the component container will appear above the 3D scene. Use CSS z-index for complex layering scenarios.

WebGL support detection: Modern browsers support WebGL, but very old devices might not. The component gracefully handles WebGL initialization failures, though you might want to provide fallback content.

Animation timing consistency: The floating motion uses sine waves with different frequencies per prism. This creates natural variation, but rapid props changes might cause animation jumps during development.

Color mode switching: Changing colorMode recreates all prism materials, causing a brief rendering pause. For dynamic theming, consider using CSS variables or pre-loading different color instances.

React 3D Prism Background

Floating prisms with WebGL rendering

Installation

Why flat backgrounds feel dead

Features

API Reference

PrismBackground

Animation System

Color Mode Examples

Performance considerations

Common gotchas

You might also like

Aurora Background

Particles Background

Shooting Stars

Hexagon Background

Questions developers actually ask

On this page

React 3D Prism Background

Reactprism-background

Aurora Background

Particles Background

Shooting Stars

Hexagon Background

How do I optimize performance for mobile devices?

Can I use custom colors instead of the predefined color modes?

What happens on devices that don't support WebGL?

Can I use multiple prism backgrounds on the same page?

How do I add mouse interaction or click events to the prisms?

Can I pause or control the animation programmatically?

How do I use this as a full-screen background?

Will this cause memory leaks in single-page applications?

On this page