Aperture Hero
A product hero whose headline rises word by word, then a live app window settles into perspective and leans toward the pointer.
Overview
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.
When to use
- Marketing and product pages that need a complete, responsive band of content.
When not to use
- Inside dense app screens, where a smaller component fits better.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/aperture-hero.jsonnpx shadcn@latest add https://sundaeui.dev/r/aperture-hero.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/aperture-hero.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/aperture-hero.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy aperture-hero.tsx and aperture-hero.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
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
| Prop | Type | Default |
|---|---|---|
headline*Two lines. The second is set in the muted tone. | [string, string] | — |
description*Supporting paragraph, one or two sentences. | string | — |
primary*Main call to action. | { label: string; href: string } | — |
secondaryOutlined secondary action. | { label: string; href: string } | — |
eyebrowAnnouncement pill above the headline. | { label: string; href: string } | — |
previewYour screenshot or UI inside the window. Defaults to a live dashboard mock. | ReactNode | — |
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.
Customization
- Colours are --ah-* custom properties on .sd-ah; dark values apply under .dark.
- Change --ah-accent for the announcement dot, and --ah-up for positive deltas.
- Adjust the settled tilt with --ah-tilt in the [data-live] rule (default 7deg).
FAQ
- Is Aperture Hero free?
- Aperture Hero is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Aperture Hero?
- Run npx shadcn@latest add https://sundaeui.dev/r/aperture-hero.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Aperture Hero support keyboard and screen readers?
- 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.
- Does Aperture Hero respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All sections →- Pro
Ledger Pricing
Sections · Editorial - Pro
Billboard Hero
Sections · Brutalist - Pro
Bento Features
Sections · Understated Margin Quote
Sections · Editorial- Pro
Newsletter CTA
Sections · Refined - Pro
Product Footer
Sections · Understated