prism-background.tsx

"use client";

import { Mesh, Program, Renderer, Triangle } from "ogl";
import { useEffect, useRef } from "react";

// Adapted from React Bits' Prism (reactbits.dev/backgrounds/prism), verified
// against its live source and props table before porting — see
// docs/ui-motion.md for why Prism was chosen for the hero (ogl engine,
// built-in suspendWhenOffscreen) over the other WebGL background options.
export interface PrismBackgroundProps {
	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;
	className?: string;
}

export function PrismBackground({
	height = 3,
	baseWidth = 2.5,
	animationType = "3drotate",
	glow = 1.2,
	offset = { x: 0, y: 0 },
	noise = 0.1,
	transparent = true,
	scale = 3.6,
	hueShift = 0,
	colorFrequency = 1,
	hoverStrength = 2,
	inertia = 0.1,
	bloom = 1,
	suspendWhenOffscreen = false,
	timeScale = 0.3,
	className,
}: PrismBackgroundProps) {
	const containerRef = useRef<HTMLDivElement>(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",
		});
		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);
			const sy = Math.sin(yawY);
			const cx = Math.cos(pitchX);
			const sx = Math.sin(pitchX);
			const cz = Math.cos(rollZ);
			const 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;
		let pitch = 0;
		let roll = 0;
		let targetYaw = 0;
		let 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) => {
				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;
			}
		};

		let io: IntersectionObserver | undefined;
		if (suspendWhenOffscreen) {
			io = new IntersectionObserver((entries) => {
				const vis = entries.some((e) => e.isIntersecting);
				if (vis) startRAF();
				else stopRAF();
			});
			io.observe(container);
			startRAF();
		} else {
			startRAF();
		}

		return () => {
			stopRAF();
			ro.disconnect();
			if (animationType === "hover") {
				if (onPointerMove)
					window.removeEventListener("pointermove", onPointerMove);
				window.removeEventListener("mouseleave", onLeave);
				window.removeEventListener("blur", onBlur);
			}
			io?.disconnect();
			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={containerRef} className={className} />;
}