Noise

Backgrounds 46

About

A canvas-based noise effect component that generates dynamic grain patterns. It creates an animated noise overlay, which can be used to add texture to backgrounds or elements. Features: 1. Canvas-based rendering 2. Dynamic pattern generation 3. Configurable noise density 4. Adjustable opacity 5. Responsive scaling 6. Performance optimized 7. Customizable refresh rate 8. High DPI support 9. Automatic cleanup 10. Memory efficient

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Noise to your project and fits it to your theme.

Code

How Noise is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export function NoiseDemo() {
  return (
    <div className="w-full flex items-center justify-center relative">
      {/* Text with noise mask */}
      <div className="relative px-12 py-[200px]">
        <h1 className="text-[8rem] font-black text-muted text-center text-black">
          Oh, edgy!
        </h1>
        <div className="absolute inset-0 mix-blend-overlay rounded-lg"></div>
        <Noise
          patternSize={75}
          patternScaleX={1}
          patternScaleY={1}
          patternRefreshInterval={2}
          patternAlpha={35}
          className="w-full h-full"
        />
      </div>
    </div>
  )
}