{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "electric-mist",
  "title": "Electric Mist",
  "description": "A high-energy glowing lightning shader with waves and smoke effects.",
  "dependencies": [
    "three",
    "@react-three/fiber",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/electric-mist/electric-mist.tsx",
      "content": "\"use client\";\n\nimport { Canvas, useFrame } from \"@react-three/fiber\";\nimport { useRef, useMemo, useEffect } from \"react\";\nimport * as THREE from \"three\";\nimport { cn } from \"@/lib/utils\";\n\nconst vertexShader = `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = vec4(position, 1.0);\n  }\n`;\n\nconst fragmentShader = `\n  uniform float uTime;\n  uniform vec2 uResolution;\n  uniform vec3 uColor;\n  uniform float uSpeed;\n  uniform float uDetail;\n  uniform float uDistortion;\n  uniform float uBrightness;\n  varying vec2 vUv;\n\n  #define time uTime * 0.2\n\n  mat2 makem2(in float theta){\n      float c = cos(theta);\n      float s = sin(theta);\n      return mat2(c,-s,s,c);\n  }\n\n  float hash(vec2 p) {\n      return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);\n  }\n\n  float noise( in vec2 x, float detail ){\n      x *= detail; \n      vec2 p = floor(x);\n      vec2 f = fract(x);\n      f = f * f * (3.0 - 2.0 * f);\n      float a = hash(p + vec2(0.0, 0.0));\n      float b = hash(p + vec2(1.0, 0.0));\n      float c = hash(p + vec2(0.0, 1.0));\n      float d = hash(p + vec2(1.0, 1.0));\n      return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n  }\n\n  mat2 m2 = mat2( 0.80,  0.60, -0.60,  0.80 );\n\n  float fbm( in vec2 p, float detail, int octaves )\n  { \n      float z=2.;\n      float rz = 0.;\n      for (int i= 0; i < 7; i++ )\n      {\n          if(i >= octaves) break;\n          rz += abs((noise(p, detail)-0.5)*4.)/z;\n          z = z*2.;\n          p = p*2.;\n          p *= m2;\n      }\n      return rz;\n  }\n\n void main() {\n    vec2 p = vUv * 2.0 - 1.0;\n    p.x *= uResolution.x/uResolution.y;\n    vec2 bp = p;\n    p += 5.;\n    p *= 0.5;\n\n    float rb = fbm(p*.5 + time*.17, uDetail, 3) * .1;\n    // rb = sqrt(rb);\n    p *= makem2(rb*.2 + atan(p.y,p.x) * uDistortion);\n\n    float rz = fbm(p*.9 - time*.7, uDetail, 5);\n    \n    rz *= 12.0; \n\n    rz *= abs(sin(bp.x*0.5 - time*4.0 - 2.0)) * 1.0;\n\n    vec3 col = uColor / (uBrightness - rz);\n\n    gl_FragColor = vec4(sqrt(abs(col)), 1.0);\n}\n`;\n\ninterface ElectricMistProps {\n  className?: string;\n  speed?: number;\n  color?: string;\n  detail?: number;\n  distortion?: number;\n  brightness?: number;\n}\n\nconst Effect = ({\n  speed,\n  color,\n  detail,\n  distortion,\n  brightness,\n}: Required<Omit<ElectricMistProps, \"className\">>) => {\n  const material = useRef<THREE.ShaderMaterial>(null);\n\n  const uniforms = useMemo(\n    () => ({\n      uTime: { value: 0 },\n      uResolution: { value: new THREE.Vector2() },\n      uColor: { value: new THREE.Color(color) },\n      uSpeed: { value: speed },\n      uDetail: { value: detail },\n      uDistortion: { value: distortion },\n      uBrightness: { value: brightness },\n    }),\n    []\n  );\n\n  useEffect(() => {\n    if (material.current) {\n      material.current.uniforms.uColor.value.set(color);\n      material.current.uniforms.uSpeed.value = speed;\n      material.current.uniforms.uDetail.value = detail;\n      material.current.uniforms.uDistortion.value = distortion;\n      material.current.uniforms.uBrightness.value = brightness;\n    }\n  }, [color, speed, detail, distortion, brightness]);\n\n  useFrame((state) => {\n    if (material.current) {\n      material.current.uniforms.uTime.value =\n        state.clock.getElapsedTime() * speed;\n      material.current.uniforms.uResolution.value.set(\n        state.size.width,\n        state.size.height\n      );\n    }\n  });\n\n  return (\n    <mesh>\n      <planeGeometry args={[2, 2]} />\n      <shaderMaterial\n        ref={material}\n        vertexShader={vertexShader}\n        fragmentShader={fragmentShader}\n        uniforms={uniforms}\n      />\n    </mesh>\n  );\n};\n\nexport default function ElectricMist({\n  className,\n  speed = 1.0,\n  color = \"#191970\",\n  detail = 1.5,\n  distortion = 3.0,\n  brightness = 1.0,\n}: ElectricMistProps) {\n  return (\n    <div\n      className={cn(\n        \"absolute inset-0 w-full h-full pointer-events-none bg-[#05050f] overflow-hidden\",\n        className\n      )}\n    >\n      <Canvas\n        camera={{ position: [0, 0, 1] }}\n        dpr={1}\n        gl={{ antialias: false, powerPreference: \"high-performance\" }}\n      >\n        <Effect\n          speed={speed}\n          color={color}\n          detail={detail}\n          distortion={distortion}\n          brightness={brightness}\n        />\n      </Canvas>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}