Word flip-in (3D)

Words rise out of masks with a 40deg X-axis rotation — more cinematic than a flat lift. Nav uses this for the /yeg hero H1. Give it perspective on the parent or the rotation looks flat.

by FWONhero animation-textvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<h1 class="a22">
  <span class="w"><span>Actually</span></span>
  <span class="w"><span>ship</span></span>
  <span class="w"><span>the</span></span>
  <span class="w"><span>thing</span></span>
  <span class="w"><span><em>tonight.</em></span></span>
</h1>

Block id: tim-22-word-flip-in-3dvanilla · drop-in

More hero blocks

Split hero with booking-card mockup

cal.com

Split hero with glowing app mockup

linear

Staggered blur word-reveal headline

linear

Hero video dialog with thumbnail

magicui

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call