Noise Texture
SVG fractal noise grain overlay
Installation
Usage
import { NoiseTexture } from "@/components/pioneerui/noise-texture"
export default function Hero() {
return (
<NoiseTexture className="bg-gradient-to-br from-violet-900 to-indigo-900" opacity={0.2}>
<h1 className="text-white text-4xl font-bold">Textured Hero</h1>
</NoiseTexture>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
opacity | number | 0.15 | Noise overlay opacity (0–1) |
baseFrequency | number | 0.65 | SVG feTurbulence base frequency |
numOctaves | number | 3 | Turbulence complexity levels |
children | React.ReactNode | undefined | Content rendered above noise |
className | string | undefined | Additional CSS classes |