{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shader-gradient",
  "type": "registry:component",
  "title": "Shader Gradient",
  "description": "Animated GLSL WebGL shader gradient, fully GPU-powered",
  "dependencies": [],
  "files": [
    {
      "path": "components/kraavon-ui/ShaderGradient.tsx",
      "content": "\"use client\";\nimport React, { useEffect, useRef } from \"react\";\ninterface Props { colors?: [string,string,string]; speed?: number; className?: string; style?: React.CSSProperties; children?: React.ReactNode; }\nexport default function ShaderGradient({ colors = [\"#6366f1\",\"#8b5cf6\",\"#06b6d4\"], speed = 1, className, style, children }: Props) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const animRef = useRef<number>(0);\n  useEffect(() => {\n    const canvas = canvasRef.current; if (!canvas) return;\n    const gl = canvas.getContext(\"webgl\"); if (!gl) return;\n    const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; gl.viewport(0,0,canvas.width,canvas.height); };\n    resize(); window.addEventListener(\"resize\", resize);\n    const vs = gl.createShader(gl.VERTEX_SHADER)!;\n    gl.shaderSource(vs, `attribute vec2 a_pos; void main(){ gl_Position = vec4(a_pos,0,1); }`);\n    gl.compileShader(vs);\n    const parseColor = (hex: string) => { const r=parseInt(hex.slice(1,3),16)/255, g=parseInt(hex.slice(3,5),16)/255, b=parseInt(hex.slice(5,7),16)/255; return [r,g,b]; };\n    const [c1,c2,c3] = colors.map(parseColor);\n    const fs = gl.createShader(gl.FRAGMENT_SHADER)!;\n    gl.shaderSource(fs, `precision mediump float;\nuniform float u_time; uniform vec2 u_res;\nvec3 c1=vec3(${c1});vec3 c2=vec3(${c2});vec3 c3=vec3(${c3});\nvoid main(){\n  vec2 uv=(gl_FragCoord.xy/u_res)*2.0-1.0;\n  float t=u_time*${speed.toFixed(1)};\n  float d=length(uv-vec2(sin(t*0.7)*0.4,cos(t*0.5)*0.3));\n  float d2=length(uv-vec2(cos(t*0.6)*0.35,sin(t*0.8)*0.35));\n  vec3 col=mix(c1,c2,smoothstep(0.0,1.2,d));\n  col=mix(col,c3,smoothstep(0.2,1.0,d2)*0.7);\n  gl_FragColor=vec4(col,1.0);\n}`);\n    gl.compileShader(fs);\n    const prog = gl.createProgram()!;\n    gl.attachShader(prog,vs); gl.attachShader(prog,fs); gl.linkProgram(prog); gl.useProgram(prog);\n    const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,buf);\n    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);\n    const loc = gl.getAttribLocation(prog,\"a_pos\"); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);\n    const tLoc = gl.getUniformLocation(prog,\"u_time\"); const rLoc = gl.getUniformLocation(prog,\"u_res\");\n    const start = performance.now();\n    const draw = () => {\n      const t = (performance.now()-start)/1000;\n      gl.uniform1f(tLoc,t); gl.uniform2f(rLoc,canvas.width,canvas.height);\n      gl.drawArrays(gl.TRIANGLE_STRIP,0,4);\n      animRef.current = requestAnimationFrame(draw);\n    };\n    draw();\n    return () => { cancelAnimationFrame(animRef.current); window.removeEventListener(\"resize\",resize); };\n  }, []);\n  return (\n    <div className={className} style={{ position:\"relative\", overflow:\"hidden\", ...style }}>\n      <canvas ref={canvasRef} style={{ position:\"absolute\", inset:0, width:\"100%\", height:\"100%\" }} />\n      <div style={{ position:\"relative\", zIndex:1 }}>{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}