Noisy Background
A background overlay with animated noisy effect
CSS
Tailwind CSS
React
Next.js
Demo
Noisy Background
Background opacity: 0.2
Installation
This component needs an image as base background. You can find it here on Github.
Copy and paste the following code into your project.
import { cn } from "@/lib/cn";interface NoisyBackgroundProps { className?: string; disableAnimation?: boolean;}const NoisyBackground: React.FC<NoisyBackgroundProps> = ({ className, disableAnimation }) => { return ( <div className={cn( "pointer-events-none fixed inset-[0%] flex items-center justify-center z-[9999] overflow-hidden", className )} > <div style={{ backgroundImage: "url('/assets/noisy-background/noisy_texture.webp')", flex: "none", width: "300%", maxWidth: "none", height: "300%", position: "absolute", backgroundSize: "256px", animation: disableAnimation ? "none" : "noise 1s steps(1) infinite", }} ></div> </div> );};export default NoisyBackground; @keyframes noise { 0%, 100% { background-position: 0 0; } 10% { background-position: -5% -10%; } 20% { background-position: -15% 5%; } 30% { background-position: 7% -25%; } 40% { background-position: 20% 25%; } 50% { background-position: -25% 10%; } 60% { background-position: 15% 5%; } 70% { background-position: 0% 15%; } 80% { background-position: 25% 35%; } 90% { background-position: -10% 10%; } }Usage
import NoisyBackground from "@/components/noisy-background";<NoisyBackground /> /* Global Background */
<NoisyBackground className="absolute" /> /* Not global but relative to parent */
<NoisyBackground disableAnimation /> /* With disabled animation */Props
| Prop | Type | Default Value | Description |
|---|---|---|---|
| className? | string | - | Additional classes for the background |
| disableAnimation? | boolean | false | Whether the animation is disabled |