{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "synthesis",
  "title": "Synthesis",
  "description": "A professional, multi-layered cosmic flow background with extensive warping customization.",
  "dependencies": [
    "three",
    "@react-three/fiber",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/synthesis/synthesis.tsx",
      "content": "\"use client\";\n\nimport { Canvas, useFrame } from \"@react-three/fiber\";\nimport { useMemo, useRef, 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 vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColor1;\n  uniform vec3 uColor2;\n  uniform vec3 uColor3;\n  uniform float uScale;\n  uniform float uComplexity;\n  uniform float uDistortion;\n  uniform float uGlowIntensity;\n  uniform float uFlowFrequency;\n  uniform float uContrast;\n\n  mat2 rot(float a) {\n      float s = sin(a), c = cos(a);\n      return mat2(c, -s, s, c);\n  }\n\n  void main() {\n    float minRes = min(uResolution.x, uResolution.y);\n    vec2 uv = (gl_FragCoord.xy * 2.0 - uResolution.xy) / minRes;\n    \n    vec2 p = uv * uScale;\n    float t = uTime;\n    \n    // Multi-layered domain warping with dynamic complexity\n    for(float i = 1.0; i < 20.0; i++) {\n        if(i >= uComplexity) break;\n        p *= rot(t * 0.08 + i * 0.15);\n        p += vec2(\n            sin(p.x * i + t),\n            cos(p.x * i - t)\n        ) * (uDistortion / i);\n    }\n    \n    // Wave flow blending with dynamic frequency\n    float flow1 = 0.5 + 0.5 * sin(p.x * (uFlowFrequency * 0.8) + t);\n    float flow2 = 0.5 + 0.5 * sin(p.y * uFlowFrequency + t * 1.1);\n    \n    // Mix theme colors (color1, color2, color3)\n    vec3 color = mix(uColor1, uColor2, flow1);\n    color = mix(color, uColor3, flow2);\n    \n    // Core glow\n    float dist = length(uv);\n    float glow = exp(-dist * 1.5);\n    color += uColor3 * glow * uGlowIntensity;\n    \n    // Dynamic contrast and saturation mapping\n    color = smoothstep(0.0, uContrast, color);\n    \n    gl_FragColor = vec4(color, 1.0);\n  }\n`;\n\ninterface SynthesisProps {\n  className?: string;\n  speed?: number;\n  color1?: string;\n  color2?: string;\n  color3?: string;\n  scale?: number;\n  complexity?: number;\n  distortion?: number;\n  glowIntensity?: number;\n  flowFrequency?: number;\n  contrast?: number;\n  backgroundColor?: string;\n}\n\nconst Effect = ({\n  speed,\n  color1,\n  color2,\n  color3,\n  scale,\n  complexity,\n  distortion,\n  glowIntensity,\n  flowFrequency,\n  contrast,\n}: Required<Omit<SynthesisProps, \"className\" | \"backgroundColor\">>) => {\n  const materialRef = useRef<THREE.ShaderMaterial>(null);\n\n  const uniforms = useMemo(\n    () => ({\n      uTime: { value: 0 },\n      uResolution: { value: new THREE.Vector2() },\n      uColor1: { value: new THREE.Color(color1) },\n      uColor2: { value: new THREE.Color(color2) },\n      uColor3: { value: new THREE.Color(color3) },\n      uScale: { value: scale },\n      uComplexity: { value: complexity },\n      uDistortion: { value: distortion },\n      uGlowIntensity: { value: glowIntensity },\n      uFlowFrequency: { value: flowFrequency },\n      uContrast: { value: contrast },\n    }),\n    []\n  );\n\n  useEffect(() => {\n    if (materialRef.current) {\n      materialRef.current.uniforms.uColor1.value.set(color1);\n      materialRef.current.uniforms.uColor2.value.set(color2);\n      materialRef.current.uniforms.uColor3.value.set(color3);\n      materialRef.current.uniforms.uScale.value = scale;\n      materialRef.current.uniforms.uComplexity.value = complexity;\n      materialRef.current.uniforms.uDistortion.value = distortion;\n      materialRef.current.uniforms.uGlowIntensity.value = glowIntensity;\n      materialRef.current.uniforms.uFlowFrequency.value = flowFrequency;\n      materialRef.current.uniforms.uContrast.value = contrast;\n    }\n  }, [\n    color1,\n    color2,\n    color3,\n    scale,\n    complexity,\n    distortion,\n    glowIntensity,\n    flowFrequency,\n    contrast,\n  ]);\n\n  useFrame((state) => {\n    if (materialRef.current) {\n      materialRef.current.uniforms.uTime.value =\n        state.clock.getElapsedTime() * speed;\n      materialRef.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={materialRef}\n        vertexShader={vertexShader}\n        fragmentShader={fragmentShader}\n        uniforms={uniforms}\n      />\n    </mesh>\n  );\n};\n\nexport default function Synthesis({\n  className,\n  speed = 0.4,\n  color1 = \"#0f172a\",\n  color2 = \"#3b0764\",\n  color3 = \"#0ea5e9\",\n  scale = 1.0,\n  complexity = 6.0,\n  distortion = 0.6,\n  glowIntensity = 0.4,\n  flowFrequency = 3.0,\n  contrast = 1.2,\n  backgroundColor = \"#000000\",\n}: SynthesisProps) {\n  return (\n    <div\n      className={cn(\n        \"absolute inset-0 w-full h-full pointer-events-none overflow-hidden\",\n        className\n      )}\n      style={{ backgroundColor }}\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          color1={color1}\n          color2={color2}\n          color3={color3}\n          scale={scale}\n          complexity={complexity}\n          distortion={distortion}\n          glowIntensity={glowIntensity}\n          flowFrequency={flowFrequency}\n          contrast={contrast}\n        />\n      </Canvas>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}