denshooter
c9cd2d734d
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>
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const BackgroundBlobs = () => {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<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"
|
|
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"
|
|
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"
|
|
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"
|
|
animate={{ scale: [1, 1.25, 1] }}
|
|
transition={{ duration: 55, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BackgroundBlobs;
|