Skip to content
heyrav design system
PatternsShipped

Hero

Exactly one viewport. A centred 13ch headline with one Redaction word, a credential line pinned to the bottom, and the aurora behind.

Used onHome

I make designs that convert.

2+ years exp. designing for performance marketing · IIT Eng. Grad.

Show code
<div class="d-hero-demo">
  <h1 class="h1 d-center">I make designs that <em>convert.</em></h1>
  <p class="d-cred">2+ years exp. designing for performance marketing <span class="d-dot">·</span> IIT Eng. Grad.</p>
</div>
  • max-width:13ch + margin-inline:auto: the measure decides the line breaks, the auto margins centre it.
  • "convert." is a real <button> that inherits the h1's type - keyboard-reachable, read as a word.
  • The credential line is position:absolute, never a second flex child, or it pushes the h1 up and the loader stops landing on it.
  • At 640 each claim gets its own line, so breaks fall on meaning, not mid-phrase.
  • #content (z 25, opaque paper) slides up over the hero (z 10), so Selected work covers it.

The hint

A glitch tear on "convert.", a pixel hand that presses it and a field of code rain - once at 1.2s, then every 5s, killed for good by the first click, never scheduled under reduced motion. Tune it in the Glitch tool.