annotated analysis · glassmorphism · stagger · rise

Superhuman's hero animation — glassmorphism cards in staggered rise, decoded

A hero section assembly where glassmorphism UI cards arrive via a staggered rise-and-fade, settling into a continuous, unsynchronized ambient bobbing motion.

The interface components emerge from the background through a soft fade and upward slide. The lower-left inbox card enters last, completing the composition before all floating elements transition into a slow, independent vertical oscillation that suggests a 'live' digital environment.

Choreography, beat by beat

Primary hero text and CTA button settle into place
Floating UI cards (Chat and Workspace) fade in with a slight upward drift
Bottom-left Inbox/Calendar list slides up from the viewport edge
All floating elements enter an infinite, offset ambient bobbing loop

feelethereallayeredweightlesspremium

Element	Change	From → To	Timing
Inbox List Card	transform	bottom +50px → resting position	800ms · ease-out
Floating UI Cards	transform	y: -5px → y: +5px	3000ms · ease-in-out
Hero CTA Button	reveal	0.0 → 1.0	600ms · ease-out

What video honestly can't tell you

Exact easing values for the ambient loop
Initial opacity state of text elements before the video starts
Whether the background man profile has a micro-parallax effect

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.

Superhuman's hero animation — glassmorphism cards in staggered rise, decoded

Choreography, beat by beat

What video honestly can't tell you

Recreate it yourself

More decoded animations