We are live on DevHunt: tool of the week contest

check it out

Noise Card

A card with a fractal noise grain overlay.

Preview

Interactive Preview

Grained Texture

A subtle SVG fractal noise overlay that adds character to your UI.

Installation

Usage

tsx
import { NoiseCard } from "@/components/ui/noise-card"

export default function Demo() {
  return (
    <NoiseCard noiseOpacity={0.08}>
      <h3 className="text-xl font-bold">Grained Texture</h3>
      <p className="text-muted-foreground">Subtle SVG noise overlay.</p>
    </NoiseCard>
  )
}

Props

PropTypeDefault
noiseOpacitynumber0.05