Etheral Shadow

Animated shadow overlay effects with SVG filters and noise textures. Perfect for React applications requiring atmospheric backgrounds with Next.js integration and TypeScript support.

Framer Motion

React

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

Installation

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

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

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

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

Features

Advanced SVG filters creating realistic shadow distortion with animated turbulence effects
Configurable animations using Framer Motion with adjustable speed and scale parameters
Optional noise texture overlay adding visual depth and atmospheric grain effects
Customizable RGBA colors supporting any color value with transparency control
Flexible content rendering allowing any React content within the shadow effect
TypeScript support with complete interface definitions for reliable integration
Performance optimized using efficient animation loops with proper cleanup
Responsive design adapting automatically to container dimensions and sizing modes

Examples

Purple Variant

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

Without Noise

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

Use Cases

This free open source React component works well for:

Hero sections - Atmospheric overlay effects for landing pages built with Next.js
Creative portfolios - Artistic shadow effects showcasing design work using TypeScript
Gaming interfaces - Immersive background effects for game menus and screens
Product presentations - Dramatic overlay effects highlighting key features using shadcn/ui
Marketing sites - Eye-catching background effects that maintain content readability
App onboarding - Engaging visual effects during user registration flows using Tailwind CSS

API Reference

EtheralShadow Props

Prop	Type	Default	Description
`color`	`string`	`"rgba(128, 128, 128, 1)"`	Background color of the shadow effect
`sizing`	`"fill" \| "stretch"`	`"fill"`	How the mask image should be sized
`animation`	`AnimationConfig`	-	Animation configuration object
`noise`	`NoiseConfig`	-	Noise texture configuration
`className`	`string`	-	Additional CSS classes
`style`	`CSSProperties`	-	Custom inline styles
`children`	`ReactNode`	-	Content to render inside the effect

AnimationConfig

Prop	Type	Default	Description
`scale`	`number`	-	Animation intensity (1-100)
`speed`	`number`	-	Animation speed (1-100)

NoiseConfig

Prop	Type	Default	Description
`opacity`	`number`	-	Noise overlay opacity (0-1)
`scale`	`number`	-	Noise texture scale multiplier

Implementation Notes

Component uses advanced SVG filters for realistic shadow distortion effects
Animation parameters: scale (1-100) controls intensity, speed (1-100) controls timing
Colors must be provided as RGBA values (e.g., "rgba(128, 128, 128, 1)")
Noise texture can be configured with opacity (0-1) and scale multiplier
Content is automatically centered within the shadow effect container
Uses Framer Motion's animate function for optimal performance with hardware acceleration
Includes automatic cleanup to prevent memory leaks on component unmount
Compatible with shadcn/ui design system and Tailwind CSS styling
Consider adding prefers-reduced-motion support for accessibility compliance

Reactetheral-shadow

Reactetheral-shadow

Reactetheral-shadow

On this page