Layout
Hero
A page-title hero on the shared gradient (--gradient in each theme, the same one the gradient sections use). The projector hero puts the headline, copy and buttons on that gradient inside a lit screen, with a soft glow spilling onto the page behind it (--screen-spill: Art Deco 0.26, Sunrise 0.4). Type sits where the gradient reads, dark in Art Deco and light in Sunrise, and the mid-tones stay behind photos and buttons.
Source: components/Hero.tsx, ProjectorHero.tsx, styles/hero-glow.css
Live
Art Deco
Sunrise
Accessibility
- The glow is decorative and freezes under reduced motion.
- Every gradient stop the headline crosses measures 5:1 or better in both directions.
Props
| Name | Type | Note |
|---|---|---|
| Hero minHeight | string? | CSS length. Defaults to "clamp(420px, 62vh, 720px)". |
| Hero children | ReactNode | The title block, set over the glow. |
| Hero photo | string? | Slot seed of a photo shown beside the headline, below it on narrow screens. Never behind the type, so it cannot cover faces or hands. |
| ProjectorHero eyebrow | string? | Small label above the headline. |
| ProjectorHero children | ReactNode | The headline. |
| ProjectorHero actions | ReactNode? | Buttons that sit on the screen, under the headline. |
| ProjectorHero footer | ReactNode? | A bar under the screen for longer supporting copy. |
| ProjectorHero photo | string? | Slot seed of a photo shown inside the screen, beside the title, copy and buttons (below them on narrow screens). |
| ProjectorHero video | string? | Video URL. Swaps the gradient for muted looping footage under a scrim; paused under reduced motion. |