## Aperture Hero (S—476)

A product hero whose headline rises word by word, then a live app window settles into perspective and leans toward the pointer.

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

The headline is revealed one word at a time from behind a mask, the way type is set on a well-made launch page, with the second line held back in a muted tone. The announcement pill, paragraph and buttons follow on one easing curve, so the whole page arrives as a single gesture.
Below it, a product window drops out of a steep tilt into a gentle perspective. It leans a few degrees toward the pointer with eased motion, and a thin light travels along its edge. Inside, the built-in dashboard counts its figures up, draws its revenue line and brings in its rows, then dissolves into the page.
Pass your own screenshot or live UI as preview to replace the dashboard. It works in light and dark (.dark), is a single CSS file with no animation library, and holds still under prefers-reduced-motion.

### Usage

```tsx
import { ApertureHero } from '@/components/sundae/aperture-hero'

<ApertureHero
  eyebrow={{ label: 'Northwind 2.0 is here', href: '/changelog' }}
  headline={['Know your numbers', 'before the meeting.']}
  description="Revenue, retention and every customer in one calm dashboard."
  primary={{ label: 'Start free', href: '/signup' }}
  secondary={{ label: 'Book a demo', href: '/demo' }}
  preview={<img src="/app.png" alt="" style={{ width: '100%' }} />}
/>
```

### Props

- `headline` (`[string, string]`, required): Two lines. The second is set in the muted tone.
- `description` (`string`, required): Supporting paragraph, one or two sentences.
- `primary` (`{ label: string; href: string }`, required): Main call to action.
- `secondary` (`{ label: string; href: string }`): Outlined secondary action.
- `eyebrow` (`{ label: string; href: string }`): Announcement pill above the headline.
- `preview` (`ReactNode`): Your screenshot or UI inside the window. Defaults to a live dashboard mock.

### Accessibility

- The headline is a real <h1>; the word masks are inline spans and read as one sentence.
- The window chrome and built-in dashboard are aria-hidden decoration.
- Under prefers-reduced-motion everything appears in place, flat, without tilt or counting.