Scene demo // Hero
Brand and value in the first viewport.
Hero scenes establish identity with large type, media, and entry motion — all within the first fold so visitors get the message immediately.
First fold
Large type
Entry motion
Act I // Structure
Kicker, headline, lead and primary CTA row define the hero anatomy.
Every hero follows the same four-part structure so the visual hierarchy is predictable across editorial themes.
<div vl-effect="fade-up" vl-timeline="view" vl-once>
<p class="vl-kicker">Context label</p>
<h1 class="vl-display">Primary headline</h1>
<p class="vl-lead">Supporting paragraph.</p>
<div class="vl-cta-row">
<a class="vl-btn vl-btn--primary" href="#">Primary</a>
<a class="vl-btn vl-btn--ghost" href="#">Secondary</a>
</div>
</div>
vl-once fires the reveal exactly one time — ideal for hero sections so it never replays on back-navigation.
Act II // Motion
Entry reveals with vl-effect and view timelines.
Heroes use fade-up on the copy block and rise-3d
on the stage to create a sense of depth on first paint.
hero entry
<div vl-effect="fade-up" vl-timeline="view" vl-once>
<!-- copy block -->
</div>
<div vl-effect="rise-3d" vl-once>
<!-- visual stage -->
</div>
Tip
vl-once ensures one play.
Hero reveals should fire exactly once so they don’t replay on back-navigation.
Act III // Reference
Match spacing and token use to the editorial landing spec.
The canonical landing page defines exact spacing tokens, type scales and media breakpoints. Hero scenes should mirror those values for visual consistency.
-
Spacing
--vl-space-hero · 5rem
-
Type
display-xl · clamp()
-
Media
min-width: 48rem
Act IV // Applied hero
Structure, motion and reference: every hero scene follows one blueprint.
Build the four-part anatomy, add entry reveals, and align to the editorial landing spec for a consistent first impression.