50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T4143,"use client"; import { useTheme } from "next-themes"; import { useRef, useEffect, useMemo, useState, type CSSProperties } from "react"; type PatternShape = "Checks" | "Stripes" | "Edge"; const PatternShapes: Record = { Checks: 0, Stripes: 1, Edge: 2, }; interface PresetColors { color1: string; color2: string; color3: string; } interface PresetParams extends PresetColors { rotation: number; proportion: number; scale: number; speed: number; distortion: number; swirl: number; swirlIterations: number; softness: number; offset: number; shape: PatternShape; shapeSize: number; lightColors?: PresetColors; } const presets: Record = { Prism: { color1: "#050505", color2: "#66B3FF", color3: "#FFFFFF", lightColors: { color1: "#FAFAFA", color2: "#66B3FF", color3: "#050505", }, rotation: -50, proportion: 1, scale: 0.01, speed: 30, distortion: 0, swirl: 50, swirlIterations: 16, softness: 47, offset: -299, shape: "Checks", shapeSize: 45, }, Lava: { color1: "#FF9F21", color2: "#FF0303", color3: "#000000", lightColors: { color1: "#FF9F21", color2: "#FF0303", color3: "#FAFAFA", }, rotation: 114, proportion: 100, scale: 0.52, speed: 30, distortion: 7, swirl: 18, swirlIterations: 20, softness: 100, offset: 717, shape: "Edge", shapeSize: 12, }, Plasma: { color1: "#B566FF", color2: "#000000", color3: "#000000", lightColors: { color1: "#B566FF", color2: "#FAFAFA", color3: "#FAFAFA", }, rotation: 0, proportion: 63, scale: 0.75, speed: 30, distortion: 5, swirl: 61, swirlIterations: 5, softness: 100, offset: -168, shape: "Checks", shapeSize: 28, }, Pulse: { color1: "#66FF85", color2: "#000000", color3: "#000000", lightColors: { color1: "#66FF85", color2: "#FAFAFA", color3: "#FAFAFA", }, rotation: -167, proportion: 92, scale: 0, speed: 20, distortion: 54, swirl: 75, swirlIterations: 3, softness: 28, offset: -813, shape: "Checks", shapeSize: 79, }, Vortex: { color1: "#000000", color2: "#FFFFFF", color3: "#000000", lightColors: { color1: "#FAFAFA", color2: "#000000", color3: "#FAFAFA", }, rotation: 50, proportion: 41, scale: 0.4, speed: 20, distortion: 0, swirl: 100, swirlIterations: 3, softness: 5, offset: -744, shape: "Stripes", shapeSize: 80, }, Mist: { color1: "#050505", color2: "#FF66B8", color3: "#050505", lightColors: { color1: "#FAFAFA", color2: "#FF66B8", color3: "#FAFAFA", }, rotation: 0, proportion: 33, scale: 0.48, speed: 39, distortion: 4, swirl: 65, swirlIterations: 5, softness: 100, offset: -235, shape: "Edge", shapeSize: 48, }, }; type PresetName = "Prism" | "Lava" | "Plasma" | "Pulse" | "Vortex" | "Mist"; interface CustomConfig { preset: "custom"; color1: string; color2: string; color3: string; rotation?: number; proportion?: number; scale?: number; speed?: number; distortion?: number; swirl?: number; swirlIterations?: number; softness?: number; offset?: number; shape?: PatternShape; shapeSize?: number; } interface PresetConfig { preset: PresetName; speed?: number; } type GradientConfig = CustomConfig | PresetConfig; interface NoiseConfig { opacity: number; scale?: number; } interface AnimatedGradientProps { config?: GradientConfig; noise?: NoiseConfig; radius?: string; style?: CSSProperties; className?: string; } export default function AnimatedGradient({ config = { preset: "Prism" }, noise, radius = "0px", style, className, }: AnimatedGradientProps) { const canvasRef = useRef(null); const containerRef = useRef(null); const frameIdRef = useRef(undefined); const startTimeRef = useRef(0); const [isMounted, setIsMounted] = useState(false); const { resolvedTheme } = useTheme(); useEffect(() => { setIsMounted(true); return () => setIsMounted(false); }, []); const params = useMemo((): PresetParams => { if (config.preset === "custom") { return { color1: config.color1, color2: config.color2, color3: config.color3, rotation: config.rotation ?? 0, proportion: config.proportion ?? 35, scale: config.scale ?? 1, speed: config.speed ?? 25, distortion: config.distortion ?? 12, swirl: config.swirl ?? 80, swirlIterations: config.swirlIterations ?? 10, softness: config.softness ?? 100, offset: config.offset ?? 0, shape: config.shape ?? "Checks", shapeSize: config.shapeSize ?? 10, }; } const preset = presets[config.preset] || presets.Prism; const useLight = isMounted && resolvedTheme === "light" && preset.lightColors; return { ...preset, ...(useLight ? preset.lightColors : null), speed: config.speed ?? preset.speed, }; }, [config, isMounted, resolvedTheme]); useEffect(() => { const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container || !isMounted) return; const gl = canvas.getContext("webgl2", { premultipliedAlpha: true, alpha: true, antialias: true, }); if (!gl) return; const vertexShaderSource = `#version 300 es in vec4 a_position; void main() { gl_Position = a_position; }`; const vertexShader = gl.createShader(gl.VERTEX_SHADER)!; gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)!; gl.shaderSource(fragmentShader, FRAGMENT_SHADER); gl.compileShader(fragmentShader); const program = gl.createProgram()!; gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW ); const positionLocation = gl.getAttribLocation(program, "a_position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); const uniforms = { u_time: gl.getUniformLocation(program, "u_time"), u_resolution: gl.getUniformLocation(program, "u_resolution"), u_pixelRatio: gl.getUniformLocation(program, "u_pixelRatio"), u_scale: gl.getUniformLocation(program, "u_scale"), u_rotation: gl.getUniformLocation(program, "u_rotation"), u_color1: gl.getUniformLocation(program, "u_color1"), u_color2: gl.getUniformLocation(program, "u_color2"), u_color3: gl.getUniformLocation(program, "u_color3"), u_proportion: gl.getUniformLocation(program, "u_proportion"), u_softness: gl.getUniformLocation(program, "u_softness"), u_shape: gl.getUniformLocation(program, "u_shape"), u_shapeScale: gl.getUniformLocation(program, "u_shapeScale"), u_distortion: gl.getUniformLocation(program, "u_distortion"), u_swirl: gl.getUniformLocation(program, "u_swirl"), u_swirlIterations: gl.getUniformLocation(program, "u_swirlIterations"), }; const resize = () => { const width = container.clientWidth; const height = container.clientHeight; const pixelRatio = window.devicePixelRatio || 1; canvas.width = width * pixelRatio; canvas.height = height * pixelRatio; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; gl.viewport(0, 0, canvas.width, canvas.height); }; resize(); const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(container); startTimeRef.current = performance.now(); const animate = (time: number) => { const elapsed = (time - startTimeRef.current) / 1000; const speed = (params.speed / 100) * 5; gl.uniform1f(uniforms.u_time, elapsed * speed + params.offset * 0.01); gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height); gl.uniform1f(uniforms.u_pixelRatio, window.devicePixelRatio || 1); gl.uniform1f(uniforms.u_scale, params.scale); gl.uniform1f(uniforms.u_rotation, (params.rotation * Math.PI) / 180); const c1 = hexToRgba(params.color1); const c2 = hexToRgba(params.color2); const c3 = hexToRgba(params.color3); gl.uniform4f(uniforms.u_color1, c1[0], c1[1], c1[2], c1[3]); gl.uniform4f(uniforms.u_color2, c2[0], c2[1], c2[2], c2[3]); gl.uniform4f(uniforms.u_color3, c3[0], c3[1], c3[2], c3[3]); gl.uniform1f(uniforms.u_proportion, params.proportion / 100); gl.uniform1f(uniforms.u_softness, params.softness / 100); gl.uniform1f(uniforms.u_shape, PatternShapes[params.shape]); gl.uniform1f(uniforms.u_shapeScale, params.shapeSize / 100); gl.uniform1f(uniforms.u_distortion, params.distortion / 50); gl.uniform1f(uniforms.u_swirl, params.swirl / 100); gl.uniform1f( uniforms.u_swirlIterations, params.swirl === 0 ? 0 : params.swirlIterations ); gl.drawArrays(gl.TRIANGLES, 0, 6); frameIdRef.current = requestAnimationFrame(animate); }; frameIdRef.current = requestAnimationFrame(animate); return () => { if (frameIdRef.current !== undefined) { cancelAnimationFrame(frameIdRef.current); } resizeObserver.disconnect(); gl.deleteProgram(program); gl.deleteShader(vertexShader); gl.deleteShader(fragmentShader); gl.deleteBuffer(positionBuffer); }; }, [isMounted, params]); return (