Ethereal Shadow Background

React atmospheric shadow background with breathing fog effects. Cinematic SVG filters and noise textures with TypeScript and shadcn/ui.

Framer Motion

React

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:

Loading component...

'use client';import React, { useRef, useId, useEffect, CSSProperties } from 'react';import { animate, useMotionValue, AnimationPlaybackControls } from 'framer-motion';import { cn } from '@/lib/utils';// Type definitionsinterface ResponsiveImage {    src: string;    alt?: string;    srcSet?: string;}interface AnimationConfig {    preview?: boolean;    scale: number;    speed: number;}interface NoiseConfig {    opacity: number;    scale: number;}export interface EtheralShadowProps {    type?: 'preset' | 'custom';    presetIndex?: number;    customImage?: ResponsiveImage;    sizing?: 'fill' | 'stretch';    color?: string;    animation?: AnimationConfig;    noise?: NoiseConfig;    style?: CSSProperties;    className?: string;    children?: React.ReactNode;}function mapRange(    value: number,    fromLow: number,    fromHigh: number,    toLow: number,    toHigh: number): number {    if (fromLow === fromHigh) {        return toLow;    }    const percentage = (value - fromLow) / (fromHigh - fromLow);    return toLow + percentage * (toHigh - toLow);}const useInstanceId = (): string => {    const id = useId();    const cleanId = id.replace(/:/g, "");    const instanceId = `shadowoverlay-${cleanId}`;    return instanceId;};export function EtheralShadow({    sizing = 'fill',    color = 'rgba(128, 128, 128, 1)',    animation,    noise,    style,    className,    children}: EtheralShadowProps) {    const id = useInstanceId();    const animationEnabled = animation && animation.scale > 0;    const feColorMatrixRef = useRef<SVGFEColorMatrixElement>(null);    const hueRotateMotionValue = useMotionValue(180);    const hueRotateAnimation = useRef<AnimationPlaybackControls | null>(null);    const displacementScale = animation ? mapRange(animation.scale, 1, 100, 20, 100) : 0;    const animationDuration = animation ? mapRange(animation.speed, 1, 100, 1000, 50) : 1;    useEffect(() => {        if (feColorMatrixRef.current && animationEnabled) {            if (hueRotateAnimation.current) {                hueRotateAnimation.current.stop();            }            hueRotateMotionValue.set(0);            hueRotateAnimation.current = animate(hueRotateMotionValue, 360, {                duration: animationDuration / 25,                repeat: Infinity,                repeatType: "loop",                repeatDelay: 0,                ease: "linear",                delay: 0,                onUpdate: (value: number) => {                    if (feColorMatrixRef.current) {                        feColorMatrixRef.current.setAttribute("values", String(value));                    }                }            });            return () => {                if (hueRotateAnimation.current) {                    hueRotateAnimation.current.stop();                }            };        }    }, [animationEnabled, animationDuration, hueRotateMotionValue]);    return (        <div            className={cn("relative overflow-hidden w-full h-full", className)}            style={style}        >            <div                style={{                    position: "absolute",                    inset: -displacementScale,                    filter: animationEnabled ? `url(#${id}) blur(4px)` : "none"                }}            >                {animationEnabled && (                    <svg style={{ position: "absolute" }}>                        <defs>                            <filter id={id}>                                <feTurbulence                                    result="undulation"                                    numOctaves="2"                                    baseFrequency={`${mapRange(animation.scale, 0, 100, 0.001, 0.0005)},${mapRange(animation.scale, 0, 100, 0.004, 0.002)}`}                                    seed="0"                                    type="turbulence"                                />                                <feColorMatrix                                    ref={feColorMatrixRef}                                    in="undulation"                                    type="hueRotate"                                    values="180"                                />                                <feColorMatrix                                    in="dist"                                    result="circulation"                                    type="matrix"                                    values="4 0 0 0 1  4 0 0 0 1  4 0 0 0 1  1 0 0 0 0"                                />                                <feDisplacementMap                                    in="SourceGraphic"                                    in2="circulation"                                    scale={displacementScale}                                    result="dist"                                />                                <feDisplacementMap                                    in="dist"                                    in2="undulation"                                    scale={displacementScale}                                    result="output"                                />                            </filter>                        </defs>                    </svg>                )}                <div                    style={{                        backgroundColor: color,                        maskImage: `url('https://framerusercontent.com/images/ceBGguIpUU8luwByxuQz79t7To.png')`,                        maskSize: sizing === "stretch" ? "100% 100%" : "cover",                        maskRepeat: "no-repeat",                        maskPosition: "center",                        width: "100%",                        height: "100%"                    }}                />            </div>            {children && (                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center z-10">                    {children}                </div>            )}            {noise && noise.opacity > 0 && (                <div                    style={{                        position: "absolute",                        inset: 0,                        backgroundImage: `url("https://framerusercontent.com/images/g0QcWrxr87K0ufOxIUFBakwYA8.png")`,                        backgroundSize: noise.scale * 200,                        backgroundRepeat: "repeat",                        opacity: noise.opacity / 2                    }}                />            )}        </div>    );}

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.json

npx shadcn@latest add https://www.shadcn.io/registry/ethereal-shadow.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ethereal-shadow.json

bunx shadcn@latest add https://www.shadcn.io/registry/ethereal-shadow.json

Usage

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.

Explore other atmospheric background components for React applications:

Ethereal Shadow Background

Atmospheric distortion effect

Installation

Usage

Why most shadow effects look fake

Features

API Reference

EtherealShadow

Animation Configuration

Noise Configuration

Common gotchas

You might also like

Vortex

Noise

Waves

Aurora

Bubble Background

Gradient Animation

Questions developers actually ask

On this page

Ethereal Shadow Background

Reactetheral-shadow

Vortex

Noise

Waves

Aurora

Bubble Background

Gradient Animation

How do I tune the animation settings?

Can I use gradients instead of solid colors?

How do I turn off the noise texture?

Why is it laggy on my device?

Can I make it static without animation?

How do I layer multiple shadow effects?

On this page