Noise

Animated grain texture overlays with customizable patterns. Perfect for React applications requiring film-like visual effects with Next.js integration and TypeScript support.

React

Loading component...

'use client';import { useRef, useEffect } from 'react';import { cn } from '@/lib/utils';export interface NoiseProps {  patternSize?: number;  patternScaleX?: number;  patternScaleY?: number;  patternRefreshInterval?: number;  patternAlpha?: number;  className?: string;}export function Noise({  patternSize = 250,  patternScaleX = 1,  patternScaleY = 1,  patternRefreshInterval = 2,  patternAlpha = 15,  className,}: NoiseProps) {  const grainRef = useRef<HTMLCanvasElement>(null);  useEffect(() => {    const canvas = grainRef.current;    if (!canvas) return;    const ctx = canvas.getContext('2d');    if (!ctx) return;    let frame = 0;    let animationId: number;    const patternCanvas = document.createElement('canvas');    patternCanvas.width = patternSize;    patternCanvas.height = patternSize;    const patternCtx = patternCanvas.getContext('2d');    if (!patternCtx) return;    const patternData = patternCtx.createImageData(patternSize, patternSize);    const patternPixelDataLength = patternSize * patternSize * 4;    const resize = () => {      canvas.width = window.innerWidth * window.devicePixelRatio;      canvas.height = window.innerHeight * window.devicePixelRatio;      ctx.scale(patternScaleX, patternScaleY);    };    const updatePattern = () => {      for (let i = 0; i < patternPixelDataLength; i += 4) {        const value = Math.random() * 255;        patternData.data[i] = value;        patternData.data[i + 1] = value;        patternData.data[i + 2] = value;        patternData.data[i + 3] = patternAlpha;      }      patternCtx.putImageData(patternData, 0, 0);    };    const drawGrain = () => {      ctx.clearRect(0, 0, canvas.width, canvas.height);      const pattern = ctx.createPattern(patternCanvas, 'repeat');      if (pattern) {        ctx.fillStyle = pattern;        ctx.fillRect(0, 0, canvas.width, canvas.height);      }    };    const loop = () => {      if (frame % patternRefreshInterval === 0) {        updatePattern();        drawGrain();      }      frame++;      animationId = window.requestAnimationFrame(loop);    };    const handleResize = () => {      resize();    };    window.addEventListener('resize', handleResize);    resize();    loop();    return () => {      window.removeEventListener('resize', handleResize);      if (animationId) {        window.cancelAnimationFrame(animationId);      }    };  }, [patternSize, patternScaleX, patternScaleY, patternRefreshInterval, patternAlpha]);  return (    <canvas      className={cn('absolute inset-0 w-full h-full', className)}      ref={grainRef}    />  );}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/noise.json

npx shadcn@latest add https://www.shadcn.io/registry/noise.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/noise.json

bunx shadcn@latest add https://www.shadcn.io/registry/noise.json

Features

Canvas-based grain animation with customizable pattern size, scale, and refresh rate parameters
High-performance rendering using HTML5 Canvas and requestAnimationFrame for smooth 60fps animation
Responsive adaptation automatically adjusting to window resize events and container changes
CSS blend mode compatibility working seamlessly with mix-blend-mode for creative visual effects
Configurable opacity control using patternAlpha parameter for precise transparency adjustment
TypeScript support with fully typed component interface for reliable integration
Performance optimized using efficient Canvas operations and minimal memory allocation
Flexible scaling options supporting independent horizontal and vertical scale factors

Examples

Pattern Variations

Loading component...

