EditorialHero

Magazine-style landing hero — TextMaskReveal headline + magnetic CTA + asymmetric image collage.

stable pattern #hero#editorial#composition

No playground for "editorial-hero".

Loading preview…

Usage

- Use as the `<main>` opening for `/`, `/about`, `/lab`, or any landing page. - One per page — multiple competing TextMaskReveals fight for entrance attention. - Pair with subtle background grain or solid `--color-ink` — never busy backgrounds. - 3–5 images in the gallery is ideal; vary aspect ratios.

Do / Don't

- **Do** keep headline under 12 words and body under 25 words. - **Do** match image color palette to brand — they're the second loudest element after the headline. - **Don't** stack two of these patterns on a single page. - **Don't** add a secondary CTA — the magnetic button is THE call to action.

Tokens

A11y

Headline is a proper h1 via TextMaskReveal. CTA is a real link with accessible name. Images require alt text. Respects prefers-reduced-motion via TextMaskReveal and MagneticButton's own guards.

Source

src/components/EditorialHero.astro

Live playground

Designed for AI agents.