This code implements a visually appealing animated fuzzy overlay effect using React and Framer Motion. It solves the problem of adding a subtle, attention-grabbing background effect without being distracting. The overlay subtly shifts its position, creating a sense of movement and depth.
Here's how it works:
FuzzyOverlayExample Component: This is the main component that renders both the content (ExampleContent) and the fuzzy overlay (FuzzyOverlay). Crucially, it wraps both in a div with relative positioning and overflow-hidden to ensure the overlay is correctly clipped.FuzzyOverlay Component: This component creates the overlay using motion.div from Framer Motion. It utilizes the initial, animate, and transition properties to control the animation. The overlay's image is set using a background image (black-noise.png or noise.png). The animation smoothly translates the overlay back and forth, creating a subtle, continuous movement. The pointer-events-none class prevents the overlay from interfering with user interactions with the content below. The absolute positioning and -inset-[100%] ensure the overlay extends beyond the visible area, creating the fuzzy effect. The opacity is set to 15% for a subtle look.ExampleContent Component: This component renders the main content of the page, including text, buttons, and styling. It's a visually simple design to highlight the overlay effect.Libraries and Concepts:
Use Cases:
Example Scenarios:
Note: The code requires two PNG images (black-noise.png and noise.png) for the background. You can find links to download these images within the FuzzyOverlay component's comments.
import FuzzyOverlay from "@/components/ui/animated-fuzzy-overlay-effect";
export default function DemoOne() {
return <FuzzyOverlay />;
}