annotated analysis · typography · word-swap · vertical

Unicorn Studio's hero animation — vertical typographic word-swap, decoded

Typographic hero section featuring a vertical word-swap. The word 'WebGL' transitions to 'Magic' via a synchronized upward slide and cross-fade.

The landing page initializes in a static state. At 450ms, a crisp typographic transition occurs in the primary headline: the word 'WebGL' slides upward and fades away while 'Magic' enters from below to take its place. The rest of the UI, including the navigation and CTA, remains completely static.

Choreography, beat by beat

Static hero layout with 'WebGL' text visible
'WebGL' slides up and fades out + 'Magic' slides up and fades in
Headline settles on 'Magic' at rest

feelsnappycrispminimalistprofessional

Element	Change	From → To	Timing
WebGL Word	transform	0px → -20px	150ms · ease-out
WebGL Word	transform	1 → 0	150ms · ease-out
Magic Word	transform	20px → 0px	150ms · ease-out
Magic Word	transform	0 → 1	150ms · ease-out

What video honestly can't tell you

carousel cycle duration
hover states for nav/buttons
font family specifics
additional words in carousel sequence

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.

Unicorn Studio's hero animation — vertical typographic word-swap, decoded

Choreography, beat by beat

What video honestly can't tell you

Recreate it yourself

More decoded animations