annotated analysis · wipe · reveal · entrance
Cal.com's hero animation — coordinated entrance with text wipe reveal, decoded
A coordinated hero-section entrance where text reveals through a wipe/mask while UI components slide and fade into position, concluding with a staggered pop-in of social proof badges.
The page builds from a clean shell, starting with a smooth left-to-right mask reveal of the hero title. This is followed by the description and CTA buttons sliding up from below, while the interactive scheduling widget assembles itself on the right. Finally, a row of trust indicators and star ratings pops into the footer with a crisp, springy feel.
Choreography, beat by beat
- Hero title reveals via horizontal mask/wipe
- Badge and description text fade in underneath
- Primary CTA buttons slide up and fade into view
- Scheduling widget container fades in + internal calendar grid assembles
- Social proof badges (Trustpilot, PH, G2) scale into place
- Page settles into a final static resting state
Recreate it yourself
This entire page was generated by one analysis. Point your AI agent at any clip or live site and get the same blueprint — plus ready-to-paste code. Try MotionLens free (5 credits, no card) or read the Claude Code setup guide.