Hero Section With Spotlight Beam
ProFull-bleed dark hero with a pure-CSS diagonal spotlight beam, grain texture overlay, and an oversized bold headline anchored to the bottom-left, finished with a lime-green eyebrow label.
When to use Hero Section With Spotlight Beam
Anchors its headline to the bottom left rather than the centre of the screen, which is the whole idea. The upper two thirds stay empty, and that emptiness is either a place for a product shot to sit or a statement in itself. Either way the layout only works when the words are short. A three line headline pushed into the corner stops reading as confidence and starts reading as an accident.
The diagonal beam and the film grain over it are both plain CSS, so there is no renderer to boot and no first frame to wait for. Everything is fixed dark: there is no light variant, and forcing one would flatten the beam into a grey smear. Reach for it when the brand is already dark and the message fits in six or seven words.
Block details
- Category
- Hero Sections
- Renders
- CSS only. Paints as soon as the stylesheet arrives
- Theme
- Fixed dark surface. No light variant
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxtailwind-merge- Source
- 255 lines, 11 KB in one file
- Install
wensity add hero-section-with-spotlight-beam --type block- Stack
- React, Next.js, TypeScript and Tailwind CSS v4
- Licence
- Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
- Tags
- dark, diagonal, spotlight, bold, minimalist, health
- Last updated
