Skip to content
heyrav design system
PatternsShipped

Annotations

One note at a time beside a pinned phone, each fading in only while its stretch of the page is on screen.

Used onPhone walkthroughEvidence reel
FoldThe form came first

Above the fold, before a single photo of the product.

Show code
<div class="ann d-w-sm"><span class="tag">Fold</span><b>The form came first</b><p>Above the fold, before a single photo of the product.</p></div>
<figure class="phone"><div class="screen"><img src="../assets/img/torq.webp" alt="" width="431" height="900" loading="lazy"></div><div class="pbar d-p25"><i></i></div></figure>
  • The stage is position:sticky; height:100vh inside a tall runway (560vh for the walkthrough, 820vh for the evidence reel).
  • Notes sit right-aligned in a rail to the left and read into the phone; below 900 the phone leads and the active note sits under it.
  • Invisible snap stops are parked at each beat so a long pinned run still snaps.
  • Captions are hidden with display:none when inactive on mobile, not just opacity.

See it live on ViewRyt; the reel was chosen off a three-way bench (axis A, 200vh).