React Noise Background

Film grain texture that makes digital interfaces feel organic and authentic. Build cinematic React background components with canvas rendering, CSS blend modes, animated patterns, and TypeScript support for Next.js applications with shadcn/ui.

React

Canvas API

CSS Blend Modes

Adding texture to digital designs?

Join our Discord community for help from other developers.

Perfect digital is boring. Too clean, too sterile, too obviously computer-generated. Real materials have texture—film grain, paper fibers, canvas weave. This React component adds organic noise patterns that make your interfaces feel authentic, like they exist in the physical world instead of floating in digital space.

Organic grain textures

Watch animated grain patterns add life and authenticity to digital surfaces:

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}    />  );}

Built for React applications with TypeScript and Next.js. Uses HTML5 Canvas with requestAnimationFrame for smooth grain animation. CSS blend modes (overlay, multiply, screen) integrate the texture naturally with your content. Perfect for photography sites, creative portfolios, or any design that needs to feel less digital.

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

Usage

import { Noise } from "@/components/ui/noise";

export default function FilmPortfolio() {
  return (
    <div className="relative h-screen bg-black">
      {/* Your content */}
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-6xl font-bold text-white">
          Authentic Photography
        </h1>
      </div>
      
      {/* Film grain overlay */}
      <div className="absolute inset-0 mix-blend-overlay">
        <Noise
          patternSize={100}
          patternScaleX={1}
          patternScaleY={1} 
          patternRefreshInterval={2}
          patternAlpha={25}
        />
      </div>
    </div>
  );
}

Why most texture effects look fake

Most developers use static PNG overlays or CSS background-image patterns. It's lifeless—the same pattern repeated forever, obviously tiled. Others try JavaScript particle systems that eat CPU generating "random" dots. Some use CSS filters like blur() and contrast(), but it looks like a Instagram filter from 2012.

This React component generates real grain using Canvas with Math.random() for each pixel. The pattern refreshes every few frames, creating that living, breathing texture of real film grain. CSS blend modes integrate it naturally—overlay for subtle texture, multiply for darker grain, screen for lighter effects. It's the difference between authentic film grain and a digital filter.

Features

Canvas-based grain generation using pixel-level randomization for authentic texture
Animated pattern refresh with configurable intervals for living, breathing grain
CSS blend mode integration supporting overlay, multiply, screen, and other creative effects
Independent scale control with separate X/Y scaling for directional grain effects
Precision opacity control using 0-255 alpha values for subtle to dramatic texture
High-performance rendering using requestAnimationFrame and optimized canvas operations
Responsive container adaptation automatically adjusting to window and container changes
TypeScript definitions for all grain parameters and visual customizations
Memory efficient implementation preventing performance degradation over time
shadcn/ui compatible with proper layering and blend mode support

Examples

Pattern Variations

Explore different grain types from fine film grain to coarse texture:

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}    />  );}

API Reference

Noise

Main component for canvas-based animated grain texture effects.

Prop	Type	Default	Description
`patternSize`	`number`	`250`	Base resolution of grain pattern in pixels
`patternScaleX`	`number`	`1`	Horizontal stretch factor for directional grain
`patternScaleY`	`number`	`1`	Vertical stretch factor for directional grain
`patternRefreshInterval`	`number`	`2`	Animation frames between pattern updates (1-100)
`patternAlpha`	`number`	`15`	Grain opacity (0-255, recommend 10-40 for subtlety)
`className`	`string`	-	Additional CSS classes for container styling

Grain Pattern Guidelines

// Subtle film grain (most common)
patternSize={100} patternAlpha={20} patternRefreshInterval={3}

// Fine detail grain
patternSize={50} patternAlpha={15} patternRefreshInterval={1}

// Heavy texture grain  
patternSize={200} patternAlpha={40} patternRefreshInterval={5}

// Static texture (no animation)
patternSize={150} patternAlpha={25} patternRefreshInterval={1000}

CSS Blend Mode Effects

mix-blend-overlay - Natural film grain integration (most popular)
mix-blend-multiply - Darker grain that deepens colors
mix-blend-screen - Lighter grain that brightens highlights
mix-blend-soft-light - Gentle contrast enhancement
mix-blend-hard-light - Dramatic contrast and texture

Common gotchas

Blend mode browser support: Most blend modes work everywhere, but some older browsers might not support all variants. overlay and multiply are the safest options.

Performance with large patterns: Very large patternSize values (500+) can impact performance. The canvas has to generate more pixels. Stick to 50-300 for best balance.

Alpha value confusion: patternAlpha uses 0-255 scale, not 0-1 like CSS opacity. Values above 50 often look too heavy. 10-30 is the sweet spot for subtle grain.

Refresh interval timing: Lower values = faster animation but higher CPU usage. Very fast refresh (interval: 1) can cause performance issues on older devices.

Z-index layering conflicts: Noise typically goes on top with blend modes. If your content disappears, check z-index values and blend mode compatibility.

Canvas sizing edge cases: The canvas adapts to container size. Very small containers might not show grain effectively. Minimum 100px recommended.

Explore other texture and atmospheric background components for React applications:

Organic grain textures

Installation

Usage

Why most texture effects look fake

Features

Examples

Pattern Variations

API Reference

Noise

Grain Pattern Guidelines

CSS Blend Mode Effects

Common gotchas

You might also like

Flickering Grid

Particles

Ethereal Shadow

Aurora

Gradient Animation

Sparkles

Questions developers actually ask

On this page

React Noise Background

Reactnoise

Reactnoise

Flickering Grid

Particles

Ethereal Shadow

Aurora

Gradient Animation

Sparkles

Can I create colored grain instead of grayscale?

How do I make completely static grain that never changes?

How do I optimize performance for mobile devices?

Which blend mode should I use?

Can I layer multiple noise components?

How do I make grain more or less visible?

On this page