import { Noise } from '@/components/ui/shadcn-io/noise';export default function NoiseVariantsDemo() {  return (    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">      {/* Fine grain */}      <div className="relative h-64 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg overflow-hidden">        <div className="absolute inset-0 flex items-center justify-center">          <h2 className="text-2xl font-bold text-white">Fine Grain</h2>        </div>        <Noise          patternSize={50}          patternScaleX={1}          patternScaleY={1}          patternRefreshInterval={1}          patternAlpha={25}        />      </div>      {/* Coarse grain */}      <div className="relative h-64 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-lg overflow-hidden">        <div className="absolute inset-0 flex items-center justify-center">          <h2 className="text-2xl font-bold text-white">Coarse Grain</h2>        </div>        <Noise          patternSize={200}          patternScaleX={2}          patternScaleY={2}          patternRefreshInterval={4}          patternAlpha={40}        />      </div>      {/* Stretched grain */}      <div className="relative h-64 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg overflow-hidden">        <div className="absolute inset-0 flex items-center justify-center">          <h2 className="text-2xl font-bold text-white">Stretched</h2>        </div>        <Noise          patternSize={100}          patternScaleX={3}          patternScaleY={1}          patternRefreshInterval={3}          patternAlpha={30}        />      </div>      {/* Static grain */}      <div className="relative h-64 bg-gradient-to-br from-pink-500 to-violet-600 rounded-lg overflow-hidden">        <div className="absolute inset-0 flex items-center justify-center">          <h2 className="text-2xl font-bold text-white">Static</h2>        </div>        <Noise          patternSize={150}          patternScaleX={1}          patternScaleY={1}          patternRefreshInterval={100}          patternAlpha={20}        />      </div>    </div>  );}

'use client';import { useRef, useEffect } from 'react';import { cn } from '@/lib/utils';export interface NoiseProps {  patternSize?: number;  patternScaleX?: number;  patternScaleY?: number;  patternRefreshInterval?: number;  patternAlpha?: number;  className?: string;}export function Noise({  patternSize = 250,  patternScaleX = 1,  patternScaleY = 1,  patternRefreshInterval = 2,  patternAlpha = 15,  className,}: NoiseProps) {  const grainRef = useRef<HTMLCanvasElement>(null);  useEffect(() => {    const canvas = grainRef.current;    if (!canvas) return;    const ctx = canvas.getContext('2d');    if (!ctx) return;    let frame = 0;    let animationId: number;    const patternCanvas = document.createElement('canvas');    patternCanvas.width = patternSize;    patternCanvas.height = patternSize;    const patternCtx = patternCanvas.getContext('2d');    if (!patternCtx) return;    const patternData = patternCtx.createImageData(patternSize, patternSize);    const patternPixelDataLength = patternSize * patternSize * 4;    const resize = () => {      canvas.width = window.innerWidth * window.devicePixelRatio;      canvas.height = window.innerHeight * window.devicePixelRatio;      ctx.scale(patternScaleX, patternScaleY);    };    const updatePattern = () => {      for (let i = 0; i < patternPixelDataLength; i += 4) {        const value = Math.random() * 255;        patternData.data[i] = value;        patternData.data[i + 1] = value;        patternData.data[i + 2] = value;        patternData.data[i + 3] = patternAlpha;      }      patternCtx.putImageData(patternData, 0, 0);    };    const drawGrain = () => {      ctx.clearRect(0, 0, canvas.width, canvas.height);      const pattern = ctx.createPattern(patternCanvas, 'repeat');      if (pattern) {        ctx.fillStyle = pattern;        ctx.fillRect(0, 0, canvas.width, canvas.height);      }    };    const loop = () => {      if (frame % patternRefreshInterval === 0) {        updatePattern();        drawGrain();      }      frame++;      animationId = window.requestAnimationFrame(loop);    };    const handleResize = () => {      resize();    };    window.addEventListener('resize', handleResize);    resize();    loop();    return () => {      window.removeEventListener('resize', handleResize);      if (animationId) {        window.cancelAnimationFrame(animationId);      }    };  }, [patternSize, patternScaleX, patternScaleY, patternRefreshInterval, patternAlpha]);  return (    <canvas      className={cn('absolute inset-0 w-full h-full', className)}      ref={grainRef}    />  );}

Use Cases

This free open source React component works well for:

Creative portfolios - Film grain effects adding artistic texture to photography showcases built with Next.js
Gaming interfaces - Atmospheric noise overlays for immersive game menus using TypeScript
Video applications - Vintage film effects for video editing and media players
Photography sites - Authentic grain textures enhancing visual storytelling using shadcn/ui design
Brand experiences - Textural overlays creating unique visual identity elements
Art galleries - Digital grain effects complementing contemporary and vintage artwork using Tailwind CSS

API Reference

NoiseProps

Prop	Type	Default	Description
`patternSize`	`number`	`250`	Size of the noise pattern in pixels
`patternScaleX`	`number`	`1`	Horizontal scale factor for the pattern
`patternScaleY`	`number`	`1`	Vertical scale factor for the pattern
`patternRefreshInterval`	`number`	`2`	How often to refresh the pattern (in animation frames)
`patternAlpha`	`number`	`15`	Opacity of the noise pattern (0-255)
`className`	`string`	`undefined`	Additional CSS classes to apply

Implementation Notes

Component uses HTML5 Canvas with requestAnimationFrame for high-performance grain animation
Pattern size determines the base resolution of noise texture (250px default provides good balance)
Opacity controlled via patternAlpha parameter (0-255 range, 10-30 recommended for subtle effects)
Refresh interval controls animation speed (higher values = slower animation, 2 frames default)
Scale factors (patternScaleX/Y) allow directional grain effects and aspect ratio adjustments
Compatible with CSS mix-blend-mode properties (overlay, multiply, screen) for creative effects
Automatically adapts to window resize events and container dimension changes
Multiple Noise components can be layered with different settings for complex texture combinations

Reactnoise

Reactnoise

On this page