castad
/
o2o-infinith-demo
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: balance Hero blob sizes and opacity for symmetric layout 

Reduced blob size (w-64→w-48), lowered opacity (30%→20%), used
percentage positioning (left-10→left-[10%]), and wrapped in
overflow-clip container. Eliminates visual weight asymmetry.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
claude/bold-hawking
Haewon Kam 2026-04-03 23:45:28 +09:00
parent 2b7494305a
commit 7154e76bc4
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Hero.tsx
View File

@ -78,10 +78,12 @@ export default function Hero() {
</motion.div> </motion.div>
</div> </div>
{/* Decorative elements */} {/* Decorative elements — symmetric and contained */}
<div className="absolute top-1/4 left-10 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob pointer-events-none"></div> <div className="absolute inset-0 overflow-clip pointer-events-none">
<div className="absolute top-1/3 right-10 w-64 h-64 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 pointer-events-none"></div> <div className="absolute top-1/4 left-[10%] w-48 h-48 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
<div className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-64 h-64 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 pointer-events-none"></div> <div className="absolute top-1/3 right-[10%] w-48 h-48 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
<div className="absolute -bottom-8 left-1/2 -translate-x-1/2 w-48 h-48 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
</div>
</section> </section>
); );
} }