Skip to content
heyrav design system
PatternsShipped

Loader

An iOS-style picker drum of services that collapses into the headline. Skips on deep links, repeat visits and under 400px.

Used onHome

I make websitesadsdesignsbrandsfilms

Show code
<p class="h1 d-center">I make <span class="d-drum"><span>websites</span><span>ads</span><b>designs</b><span>brands</span><span>films</span></span></p>
  • A real cylinder: rows rotate about the drum axis and push out by the radius, so they compress toward the edges.
  • Laid out by the same .wrap and h1 rules as the hero, so landing is structural, not a magic number.
  • No progress bar - the drum already is the progress indicator.
  • Exits by fading (the veil is the same paper as the page), and still runs under reduced motion with every transition snapped.