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/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>