Hero entrance sequence

A choreographed page load: eyebrow, headline lines, text and button arrive in order from one timing system.

CSSIntermediate

Live demo Open full screen

<section class="hero">
  <p class="eyebrow">Introducing</p>
  <h1><span><i style="--s:1">Move with</i></span><span><i style="--s:2">purpose.</i></span></h1>
  <p class="lede">Every element arrives in a deliberate order.</p>
  <a class="btn" href="#">Get started</a>
</section>

.hero{width:min(520px,90vw)}
.eyebrow,.lede,.btn{animation:up .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--s) * 110ms + 150ms)}
.eyebrow{--s:0;color:#f08a5d;font:500 12px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
h1{margin:0;font-size:clamp(2.4rem,9vw,4.2rem);line-height:1.02;letter-spacing:-.03em}
h1 span{display:block;overflow:hidden;padding-bottom:.08em}
h1 i{display:block;font-style:normal;animation:line 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--s) * 110ms + 150ms)}
.lede{--s:4;color:#cfc3c1;margin:20px 0 28px}
.btn{--s:5;display:inline-block;background:#f08a5d;color:#270100;font-weight:700;padding:14px 22px;border-radius:10px;text-decoration:none}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes line{from{transform:translateY(105%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.eyebrow,.lede,.btn,h1 i{animation:none}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hero entrance</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.hero{width:min(520px,90vw)}
.eyebrow,.lede,.btn{animation:up .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--s) * 110ms + 150ms)}
.eyebrow{--s:0;color:#f08a5d;font:500 12px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
h1{margin:0;font-size:clamp(2.4rem,9vw,4.2rem);line-height:1.02;letter-spacing:-.03em}
h1 span{display:block;overflow:hidden;padding-bottom:.08em}
h1 i{display:block;font-style:normal;animation:line 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--s) * 110ms + 150ms)}
.lede{--s:4;color:#cfc3c1;margin:20px 0 28px}
.btn{--s:5;display:inline-block;background:#f08a5d;color:#270100;font-weight:700;padding:14px 22px;border-radius:10px;text-decoration:none}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes line{from{transform:translateY(105%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.eyebrow,.lede,.btn,h1 i{animation:none}}
</style></head>
<body>
<section class="hero">
  <p class="eyebrow">Introducing</p>
  <h1><span><i style="--s:1">Move with</i></span><span><i style="--s:2">purpose.</i></span></h1>
  <p class="lede">Every element arrives in a deliberate order.</p>
  <a class="btn" href="#">Get started</a>
</section>
</body></html>

Good for

The first screen of a landing page. Order and rhythm matter more than any single effect.

Watch out for

Keep the whole sequence under about 1.5s so people are not waiting to read.

Accessibility

Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.