annotated analysis · stagger · entrance · fade

Raycast's hero animation — coordinated staggered entrance, decoded

The page performs a coordinated staggered entrance: the primary headline and footer CTAs slide upward and fade in, followed by the secondary subtitle. Later, header call-to-action elements reveal themselves with a subtle inward slide.

The hero section builds from the center out. First, the headline and main action buttons rise and fade into view. Shortly after, the descriptive subtitle fills the space between them. After a 2-second hold, the top-right header finishes its assembly as the 'Download' button and 'Log in' link slide into their final positions.

Choreography, beat by beat

Headline and primary footer buttons slide up + fade in
Secondary subtitle fades and slides up into the center gap
Header nav links fade in at the top
Delayed reveal: Header 'Download' button slides left into position
Header 'Log in' link fades in next to the button

feelcleansophisticatedstaggeredprecise

Element	Change	From → To	Timing
Hero Headline	transform	y: +20px, opacity: 0 → y: 0px, opacity: 1	600ms · ease-out
Subtitle Text	transform	y: +15px, opacity: 0 → y: 0px, opacity: 1	500ms · ease-out
Header Download Button	transform	x: +30px, opacity: 0 → x: 0px, opacity: 1	400ms · ease-out
Primary CTA Buttons	transform	y: +20px, opacity: 0 → y: 0px, opacity: 1	600ms · ease-out

What video honestly can't tell you

Exact spring constants for the slide-up motion
Hover states for the header navigation links
Existence of background noise or subtle texture grain

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.

Raycast's hero animation — coordinated staggered entrance, decoded

Choreography, beat by beat

What video honestly can't tell you

Recreate it yourself

More decoded animations