Docs/Noise Texture

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.

Installation

$pnpm dlx shadcn@latest add @componentry/noise-texture

Usage

API Reference

PropTypeDefault
opacityNoise overlay opacity from 0 to 1.
number0.15
speedAnimation frames per second.
number10
grainGrain size preset.
"fine" | "medium" | "coarse""medium"
blendCSS blend mode for the noise overlay.
"overlay" | "soft-light" | "multiply" | "screen""overlay"
animateEnable/disable animation.
booleantrue

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv

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>