4e: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"] 4f:Tf7f,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { ShaderMount } from "./shader-mount"; import { plainFragmentShader, blurFragmentShader, ditherFragmentShader, hexToRgba, } from "./shaders"; type LoaderShape = "sphere" | "swirl" | "ripple"; type LoaderStyle = "plain" | "blur" | "dither"; const sizeConfig = { sm: { width: 48, height: 48 }, default: { width: 80, height: 80 }, lg: { width: 120, height: 120 }, }; const shapeMap: Record = { sphere: 1, swirl: 2, ripple: 3, }; const shaderMap: Record = { plain: plainFragmentShader, blur: blurFragmentShader, dither: ditherFragmentShader, }; interface LoaderProps extends React.HTMLAttributes { /** Base shape of the loader */ shape?: LoaderShape; /** Visual style: plain (solid), blur (soft), or dither (pixelated) */ variant?: LoaderStyle; /** Size preset (maps to width/height) */ size?: keyof typeof sizeConfig; /** Custom width (overrides size preset) */ width?: number; /** Custom height (overrides size preset) */ height?: number; /** Animation speed multiplier */ speed?: number; /** Primary color */ color?: string; /** Background color */ colorBack?: string; } function Loader({ shape = "sphere", variant = "dither", size = "default", width, height, speed = 1, color = "#00b3ff", colorBack = "transparent", className, style, ...props }: LoaderProps) { const sizeDefaults = sizeConfig[size]; const resolvedWidth = width ?? sizeDefaults.width; const resolvedHeight = height ?? sizeDefaults.height; const fragmentShader = shaderMap[variant]; const shapeValue = shapeMap[shape]; const scale = variant === "blur" ? 0.52 : 0.6; const usesCssVariables = color.includes("var(") || colorBack.includes("var("); const [cssVariableEpoch, setCssVariableEpoch] = React.useState(0); React.useEffect(() => { if (!usesCssVariables || typeof document === "undefined") { return; } const bumpCssVariableEpoch = () => { setCssVariableEpoch((value) => value + 1); }; // Resolve once after mount, then re-resolve on theme/token changes. bumpCssVariableEpoch(); const attributeFilter = ["class", "style", "data-theme"]; const observer = new MutationObserver(bumpCssVariableEpoch); observer.observe(document.documentElement, { attributes: true, attributeFilter, }); if (document.body) { observer.observe(document.body, { attributes: true, attributeFilter, }); } const media = window.matchMedia("(prefers-color-scheme: dark)"); if (typeof media.addEventListener === "function") { media.addEventListener("change", bumpCssVariableEpoch); } else { media.addListener(bumpCssVariableEpoch); } return () => { observer.disconnect(); if (typeof media.removeEventListener === "function") { media.removeEventListener("change", bumpCssVariableEpoch); } else { media.removeListener(bumpCssVariableEpoch); } }; }, [usesCssVariables]); const uniforms = React.useMemo( () => ({ u_colorFront: hexToRgba(color), u_colorBack: hexToRgba(colorBack), u_shape: shapeValue, u_scale: scale, u_pxSize: 2, // Pixel size for dithering }), [color, colorBack, shapeValue, scale, cssVariableEpoch] ); return (

); } export { Loader, sizeConfig }; export type { LoaderProps, LoaderShape, LoaderStyle }; 50:T1933,"use client"; import * as React from "react"; import { vertexShaderSource } from "./shaders"; interface ShaderMountProps { fragmentShader: string; uniforms: Record; speed?: number; width: number; height: number; className?: string; style?: React.CSSProperties; } function createShader( gl: WebGL2RenderingContext, type: number, source: string ): WebGLShader | null { const shader = gl.createShader(type); if (!shader) return null; gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error( "Shader compile error:", gl.getShaderInfoLog(shader) ); gl.deleteShader(shader); return null; } return shader; } function createProgram( gl: WebGL2RenderingContext, vertexSource: string, fragmentSource: string ): WebGLProgram | null { const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource); const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource); if (!vertexShader || !fragmentShader) return null; const program = gl.createProgram(); if (!program) return null; gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error("Program link error:", gl.getProgramInfoLog(program)); gl.deleteProgram(program); return null; } // Clean up shaders after linking gl.detachShader(program, vertexShader); gl.detachShader(program, fragmentShader); gl.deleteShader(vertexShader); gl.deleteShader(fragmentShader); return program; } export function ShaderMount({ fragmentShader, uniforms, speed = 1, width, height, className, style, }: ShaderMountProps) { const canvasRef = React.useRef(null); const glRef = React.useRef(null); const programRef = React.useRef(null); const uniformLocationsRef = React.useRef< Record >({}); const rafRef = React.useRef(null); const startTimeRef = React.useRef(performance.now()); const currentSpeedRef = React.useRef(speed); // Update speed ref when prop changes React.useEffect(() => { currentSpeedRef.current = speed; }, [speed]); // Initialize WebGL React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true, antialias: true, }); if (!gl) { console.error("WebGL2 not supported"); return; } glRef.current = gl; // Create program const program = createProgram(gl, vertexShaderSource, fragmentShader); if (!program) return; programRef.current = program; // Setup position attribute const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); const positions = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); const positionLocation = gl.getAttribLocation(program, "a_position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); // Get uniform locations const locations: Record = { u_time: gl.getUniformLocation(program, "u_time"), u_resolution: gl.getUniformLocation(program, "u_resolution"), u_pixelRatio: gl.getUniformLocation(program, "u_pixelRatio"), }; Object.keys(uniforms).forEach((key) => { locations[key] = gl.getUniformLocation(program, key); }); uniformLocationsRef.current = locations; // Enable blending for transparency gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); return () => { if (rafRef.current) { cancelAnimationFrame(rafRef.current); } if (gl && program) { gl.deleteProgram(program); } }; }, [fragmentShader]); // Render loop React.useEffect(() => { const gl = glRef.current; const program = programRef.current; const locations = uniformLocationsRef.current; if (!gl || !program) return; const pixelRatio = Math.min(window.devicePixelRatio, 2); const canvasWidth = width * pixelRatio; const canvasHeight = height * pixelRatio; const canvas = canvasRef.current; if (canvas) { canvas.width = canvasWidth; canvas.height = canvasHeight; } gl.viewport(0, 0, canvasWidth, canvasHeight); let lastTime = performance.now(); let accumulatedTime = 0; const render = (currentTime: number) => { const deltaTime = currentTime - lastTime; lastTime = currentTime; accumulatedTime += deltaTime * currentSpeedRef.current * 0.001; gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(program); // Set built-in uniforms if (locations.u_time) { gl.uniform1f(locations.u_time, accumulatedTime); } if (locations.u_resolution) { gl.uniform2f(locations.u_resolution, canvasWidth, canvasHeight); } if (locations.u_pixelRatio) { gl.uniform1f(locations.u_pixelRatio, pixelRatio); } // Set custom uniforms Object.entries(uniforms).forEach(([key, value]) => { const location = locations[key]; if (!location) return; if (Array.isArray(value)) { switch (value.length) { case 2: gl.uniform2fv(location, value); break; case 3: gl.uniform3fv(location, value); break; case 4: gl.uniform4fv(location, value); break; } } else { gl.uniform1f(location, value); } }); gl.drawArrays(gl.TRIANGLES, 0, 6); rafRef.current = requestAnimationFrame(render); }; rafRef.current = requestAnimationFrame(render); return () => { if (rafRef.current) { cancelAnimationFrame(rafRef.current); } }; }, [uniforms, width, height]); return (