Hero Section With Noise Background
Vertical strips with subtle shadows create a folded-paper texture, while a noise overlay adds film-like grain that fades at the edges. The strips recalculate on resize to always fill the viewport. A rotating gradient badge above the headline adds a shimmer effect.
The layout includes a centered headline, description, two CTA buttons (one with rose gradient), and a product screenshot that fades out at the bottom. All elements animate in with staggered transitions using Framer Motion. The noise texture loads from a WebP file at 5% opacity.
Good for design agency sites, creative studio portfolios, editorial pages, luxury brand marketing, and premium product launches where you want a refined, tactile feel.
Explore more
Part of Hero Sections ยท 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




