annotated analysis · stagger · entrance · ambient

Supabase's hero animation — staggered entrance with ambient loops, decoded

Clean staggered entrance of hero navigation followed by subtle ambient loops in a bento-style feature grid, emphasizing live infrastructure.

The page initializes with primary hero text static. Right-aligned navigation elements fade and slide into place late. Below, feature cards activate: the wireframe elephant draws into view while a technical grid globe begins a steady, continuous rotation.

Choreography, beat by beat

Initial hero text and primary CTAs are static
Right navigation group (GitHub stars, Sign-in, CTA) fades and slides in from the right
Postgres feature card reveals wireframe elephant with a path-draw effect
Edge Functions globe initiates continuous Y-axis rotation
Terminal cursor in command pill begins steady blinking loop

feelPreciseTechnicalLightweightLive

Element	Change	From → To	Timing
Right Navigation Group	transform	0.0 → 1.0	600ms · ease-out
Elephant Wireframe	reveal	0.0 → 1.0	800ms · ease-out
Rotating Globe	transform	0deg → 360deg	20000ms · linear
Terminal Cursor	other	1.0 → 0.0	800ms · step-end

What video honestly can't tell you

Exact easing values for the navigation slide
Frame-perfect start time for the elephant path reveal
Whether the globe rotation speed is constant or variable

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.

Supabase's hero animation — staggered entrance with ambient loops, decoded

Choreography, beat by beat

What video honestly can't tell you

Recreate it yourself

More decoded animations