NoiseBackground

animation

A utility component that renders a subtle noise texture overlay. Use it to add depth and texture to sections without distracting from content.

Section with texture

Content sits on top of the noise layer. The subtle grain adds depth without distracting from the content.

Subtle noise texture overlay

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { NoiseBackground } from "piece-ui";

2Usage

Basic usage

tsx

1import { NoiseBackground } from "piece-ui";
2
3export default function Example() {
4  return (
5    <NoiseBackground opacity={0.06} className="rounded-xl p-8 bg-zinc-900">
6      <h2>Section with texture</h2>
7      <p>Content sits on top of the noise layer.</p>
8    </NoiseBackground>
9  );
10}

3Props

Prop	Type	Default	Description
`opacity`	`number`	`0.05`	Opacity of the noise texture (0–1).
`className`	`string`	—	Additional CSS classes.
`children`	`React.ReactNode`	—	Content to render on top of the noise.

MenuButton

SocialIcon