# Hero
> Hero section whose headline sits in a dot grid and is revealed behind a bright front; the pointer pushes dots aside and a click sends a shockwave.
- Element: `<hf-hero>`
- React: `import { HfHero } from "@/components/lumesec/hf-hero"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-hero.json
- Page: https://elements.lumesec.ai/components/pixel-hd/hero



Live preview: https://elements.lumesec.ai/view/hf-hero

```html
<hf-hero headline="Think in pixels." primary="Get started" secondary="View components"></hf-hero>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/hf-hero
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-hero.json
```

## Usage

React:

```tsx
import { HfHero } from "@/components/lumesec/hf-hero";

export function Example() {
  return (
    <HfHero headline="Think in pixels." primary="Get started" secondary="View components" />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-hero.js"></script>

<hf-hero headline="Think in pixels." primary="Get started" secondary="View components"></hf-hero>
```

## Behaviour

The headline is revealed from left to right behind a bright front, then a shimmer runs through the dots around it. Your pointer pushes the dots aside and a click sends a shockwave through them.

## API reference

### Attributes

| Attribute   | React prop  | Type     | Default            | Description                                                                |
| ----------- | ----------- | -------- | ------------------ | -------------------------------------------------------------------------- |
| `headline`  | `headline`  | `string` | `Think in pixels.` | Headline text, shown in an `<h2>` over the dot grid. Read once on connect. |
| `primary`   | `primary`   | `string` | `Get started`      | Label of the primary button.                                               |
| `secondary` | `secondary` | `string` | `View components`  | Label of the secondary button.                                             |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event       | React prop    | Detail | Description                                 |
| ----------- | ------------- | ------ | ------------------------------------------- |
| `primary`   | `onPrimary`   | `{}`   | Fires when the primary button is clicked.   |
| `secondary` | `onSecondary` | `{}`   | Fires when the secondary button is clicked. |

### Properties

| Property               | Type     | Description        |
| ---------------------- | -------- | ------------------ |
| `headline` (read-only) | `string` | The headline text. |

### Slots

| Slot        | Description                                                     |
| ----------- | --------------------------------------------------------------- |
| `eyebrow`   | Pill text above the headline. Falls back to `New · Pixel HD`.   |
| `(default)` | Subheading under the headline. Falls back to a sample sentence. |

## Accessibility

* The headline is a visible `<h2>` set in the sans font; the dot canvas behind it is `aria-hidden`. The heading level is fixed.
* The secondary action is a native button; the primary action is a native button inside a nested `<hf-button>`.
* Reduced motion: the headline and grid appear at once without the reveal or shimmer, clicks send no shockwave and the canvas redraws only on pointer movement.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--foreground`, `--lumesec`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-font`, `--ui-muted` and `--ui-raised`.

## Notes

* The primary button is a nested `<hf-button>`, which `hf-hero` imports itself.
* The headline scales with the element's width (28px to 60px) and wraps onto more lines when it does not fit; the dot grid clears around it.