Mann.digital logo
Mann.digital
← Back

Ethereal Shadows Showcase

Ethereal Shadows Component

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

color: "rgba(201, 168, 76, 0.6)"
animation: { scale: 100, speed: 90 }
noise: { opacity: 1, scale: 1.2 }
sizing: "fill" | "stretch"

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
Return to Home