Ethereal Shadow Background
Atmospheric shadows that breathe and distort like fog rolling in. Build cinematic React backgrounds with advanced SVG filters, noise textures, TypeScript support, and smooth distortion effects for Next.js applications with shadcn/ui.
Powered by
Trying to implement atmospheric effects?
Join our Discord community for help from other developers.
Ever wanted your background to feel alive? Like it's breathing, shifting, casting shadows that dance on their own? This React component creates ethereal shadow effects that distort and animate using advanced SVG filters. It's not just a static overlay—it's fog rolling through your interface.
Atmospheric distortion effect
Watch shadows breathe and distort with SVG turbulence filters:
Built for React applications with TypeScript and Next.js. The distortion uses SVG feTurbulence and feDisplacementMap filters to create realistic shadow movement. Add noise texture for extra atmosphere, or keep it clean—your shadows, your vibe.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/ethereal-shadow.jsonnpx shadcn@latest add https://www.shadcn.io/registry/ethereal-shadow.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/ethereal-shadow.jsonbunx shadcn@latest add https://www.shadcn.io/registry/ethereal-shadow.jsonUsage
import { EtherealShadow } from "@/components/ui/ethereal-shadow";
export default function Hero() {
return (
<EtherealShadow
color="rgba(100, 50, 200, 0.8)"
animation={{ scale: 50, speed: 30 }}
noise={{ opacity: 0.3, scale: 2 }}
>
<div className="text-white p-8">
<h1>Your content floats above the shadows</h1>
</div>
</EtherealShadow>
);
}Why most shadow effects look fake
Most developers add box-shadow or overlay divs with opacity. Static, lifeless, predictable. Some try CSS animations with transforms, but it's just shapes sliding around. Real shadows distort, breathe, and respond to light sources.
This React component uses SVG displacement mapping—the same technique used in video games and film. The feTurbulence filter generates organic noise, while feDisplacementMap uses that noise to distort the shadow. Add Framer Motion for smooth animation loops, and suddenly your shadows feel atmospheric instead of artificial.
Features
- SVG displacement mapping for realistic shadow distortion
- Organic turbulence filters creating natural movement patterns
- Configurable animation intensity from subtle to dramatic
- Optional noise texture overlay adding cinematic grain
- TypeScript definitions for all animation and color props
- RGBA color support with full transparency control
- Hardware-accelerated animations via Framer Motion
- shadcn/ui compatible with proper z-index layering
API Reference
EtherealShadow
Main container component for the atmospheric shadow effect.
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "rgba(128, 128, 128, 1)" | Shadow color in RGBA format |
sizing | "fill" | "stretch" | "fill" | How the shadow mask fills the container |
animation | AnimationConfig | - | Animation intensity and speed settings |
noise | NoiseConfig | - | Noise texture overlay configuration |
className | string | - | Additional Tailwind CSS classes |
children | ReactNode | - | Content to display above the shadow effect |
Animation Configuration
type AnimationConfig = {
scale: number; // Intensity (1-100, higher = more distortion)
speed: number; // Speed (1-100, higher = faster movement)
};Noise Configuration
type NoiseConfig = {
opacity: number; // Texture visibility (0-1)
scale: number; // Texture density multiplier
};Common gotchas
Performance with complex filters: SVG displacement mapping is GPU-intensive. High scale values (80+) might lag on weak devices. Start with scale: 30, speed: 20 and adjust up.
Color format requirements: Must use RGBA strings like "rgba(255, 0, 0, 0.5)", not hex or named colors. The component needs alpha channel control for proper blending.
Z-index content layering: Your content needs to float above the shadow. The component handles this automatically, but custom positioning might interfere.
Animation memory leaks: The component cleans up automatically, but rapidly mounting/unmounting can cause issues. Use stable component keys when possible.
Mobile performance: Turbulence filters can be slow on older phones. Consider reducing animation scale or disabling on low-end devices with window.matchMedia.
You might also like
Explore other atmospheric background components for React applications:
Vortex
Swirling particle effects that create mesmerizing depth
Noise
Organic texture patterns with customizable grain effects
Waves
Fluid wave animations with natural motion
Aurora
Northern lights effect with smooth gradient animations
Bubble Background
Floating bubbles that merge with liquid physics
Gradient Animation
Smooth color transitions that flow across surfaces
Questions developers actually ask
React Background Dot Pattern
Minimalist dot grids that pulse like a heartbeat monitor. Build elegant React backgrounds with SVG patterns, optional glow effects, TypeScript support, and gradient masking for Next.js applications with shadcn/ui.
React Fireworks Background
Explosive celebrations that respond to your clicks like the Fourth of July went digital. Build interactive React backgrounds with canvas physics, particle explosions, TypeScript support, and click-to-launch fireworks for Next.js applications with shadcn/ui.