Noise Texture

An animated noise/grain texture overlay effect. Adds a film grain aesthetic to any background with customizable grain size, animation speed, and blend modes.

Install

pnpm dlx shadcn@latest add "https://componentry.harshjdhv.com/r/noise-texture.json"

Examples

Default

Noise Texture

import { NoiseTexture } from "@/components/ui/noise-texture"

<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-gradient-to-br from-violet-500 to-pink-500">
  <NoiseTexture />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Noise Texture</h3>
  </div>
</div>

Coarse Grain

import { NoiseTexture } from "@/components/ui/noise-texture"

<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-gradient-to-br from-emerald-500 to-cyan-500">
  <NoiseTexture 
    grain="coarse"
    opacity={0.2}
  />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Coarse Grain</h3>
  </div>
</div>

Static Noise

import { NoiseTexture } from "@/components/ui/noise-texture"

<div className="relative h-[300px] w-full overflow-hidden rounded-xl border bg-gradient-to-br from-orange-500 to-red-500">
  <NoiseTexture 
    grain="fine"
    opacity={0.25}
    animate={false}
  />
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-bold text-white">Static Noise</h3>
  </div>
</div>

Props

opacity

Noise overlay opacity from 0 to 1 (default: 0.15)

speed

Animation frames per second (default: 10)

grain

Grain size: "fine" | "medium" | "coarse" (default: "medium")

blend

CSS blend mode: "overlay" | "soft-light" | "multiply" | "screen" (default: "overlay")

animate

Enable/disable animation (default: true)