From c49493bb44359ea2b28a7e98b46cb3c90d46b3b8 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Mon, 2 Mar 2026 02:21:44 +0100
Subject: [PATCH] perf: disable Sentry, remove grain overlay and shader
 gradient files

- Disable Sentry in all 3 configs (client/server/edge) - replayIntegration
  was recording every DOM mutation causing overhead in Chrome
- Remove grain-overlay div and its CSS (SVG feTurbulence + mix-blend-mode:overlay
  forces software compositing in Chrome on every frame)
- Remove mix-blend-multiply from BackgroundBlobs (prevents Chrome GPU compositing)
- Delete unused Grain.tsx, ShaderGradientBackground.tsx and its client wrapper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ._.env                                        | Bin 0 -> 4096 bytes
 .claude/settings.local.json                   |  12 ++
 app/components/Grain.tsx                      |  30 -----
 app/components/ShaderGradientBackground.tsx   | 112 ------------------
 .../ShaderGradientBackgroundClient.tsx        |  16 ---
 app/globals.css                               |  13 --
 app/layout.tsx                                |   1 -
 components/BackgroundBlobs.tsx                |   8 +-
 instrumentation-client.ts                     |  22 +---
 sentry.edge.config.ts                         |   8 +-
 sentry.server.config.ts                       |   8 +-
 11 files changed, 19 insertions(+), 211 deletions(-)
 create mode 100644 ._.env
 create mode 100644 .claude/settings.local.json
 delete mode 100644 app/components/Grain.tsx
 delete mode 100644 app/components/ShaderGradientBackground.tsx
 delete mode 100644 app/components/ShaderGradientBackgroundClient.tsx

