hero accepted

SplitDemoHero

Show the product working before finishing the sentence about it.

Structural distinction

Media-led split: the demo frame takes the wider column; scene tabs sit under the frame like plate captions and switch product states in place with a crossfade + faint sharpen. Distinct from LedgerHero in IA (media-led vs evidence-led), topology (frame + caption tabs vs numbered rail), content model (scenes vs evidence) and interaction model (tabs vs disclosure).

Use when

Products whose interface is the argument: developer tools, dashboards, design tools. When 2-4 genuinely different product states exist.

Avoid when

Products without a visual surface; single static screenshots (use a media hero without tabs); more than ~4 scenes (use a product tour section).

Accessibility

Section labelled by headline. Scenes are real Radix tabs (tablist/tab/tabpanel) with an accessible name; scene media is aria-hidden schematic illustration with the caption carrying meaning; single-scene content renders without tab semantics.

scroll

Layered recede: copy departs slightly faster than the demo frame — quiet depth, no parallax theatrics.

hover

Scene tabs lift color and preview a ghost of the selection hairline.

press

Tab press switches the scene (crossfade + micro-scale + sharpen) and the hairline indicator arrives; CTA press steps down with an ink deepen.

focus

Radix tabs: arrow-key navigation, automatic activation, theme focus ring.

reduced

Entrance instant; scene switches are effectively immediate crossfades; recede pinned.

Usage

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

<SplitDemoHero
  content={{
    headline: "Watch it work.",
    scenes: [
      { id: "a", label: "Before", caption: "…", media: <img … /> },
      { id: "b", label: "After", caption: "…", media: <img … /> },
    ],
  }}
/>