Vitrine des ombres éthérées

Composant Ombres éthérées

Caractéristiques

✨ Effets fluides animés avec framer-motion
🎨 Couleurs et opacité personnalisables
⚙️ Vitesse et échelle d'animation configurables
🎭 Effets de superposition de bruit
📱 Conception entièrement réactive
♿ Implémentation accessible basée sur SVG

Options de configuration

color: "rgba(201, 168, 76, 0.6)"

animation: { échelle : 100, vitesse : 90 }

noise: { opacité : 1, échelle : 1,2 }

sizing: "remplir" | "étirer"

Utilisation

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>
  );
}

Cas d'utilisation

🌟 Sections de héros premium
💼 Pages de direction/leadership
🎬 Arrière-plans vidéo
🎨 Vitrines de portfolio
✨ Pages de destination spéciales
🎭 Expériences de marque

Retour à la maison