113 lines
2.6 KiB
TypeScript
113 lines
2.6 KiB
TypeScript
"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
|
|
control="props"
|
|
type="sphere"
|
|
animate="off"
|
|
brightness={1.3}
|
|
cAzimuthAngle={180}
|
|
cDistance={3.6}
|
|
cPolarAngle={90}
|
|
cameraZoom={1}
|
|
color1="#b01040"
|
|
color2="#b04a17"
|
|
color3="#e167c5"
|
|
positionX={-2.5}
|
|
positionY={1.5}
|
|
positionZ={0}
|
|
rotationX={0}
|
|
rotationY={15}
|
|
rotationZ={50}
|
|
uAmplitude={6.0}
|
|
uDensity={0.8}
|
|
uFrequency={5.5}
|
|
uSpeed={0.5}
|
|
uStrength={5.0}
|
|
/>
|
|
|
|
{/* Sphere 2 - Rechts mitte */}
|
|
<ShaderGradient
|
|
control="props"
|
|
type="sphere"
|
|
animate="off"
|
|
brightness={1.25}
|
|
cAzimuthAngle={180}
|
|
cDistance={3.6}
|
|
cPolarAngle={90}
|
|
cameraZoom={1}
|
|
color1="#e167c5"
|
|
color2="#b01040"
|
|
color3="#b04a17"
|
|
positionX={2.0}
|
|
positionY={-0.5}
|
|
positionZ={-0.5}
|
|
rotationX={0}
|
|
rotationY={25}
|
|
rotationZ={70}
|
|
uAmplitude={5.5}
|
|
uDensity={0.9}
|
|
uFrequency={4.8}
|
|
uSpeed={0.45}
|
|
uStrength={4.8}
|
|
/>
|
|
|
|
{/* Sphere 3 - Unten links */}
|
|
<ShaderGradient
|
|
control="props"
|
|
type="sphere"
|
|
animate="off"
|
|
brightness={1.2}
|
|
cAzimuthAngle={180}
|
|
cDistance={3.6}
|
|
cPolarAngle={90}
|
|
cameraZoom={1}
|
|
color1="#b04a17"
|
|
color2="#e167c5"
|
|
color3="#b01040"
|
|
positionX={-0.5}
|
|
positionY={-2.0}
|
|
positionZ={0.3}
|
|
rotationX={0}
|
|
rotationY={20}
|
|
rotationZ={60}
|
|
uAmplitude={5.8}
|
|
uDensity={0.7}
|
|
uFrequency={6.0}
|
|
uSpeed={0.52}
|
|
uStrength={4.9}
|
|
/>
|
|
</ShaderGradientCanvas>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ShaderGradientBackground;
|