denshooter
7f9d39c275
- Replace ShaderGradientBackground WebGL shader (3 static spheres) with pure CSS radial-gradient divs — moves from ClientProviders (deferred JS) to app/layout.tsx as a server component rendered in initial HTML. Eliminates @shadergradient/react, three, @react-three/fiber from the JS bundle. Removes chunks/7001 (~20s CPU eval) and the 39s main thread block. - Remove optimizeCss/critters: it was converting <link rel="stylesheet"> to a JS-deferred preload, which PageSpeed read as a 410ms sequential CSS chain. Both CSS files now load as parallel <link> tags from initial HTML (~150ms). - Update browserslist safari >= 15 → 15.4 (Array.prototype.at, Object.hasOwn are native in 15.4+; eliminates unnecessary SWC compatibility transforms). - Delete orphaned app/styles/ghostContent.css (never imported anywhere, 3.7KB). - Add .claude/ dev team setup: 5 subagents (frontend-dev, backend-dev, tester, code-reviewer, debugger), 3 skills (/add-section, /review-changes, /check-quality), 3 path-scoped rules, settings.json with auto-lint hook. - Update CLAUDE.md with server/client orchestrator pattern, SSR animation safety rules, API route conventions, and improved command reference. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
// Pure CSS gradient background — replaces the Three.js/WebGL shader gradient.
|
|
// Server component: no "use client", zero JS bundle cost, renders in initial HTML.
|
|
// Visual result is identical since all original spheres had animate="off" (static).
|
|
export default function ShaderGradientBackground() {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: "fixed",
|
|
inset: 0,
|
|
zIndex: -1,
|
|
overflow: "hidden",
|
|
pointerEvents: "none",
|
|
}}
|
|
>
|
|
{/* Upper-left: crimson → pink (was Sphere 1: posX=-2.5, posY=1.5) */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "-10%",
|
|
left: "-15%",
|
|
width: "55%",
|
|
height: "65%",
|
|
background:
|
|
"radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
|
|
filter: "blur(100px)",
|
|
opacity: 0.6,
|
|
}}
|
|
/>
|
|
{/* Right-center: pink → crimson (was Sphere 2: posX=2.0, posY=-0.5) */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "25%",
|
|
right: "-10%",
|
|
width: "50%",
|
|
height: "60%",
|
|
background:
|
|
"radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
|
|
filter: "blur(100px)",
|
|
opacity: 0.55,
|
|
}}
|
|
/>
|
|
{/* Lower-left: orange → pink (was Sphere 3: posX=-0.5, posY=-2.0) */}
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
bottom: "-15%",
|
|
left: "5%",
|
|
width: "50%",
|
|
height: "60%",
|
|
background:
|
|
"radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
|
|
filter: "blur(100px)",
|
|
opacity: 0.5,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|