perf: remove WebGL ShaderGradient and reduce BackgroundBlobs blur

ShaderGradientBackground used 3 full-screen Three.js WebGL canvases with a blur(150px) CSS filter, crashing Lighthouse and causing severe lag in Chrome. BackgroundBlobs also had 7 elements with blur(100-120px) and per-frame mouse spring tracking compounding the issue. - Remove ShaderGradientBackground from layout (WebGL not needed for a blur effect) - Reduce BackgroundBlobs blur from 100-120px to 60px - Remove mouse tracking spring animations from BackgroundBlobs - Reduce to 4 blobs (remove 3 least visible) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-02 01:54:48 +01:00
parent ef72f5fc58
commit c9cd2d734d
2 changed files with 13 additions and 139 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,7 +3,6 @@ import { Metadata } from "next";
 import { Inter, Playfair_Display } from "next/font/google";
 import React from "react";
 import ClientProviders from "./components/ClientProviders";
-import ShaderGradientBackgroundClient from "./components/ShaderGradientBackgroundClient";
 import { cookies } from "next/headers";
 import { getBaseUrl } from "@/lib/seo";

@@ -36,7 +35,6 @@ export default async function RootLayout({
      </head>
      <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
        <div className="grain-overlay" aria-hidden="true" />
-        <ShaderGradientBackgroundClient />
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>