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>
This commit is contained in:
2026-03-02 02:21:44 +01:00
parent c9cd2d734d
commit c49493bb44
11 changed files with 19 additions and 211 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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 />;
}

View File

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

View File

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