CodingLaboratory
Lab Commands
Enter The Lab

Component Lab / heroes-headers / cinematic-product-hero

Stable release
Back to category

Open experiment

Cinematic product hero

Introduces a flagship product through selectable visual chapters, proof points, and one focused CTA. Chapter controls transform the stage and CTA context; no autoplay is required. Uses a chaptered product narrative rather than a static split-layout launch hero.

Lab tested Responsive Dark mode Interactive
Version
1.0.0
Updated
2026-08-02
Dependencies
Zero
Live canvasInstant token updates
Source filesEditable and export-ready
<header class="cmp-cinematic-product-hero cmp-atlas" data-state="idle" data-variant="0">
  <div class="cmp-atlas__hero-copy">
    <span>Cinematic product reveal · 2026</span>
    <h2>Cinematic <em>product</em></h2>
    <p>
      Introduces a flagship product through selectable visual chapters, proof points, and one
      focused CTA.
    </p>
    <div class="cmp-atlas__choices">
      <button type="button" data-choice="0" aria-pressed="true">Discover</button
      ><button type="button" data-choice="1" aria-pressed="false">Compose</button
      ><button type="button" data-choice="2" aria-pressed="false">Launch</button>
    </div>
    <div>
      <button
        type="button"
        class="cmp-atlas__primary"
        data-primary
        data-active-label="Reminder set"
        aria-pressed="false"
      >
        Enter the experience</button
      ><small data-output>Chapter 01 · Signal</small>
    </div>
    <p data-status aria-live="polite">Discover mode selected</p>
  </div>
  <div class="cmp-atlas__hero-stage" aria-hidden="true">
    <i></i><i></i><i></i><b>01</b><span>Cinematic product</span>
  </div>
</header>
No runtime reactions detected Open in Editor

Validated in the lab

Experiment report

  • Schema and source files passed
  • Responsive test passed
  • Keyboard test passed
  • No console errors

Component ingredients

Dependencies
None
Browser support
Current Chrome, Current Edge, Current Firefox, Current Safari
Version
1.0.0
Last tested
2026-08-02

Accessibility notes

  • Every interactive target is a labelled native control with a visible focus treatment.
  • State changes are communicated through a polite text status and never by color alone.
  • The contained visual effects stop when the user requests reduced motion.

License: MIT License for open-source use, modification, and distribution.

Continue testing

Related experiments