Hero

.iv-root {
  --iv-i: 0;
}

<section class="iv-hero iv-hero--cinematic iv-hero--center iv-scan" id="hero-cinematic" style="--iv-scan-opacity: 0.5">
  <div class="iv-hero__media iv-texture-aurora" aria-hidden="true"></div>
  <div class="iv-hero__scrim" aria-hidden="true"></div>
  <span class="iv-spark" style="--iv-i: 0; position: absolute; inset-block-start: 16%; inset-inline-start: 18%" aria-hidden="true"></span>
  <span class="iv-spark" style="--iv-i: 1; position: absolute; inset-block-start: 24%; inset-inline-start: 72%" aria-hidden="true"></span>
  <span class="iv-spark" style="--iv-i: 2; position: absolute; inset-block-start: 11%; inset-inline-start: 54%" aria-hidden="true"></span>
  <div class="iv-hero__content">
    <p class="iv-hero__kicker">Sample fixture, not a real product</p>
    <h2 class="iv-hero__title">
      <span class="iv-rise" style="--iv-i: 0">The cover that</span>
      <span class="iv-rise" style="--iv-i: 1">makes them <em>stay</em></span>
    </h2>
    <p class="iv-hero__lead iv-rise" style="--iv-i: 2">Made-up copy, for the fixture only. The aurora lives on the background layer, the scan line crosses the whole section, and the sparks are decorative. Everything stops when the visitor asks for reduced motion, and the final frame stays on screen.</p>
    <div class="iv-hero__actions iv-rise" style="--iv-i: 3">
      <a class="iv-button iv-button--primary iv-button--lg iv-edge-glint" href="#hero-cinematic-facts">Start the sample tour</a>
      <a class="iv-button iv-button--lg" href="#hero-cinematic">Back to the top of the hero</a>
    </div>
    <ul class="iv-hero__facts" id="hero-cinematic-facts">
      <li><strong>90svh</strong> of cover</li>
      <li><strong>6s</strong> per scan</li>
      <li><strong>0</strong> bitmaps shipped</li>
    </ul>
  </div>
</section>

.iv-root {
  --iv-scan-opacity: 0.5;
  --iv-i: 0;
}

<section class="iv-hero iv-hero--terminal iv-scan iv-scan--v" id="hero-terminal" style="--iv-scan-opacity: 0.5">
  <div class="iv-hero__media" aria-hidden="true" style="background-image: radial-gradient(58% 70% at 8% 100%, var(--iv-palette-green-900) 0 10%, transparent 68%), linear-gradient(180deg, var(--iv-palette-neutral-1000), var(--iv-palette-neutral-950))"></div>
  <div class="iv-hero__scrim" aria-hidden="true"></div>
  <div class="iv-hero__content">
    <p class="iv-hero__kicker">npx sample --not-a-real-command</p>
    <h2 class="iv-hero__title">
      <span class="iv-rise" style="--iv-i: 0">Ship the</span>
      <span class="iv-rise" style="--iv-i: 1">whole <em>stack</em></span>
    </h2>
    <p class="iv-hero__lead iv-rise" style="--iv-i: 2">Made-up copy, for the fixture only. The terminal cover sets the mono family on the content, prints a prompt before the kicker and blinks a caret after it. The caret stops blinking when the visitor asks for reduced motion.</p>
    <div class="iv-hero__actions iv-rise" style="--iv-i: 3">
      <a class="iv-button iv-button--primary iv-button--lg" href="#hero-terminal-facts">Read the sample output</a>
    </div>
    <ul class="iv-hero__facts" id="hero-terminal-facts">
      <li><strong>12ms</strong> sample build</li>
      <li><strong>3</strong> engines tested</li>
    </ul>
  </div>
</section>

.iv-root {
  --iv-scan-opacity: 0.5;
  --iv-i: 0;
}

<section class="iv-hero iv-hero--kenburns iv-scan" style="--iv-hero-min: 32rem; border-radius: var(--iv-radius-lg)">
  <div class="iv-hero__media"><img src="/photos/p1043.jpg" width="1280" height="800" alt="" loading="lazy"></div>
  <div class="iv-hero__scrim"></div>
  <div class="iv-hero__content">
    <p class="iv-hero__kicker">Photograph by Christian Joudrey on Unsplash</p>
    <h2 class="iv-hero__title"><span class="iv-rise" style="--iv-i: 0">Real light,</span><span class="iv-rise" style="--iv-i: 1">real <em>photographs</em></span></h2>
    <p class="iv-hero__lead">The media layer takes a real image; the scrim keeps the text on AA contrast; the slow zoom and the scan line stop under reduced motion. Sample copy for the documentation.</p>
    <div class="iv-hero__actions"><a class="iv-button iv-button--primary iv-button--lg iv-edge-glint" href="#hero-photo-note">Sample action</a><a class="iv-button iv-button--secondary iv-button--lg" href="#hero-photo-note">Another link</a></div>
  </div>
</section>
<p id="hero-photo-note" class="iv-u-text-sm iv-u-text-muted iv-u-m-0" style="margin-block-start: var(--iv-space-3)">Both buttons only jump to this note.</p>

.iv-root {
  --iv-hero-min: 32rem;
  --iv-i: 0;
}