blur while animating
This have nothing to do with wasp, I want make the AppNavBar a little dynamique when the user scroll but the header becomes blur, any suggetion? context


message.txt7.14KB
// ... existing code ...
return (
<>
<div className="h-16" />
<motion.header
initial={{ y: 0 }}
animate={{
y: 0,
scale: isScrolled ? 0.98 : 1,
}}
transition={{ duration: 0.4, ease: "easeInOut" }} {/* Transición más suave */}
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-in-out
${isScrolled
? 'mx-auto max-w-7xl mt-2 rounded-2xl border border-gray-800/30 bg-black/70 backdrop-blur-xl backdrop-saturate-150 shadow-xl shadow-purple-950/30'
: 'w-full bg-black'
}`}
>
<nav className="container mx-auto px-4 py-3">
// ... existing code ...