hero accepted

ManifestoHero

State a conviction so plainly the product feels inevitable.

Structural distinction

Pure typography, scroll-scrubbed: a sticky declaration whose lines earn their ink as the reader scrolls — reading position is the interaction. No media, no evidence apparatus. Third structural answer in the hero family (vs disclosure rail, vs tabbed demo).

Use when

Brand-led openings, mission-driven organizations, launches that trade on point of view. Works when the words can carry a viewport alone.

Avoid when

Feature-driven pages (nothing to inspect here), audiences that need proof up front, or copy that is not genuinely declarative.

Accessibility

Declaration is a single real heading (lines are spans). Section labelled by it. Scroll behavior is presentation-only — the accessibility tree carries the complete text at all times.

scroll

Traverse-scrubbed: each line activates over its window of section progress (opacity + small settle via CSS calc on one custom property). Native scrolling untouched; nothing is pinned but the sticky frame.

hover

Only the actions respond — the declaration is text, not a control.

press

CTA press feedback; nothing else is pressable by design.

focus

Actions in natural order; nothing focusable inside the declaration.

reduced

The runway collapses, the sticky releases, all lines stand in full ink — a poster, not a scrub. Same for no-JS.

Usage

import { ManifestoHero } from "@guillermo/marketing";

<ManifestoHero
  content={{
    lines: ["First conviction.", "Second conviction.", "The ask."],
    attribution: "Who is speaking.",
    actions: [{ label: "Act", href: "#" }],
  }}
/>