Beam Hero
A centred hero on a diagonal lattice of dashed lines with glowing meteors travelling along it, a highlighted phrase and a screenshot in a layered frame.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/beam-heroProps
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | - | The main headline. |
highlight | string | - | Words after the title, drawn in a highlight box. |
eyebrow | string | - | Small label above the title. |
description | string | - | Supporting text under the title. |
children | React.ReactNode | - | Calls to action, shown under the description. |
image | { src: string; alt: string } | - | Framed screenshot shown below the text. |
beams | number | 8 | How many meteors travel along the lattice. |
tilt | boolean | true | Tilt the screenshot back and straighten it as it scrolls into view (where the browser supports scroll-driven animations). |
beamColors | [string, string] | ["#f97316", "#fde047"] | Meteor colours: tail and head. |
className | string | - | Extra classes for the section. |
