Background Noise Grid
On mount, the component calculates how many 80px-wide strips fit the current viewport width. A resize listener recalculates this value when the window changes. Each strip renders with a horizontal gradient and a shadow line on its right edge.
A noise texture layer sits on top of the strips, scaled to 120% to prevent visible tiling edges. The noise uses a radial mask to fade out toward the edges. You'll need to download the noise.webp file and place it in your public folder.
Works well for copywriting tool landing pages, AI product sites, creative agency homepages, and any design that benefits from a tactile, textured feel.
Explore more
Part of Backgrounds ยท All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



