portfolio/app/components/ShaderGradientBackground.tsx

"use client";

import React from "react";
import { ShaderGradientCanvas, ShaderGradient } from "@shadergradient/react";

const ShaderGradientBackground = () => {
  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        zIndex: -1,
        filter: "blur(150px)",
        opacity: 0.65,
        pointerEvents: "none",
      }}
    >
      <ShaderGradientCanvas
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
        }}
      >
        {/* Sphere 1 - Links oben */}
        <ShaderGradient
          animate="on"
          axesHelper="off"
          brightness={1.3}
          cAzimuthAngle={180}
          cDistance={3.6}
          cPolarAngle={90}
          cameraZoom={1}
          color1="#b01040"
          color2="#b04a17"
          color3="#e167c5"
          destination="onCanvas"
          embedMode="off"
          envPreset="city"
          format="gif"
          fov={45}
          frameRate={10}
          gizmoHelper="hide"
          grain="on"
          lightType="3d"
          pixelDensity={2.9}
          positionX={-2.5}
          positionY={1.5}
          positionZ={0}
          range="disabled"
          rangeEnd={40}
          rangeStart={0}
          reflection={0.1}
          rotationX={0}
          rotationY={15}
          rotationZ={50}
          shader="defaults"
          type="sphere"
          uAmplitude={6.0}
          uDensity={0.8}
          uFrequency={5.5}
          uSpeed={0.5}
          uStrength={5.0}
          uTime={0}
          wireframe={false}
        />
        
        {/* Sphere 2 - Rechts mitte */}
        <ShaderGradient
          animate="on"
          axesHelper="off"
          brightness={1.25}
          cAzimuthAngle={180}
          cDistance={3.6}
          cPolarAngle={90}
          cameraZoom={1}
          color1="#e167c5"
          color2="#b01040"
          color3="#b04a17"
          destination="onCanvas"
          embedMode="off"
          envPreset="city"
          format="gif"
          fov={45}
          frameRate={10}
          gizmoHelper="hide"
          grain="on"
          lightType="3d"
          pixelDensity={2.9}
          positionX={2.0}
          positionY={-0.5}
          positionZ={-0.5}
          range="disabled"
          rangeEnd={40}
          rangeStart={0}
          reflection={0.1}
          rotationX={0}
          rotationY={25}
          rotationZ={70}
          shader="defaults"
          type="sphere"
          uAmplitude={5.5}
          uDensity={0.9}
          uFrequency={4.8}
          uSpeed={0.45}
          uStrength={4.8}
          uTime={10}
          wireframe={false}
        />
        
        {/* Sphere 3 - Unten links */}
        <ShaderGradient
          animate="on"
          axesHelper="off"
          brightness={1.2}
          cAzimuthAngle={180}
          cDistance={3.6}
          cPolarAngle={90}
          cameraZoom={1}
          color1="#b04a17"
          color2="#e167c5"
          color3="#b01040"
          destination="onCanvas"
          embedMode="off"
          envPreset="city"
          format="gif"
          fov={45}
          frameRate={10}
          gizmoHelper="hide"
          grain="on"
          lightType="3d"
          pixelDensity={2.9}
          positionX={-0.5}
          positionY={-2.0}
          positionZ={0.3}
          range="disabled"
          rangeEnd={40}
          rangeStart={0}
          reflection={0.1}
          rotationX={0}
          rotationY={20}
          rotationZ={60}
          shader="defaults"
          type="sphere"
          uAmplitude={5.8}
          uDensity={0.7}
          uFrequency={6.0}
          uSpeed={0.52}
          uStrength={4.9}
          uTime={20}
          wireframe={false}
        />
      </ShaderGradientCanvas>
    </div>
  );
};

export default ShaderGradientBackground;