Noise Background

A dynamic noise background component for React that creates animated cells with customizable colors and opacity. Perfect for adding visual interest to your applications.

Overview

The NoiseBackground component generates a visually engaging background composed of animated cells. This component leverages React's performance optimizations for smooth animations.

Each cell's color, opacity, and animation duration are customizable, allowing you to create unique and dynamic effects suitable for various applications.

Preview

Usage

'use client'
 
import { NoiseBackground } from '@/components/background/noise-background'
 
<div className="relative h-[496px] w-full overflow-hidden rounded-lg border bg-background">
  <NoiseBackground />
</div>

Code

'use client'
 
import { useMemo } from 'react'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface NoiseBackgroundProps {
  cellColor?: string
  className?: string
}
 
export const NoiseBackground = ({
  cellColor = 'bg-white',
  className,
}: NoiseBackgroundProps) => {
  const cells = useMemo(
    () =>
      Array.from({ length: 100 }).map(() => ({
        id: crypto.randomUUID(),
        opacity: Math.random(),
        duration: 0.5 + Math.random() * 2,
        delay: Math.random() * 2,
      })),
    []
  )
 
  return (
    <div
      className={cn(
        'absolute inset-0 grid grid-cols-10 bg-slate-900',
        className
      )}
    >
      {cells.map((cell) => (
        <motion.div
          key={cell.id}
          className={cn('aspect-square', cellColor)}
          animate={{
            opacity: [cell.opacity, 1 - cell.opacity, cell.opacity],
          }}
          transition={{
            duration: cell.duration,
            repeat: Infinity,
            ease: 'linear',
            delay: cell.delay,
          }}
        />
      ))}
    </div>
  )
}

Props

Prop	Type	Default
`cellColor`	`string`	`'bg-white'`
`className`	`string`	`undefined`

Overview

Preview

Usage

Code

Props

On this page