diff --git a/._.env b/._.env
new file mode 100644
index 0000000000000000000000000000000000000000..ffa6093bb85cfe9e412fb5aae03c6c17e31f3c58
GIT binary patch
literal 4096
zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDJkFz{^v(m+1nBL)UWIUt(=a103vf+zv$
zV3+~K+-O=D5#plB`MG+D1qC^&dId%KWvO|IdC92^j7$s<W@cnMl*bpLX&vQ`hQMeD
zjE2By2#kinXb6mkz-S1JhQMeDjE2By2#kgR_7DJdHbEE+<U%qsixrAei}Op1l2aAZ
x@{6(+GV@AO^GY)F^AdA%Div~4(@GSQauV~hfqh}9t|3jK`XBBU83wuk{{eo;C>;O*

literal 0
HcmV?d00001

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..5b9970f
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git remote:*)",
+      "Bash(git pull:*)",
+      "Bash(git checkout:*)",
+      "Bash(git merge:*)",
+      "Bash(git push:*)",
+      "Bash(git add:*)"
+    ]
+  }
+}
diff --git a/app/components/Grain.tsx b/app/components/Grain.tsx
deleted file mode 100644
index b5dacd0..0000000
--- a/app/components/Grain.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-
-const Grain = () => {
-  return (
-    <div
-      className="pointer-events-none fixed inset-0 z-[9999] h-full w-full overflow-hidden"
-    >
-      <div 
-        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/grain.png')] bg-repeat opacity-[0.03] dark:opacity-[0.05]"
-        style={{ transform: 'translate3d(0, 0, 0)' }}
-      />
-      <motion.div
-        animate={{
-          x: [0, -50, 20, -10, 40, -20, 0],
-          y: [0, 20, -30, 10, -20, 30, 0],
-        }}
-        transition={{
-          duration: 0.5,
-          repeat: Infinity,
-          ease: "linear",
-        }}
-        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/grain.png')] bg-repeat opacity-[0.03] dark:opacity-[0.05]"
-      />
-    </div>
-  );
-};
-
-export default Grain;
diff --git a/app/components/ShaderGradientBackground.tsx b/app/components/ShaderGradientBackground.tsx
deleted file mode 100644
index 8f7240c..0000000
--- a/app/components/ShaderGradientBackground.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-"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;
diff --git a/app/components/ShaderGradientBackgroundClient.tsx b/app/components/ShaderGradientBackgroundClient.tsx
deleted file mode 100644
index 7c16a5a..0000000
--- a/app/components/ShaderGradientBackgroundClient.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import ShaderGradientBackground from "./ShaderGradientBackground";
-
-export default function ShaderGradientBackgroundClient() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  return <ShaderGradientBackground />;
-}
diff --git a/app/globals.css b/app/globals.css
index bacb671..10c0151 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,19 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Grain Effect */
-.grain-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9999;
-  pointer-events: none;
-  opacity: 0.04;
-  mix-blend-mode: overlay;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-}
 
 :root {
     /* Warm Brown & Off-White Palette */
diff --git a/app/layout.tsx b/app/layout.tsx
index f64d091..1c7a1a8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -34,7 +34,6 @@ export default async function RootLayout({
         <link rel="preconnect" href="https://i.scdn.co" crossOrigin="anonymous" />
       </head>
       <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
-        <div className="grain-overlay" aria-hidden="true" />
         <ClientProviders>{children}</ClientProviders>
       </body>
     </html>
diff --git a/components/BackgroundBlobs.tsx b/components/BackgroundBlobs.tsx
index 3cda60a..995d26d 100644
--- a/components/BackgroundBlobs.tsx
+++ b/components/BackgroundBlobs.tsx
@@ -16,28 +16,28 @@ const BackgroundBlobs = () => {
     <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
       {/* Mint blob - top left */}
       <motion.div
-        className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-liquid-mint/40 rounded-full blur-[60px] mix-blend-multiply"
+        className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-liquid-mint/40 rounded-full blur-[60px] opacity-70"
         animate={{ scale: [1, 1.15, 1] }}
         transition={{ duration: 40, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
       />
 
       {/* Lavender blob - top right */}
       <motion.div
-        className="absolute top-[10%] right-[-5%] w-[35vw] h-[35vw] bg-liquid-lavender/35 rounded-full blur-[60px] mix-blend-multiply"
+        className="absolute top-[10%] right-[-5%] w-[35vw] h-[35vw] bg-liquid-lavender/35 rounded-full blur-[60px] opacity-70"
         animate={{ scale: [1, 1.1, 1] }}
         transition={{ duration: 45, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
       />
 
       {/* Rose blob - bottom left */}
       <motion.div
-        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[60px] mix-blend-multiply"
+        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[60px] opacity-70"
         animate={{ scale: [1, 1.2, 1] }}
         transition={{ duration: 50, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
       />
 
       {/* Peach blob - middle right */}
       <motion.div
-        className="absolute top-[40%] right-[10%] w-[30vw] h-[30vw] bg-orange-200/30 rounded-full blur-[60px] mix-blend-multiply"
+        className="absolute top-[40%] right-[10%] w-[30vw] h-[30vw] bg-orange-200/30 rounded-full blur-[60px] opacity-70"
         animate={{ scale: [1, 1.25, 1] }}
         transition={{ duration: 55, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
       />
diff --git a/instrumentation-client.ts b/instrumentation-client.ts
index 5270674..cb49ef6 100644
--- a/instrumentation-client.ts
+++ b/instrumentation-client.ts
@@ -5,28 +5,8 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  // DSN from environment variable with fallback to wizard-provided value
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || "https://148e31ea874c60f3d2e0f70fd6701f6b@o4510751135105024.ingest.de.sentry.io/4510751388926032",
-
-  // Add optional integrations for additional features
-  integrations: [Sentry.replayIntegration()],
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1,
-  // Enable logs to be sent to Sentry
-  enableLogs: true,
-
-  // Define how likely Replay events are sampled.
-  // This sets the sample rate to be 10%. You may want this to be 100% while
-  // in development and sample at a lower rate in production
-  replaysSessionSampleRate: 0.1,
-
-  // Define how likely Replay events are sampled when an error occurs.
-  replaysOnErrorSampleRate: 1.0,
-
-  // Enable sending user PII (Personally Identifiable Information)
-  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
-  sendDefaultPii: true,
+  enabled: false,
 });
 
 export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/sentry.edge.config.ts b/sentry.edge.config.ts
index 99a4efe..4fcc40c 100644
--- a/sentry.edge.config.ts
+++ b/sentry.edge.config.ts
@@ -5,12 +5,6 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  // DSN from environment variable with fallback to wizard-provided value
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || "https://148e31ea874c60f3d2e0f70fd6701f6b@o4510751135105024.ingest.de.sentry.io/4510751388926032",
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
+  enabled: false,
 });
diff --git a/sentry.server.config.ts b/sentry.server.config.ts
index f4975bf..da0c51c 100644
--- a/sentry.server.config.ts
+++ b/sentry.server.config.ts
@@ -5,12 +5,6 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  // DSN from environment variable with fallback to wizard-provided value
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || "https://148e31ea874c60f3d2e0f70fd6701f6b@o4510751135105024.ingest.de.sentry.io/4510751388926032",
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
+  enabled: false,
 });