Prism Gradient

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useTheme } from "next-themes";
5import {
6  useEffect,
7  useMemo,
8  useRef,
9  useState,
10  type CSSProperties,
11} from "react";
12 
13export interface PrismGradientNoise {
14  /** Opacity of the grain overlay. */
15  opacity: number;
16  /** Size multiplier for the grain texture. */
17  scale?: number;
18}
19 
20export interface PrismGradientProps {
21  /** Animation speed multiplier. Prism's original speed is 1. */
22  speed?: number;
23  /** Optional grain overlay. */
24  noise?: PrismGradientNoise;
25  /** Border radius applied to the gradient. */
26  radius?: string;
27  /** Additional inline styles. */
28  style?: CSSProperties;
29  /** Additional CSS classes. */
30  className?: string;
31}
32 
33const PRISM = {
34  dark: ["#050505", "#66B3FF", "#FFFFFF"],
35  light: ["#FAFAFA", "#66B3FF", "#050505"],
36  rotation: -50,
37  proportion: 1,
38  scale: 0.01,
39  speed: 30,
40  distortion: 0,
41  swirl: 50,
42  swirlIterations: 16,
43  softness: 47,
44  offset: -299,
45  shapeSize: 45,
46} as const;
47 
48const NOISE_TEXTURE =
49  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMCCgkGBAVJOAVJAAAASklEQVQ4y2NgGAWjYBSMglEwCgY/YGRgZBQUYmJiZGQEkYwMjIyMgoKCjIyMIJKBgRFIMjIyAklGRkYGRkFBYEcwMDIyMjAOUQAA1I4HwVwZAkYAAAAASUVORK5CYII=";
50 
51export function PrismGradient({
52  speed = 1,
53  noise,
54  radius = "0px",
55  style,
56  className,
57}: PrismGradientProps) {
58  const canvasRef = useRef<HTMLCanvasElement>(null);
59  const containerRef = useRef<HTMLDivElement>(null);
60  const frameIdRef = useRef<number | undefined>(undefined);
61  const [mounted, setMounted] = useState(false);
62  const [webglFailed, setWebglFailed] = useState(false);
63  const { resolvedTheme } = useTheme();
64 
65  useEffect(() => {
66    setMounted(true);
67  }, []);
68 
69  const colors = useMemo(
70    () => (mounted && resolvedTheme === "light" ? PRISM.light : PRISM.dark),
71    [mounted, resolvedTheme],
72  );
73 
74  useEffect(() => {
75    const canvas = canvasRef.current;
76    const container = containerRef.current;
77    if (!canvas || !container || !mounted || webglFailed) return;
78 
79    const gl = canvas.getContext("webgl2", {
80      premultipliedAlpha: true,
81      alpha: true,
82      antialias: true,
83    });
84    if (!gl) {
85      setWebglFailed(true);
86      return;
87    }
88 
89    const compileShader = (type: number, source: string) => {
90      const shader = gl.createShader(type);
91      if (!shader) return null;
92      gl.shaderSource(shader, source);
93      gl.compileShader(shader);
94// … truncated