Add shader gradient background with halo effect

- Installed @shadergradient/react, three, and @types/three - Created ShaderGradientBackground component with custom gradient settings - Integrated background into root layout with blur effect (120px) and reduced opacity (0.5) - Adjusted body background to work harmoniously with shader gradient - Used sphere type with pink/orange gradient colors (#b01040, #b04a17, #e167c5) - Configured animation, grain, and lighting for atmospheric effect
2026-01-27 01:25:02 +01:00
parent 9266b22fb4
commit a814a7cab9
6 changed files with 160 additions and 14 deletions
--- a/app/components/ShaderGradientBackground.tsx
+++ b/app/components/ShaderGradientBackground.tsx
@@ -0,0 +1,76 @@
+"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(120px)",
+        opacity: 0.5,
+        pointerEvents: "none",
+      }}
+    >
+      <ShaderGradientCanvas
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <ShaderGradient
+          animate="on"
+          axesHelper="off"
+          brightness={1.2}
+          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={-1.4}
+          positionY={0}
+          positionZ={0}
+          range="disabled"
+          rangeEnd={40}
+          rangeStart={0}
+          reflection={0.1}
+          rotationX={0}
+          rotationY={10}
+          rotationZ={50}
+          shader="defaults"
+          type="sphere"
+          uAmplitude={4.2}
+          uDensity={0.8}
+          uFrequency={5.5}
+          uSpeed={0.4}
+          uStrength={4.6}
+          uTime={0}
+          wireframe={false}
+        />
+      </ShaderGradientCanvas>
+    </div>
+  );
+};
+
+export default ShaderGradientBackground;
--- a/app/globals.css
+++ b/app/globals.css
@@ -27,7 +27,7 @@
 }

 body {
-    background-color: var(--background);
+    background: linear-gradient(135deg, rgba(250, 248, 243, 0.95) 0%, rgba(250, 248, 243, 0.92) 100%);
    color: var(--foreground);
    font-family: "Inter", sans-serif;
    margin: 0;
@@ -36,6 +36,7 @@ body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
+    position: relative;
 }

 /* Custom Selection */
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import ClientProviders from "./components/ClientProviders";
 import { cookies } from "next/headers";
 import { getBaseUrl } from "@/lib/seo";
+import ShaderGradientBackground from "./components/ShaderGradientBackground";

 const inter = Inter({
  variable: "--font-inter",
@@ -33,6 +34,7 @@ export default async function RootLayout({
        <meta charSet="utf-8" />
      </head>
      <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
+        <ShaderGradientBackground />
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>