annotated analysis · gradient · ambient · continuous

Stripe's hero animation — ambient gradient motion, decoded

The hero section uses continuous data-driven and ambient motion, featuring a live decimal counter and an infinite logo marquee over a slow-drifting iridescent mesh background.

The UI maintains constant activity to signal real-time scale. A decimal ticker updates digits rapidly for 'Global GDP', while a partner marquee scrolls horizontally along the bottom. In the background, a large-scale iridescent gradient mesh flows in an amorphous, slow-motion loop.

Choreography, beat by beat

Partner logo marquee maintains infinite horizontal scroll (leftward)
Global GDP counter updates decimal digits with periodic refreshes
Background mesh gradient initiates slow-motion iridescent drift
Headline gradient text spans display a subtle ambient shimmer

feelfluidpremiumdynamichigh-precision

Element	Change	From → To	Timing
Logo Marquee	transform	0px → -200px	10000ms · linear
Global GDP Counter	morph	1.67413 → 1.6741316	100ms · linear
Background Mesh	other	state-a → state-b	60000ms · ease-in-out

What video honestly can't tell you

Exact easing of the background shader deformation
Initial page-load entrance stagger for nav and headline
Precise trigger for GDP counter updates

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.

Stripe's hero animation — ambient gradient motion, decoded

Choreography, beat by beat

What video honestly can't tell you

Recreate it yourself

More decoded animations