## Billboard Hero (S—015)

A brutalist hero with a visible grid, oversized condensed type, a skewed marquee band and a stamped CTA.

- URL: https://sundaeui.dev/components/billboard-hero
- Category: Page sections · Art direction: Brutalist
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/billboard-hero.json`
- Tags: tailwind, typography, marquee, hero, section, animated, react, landing-page

For brands that would rather be remembered than liked by everyone. The grid is drawn on the page, coordinates sit in a ruled header, and the headline is set huge in condensed black uppercase. Every letter reacts on its own when the pointer crosses it.
A safety-orange marquee band, skewed a couple of degrees, runs across the bottom and pauses on hover. The primary button is stamped: a hard offset shadow that presses flat when clicked.
Use it for studios, agencies, festivals, record labels and product drops. The type scales fluidly from 56px on phones to nearly 200px on wide screens.

### Usage

```tsx
import { BillboardHero } from '@/components/sundae/billboard-hero'

<BillboardHero
  headline={['Loud by', 'default.']}
  marquee="Type foundry · Print studio · Open late"
  intro="An independent print and type studio…"
  primary={{ label: 'See the work', href: '/work' }}
  secondary={{ label: 'Commission', href: '/contact' }}
/>
```

### Props

- `headline` (`string[]`, required): Headline lines. Keep each to 1–3 words.
- `marquee` (`string`, required): Phrase repeated in the band.
- `intro` (`string`, required): Supporting paragraph.
- `primary` (`{ label: string; href: string }`, required): Stamped primary CTA.
- `secondary` (`{ label: string; href: string }`): Outlined secondary CTA.
- `coordinates` (`[string, string, string, string]`): Labels in the header rule.

### Accessibility

- The headline stays a real <h1>. The per-letter spans are inline and read as normal text.
- The marquee is aria-hidden, and its phrase is repeated once for screen readers.
- The marquee and letter motion stop under prefers-reduced-motion.