Back to home

annotated analysis · stagger · entrance · continuous

PostHog's hero animation — staggered header and continuous motion, decoded

The page-load sequence features a staggered header entrance followed by continuous ambient loops within a bento-style feature grid, emphasizing a live, functional backend feel.

The hero section loads with primary messaging and the feature grid already in place. After a brief delay, the top-right navigation elements slide and fade into position. Simultaneously, the feature cards activate with continuous animations: a vertical user marquee in the Authentication card and a path-tracing node on a wireframe globe in the Edge Functions card.

Choreography, beat by beat

  1. Initial page load with static hero text and feature grid
  2. Top-right nav cluster fades and slides left into position (750ms)
  3. Authentication user pills initiate a continuous staggered vertical marquee
  4. Edge Functions globe node begins tracing a wireframe path loop
feelsnappytechnicalorderlymechanical

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.

More decoded animations