Features

• ✨ Animated fluid effects with framer-motion
• 🎨 Customizable colors and opacity
• ⚙️ Configurable animation speed and scale
• 🎭 Noise overlay effects
• 📱 Fully responsive design
• ♿ Accessible SVG-based implementation

Configuration Options

Usage

import { EtherealShadow } from '@/components/ui/etheral-shadow';

export function MyComponent() {
  return (
    <div className="w-full h-screen">
      <EtherealShadow
        color="rgba(201, 168, 76, 0.6)"
        animation={{ scale: 100, speed: 90 }}
        noise={{ opacity: 1, scale: 1.2 }}
        sizing="fill"
      />
    </div>
  );
}

Use Cases

• 🌟 Premium hero sections
• 💼 Executive/leadership pages
• 🎬 Video backgrounds
• 🎨 Portfolio showcases
• ✨ Special landing pages
• 🎭 Brand experiences