Hero Sections
Modern hero sections that stand out, with gradient meshes, shaders, and split layouts on Next.js and Framer Motion.
How to choose a hero sectionWhich hero section should I use?
Start here
- Hero Section With Radial Glow
- Nobody has strong opinions yet. A centred headline, one supporting line, two buttons, and a customer logo strip directly beneath.
The layout does the work
- Hero Section With Spotlight Beam
- You have a product shot to place. The headline anchors to the bottom left and the upper two thirds stay deliberately empty.
- Hero Section With Rotating Words
- The warm one, on a bone coloured surface. Navigation is built into the hero itself, which saves you choosing a navbar to sit above it.
The visual does the work
Both cost more than the rest. Check the first paint before committing.
- Hero Section With 3D Monolith
- A single product with a strong identity, where art beats a screenshot. Transformed layers with glowing edges rather than a loaded model.
- Hero Section With Animated Clouds
- The only hero here running a real canvas. A shader compiles before the first cloud appears, which is a visible pause on a mid range phone.