annotated analysis · stagger · typography · choreography
Anthropic's hero animation — staggered headline expansion choreography, decoded
A sophisticated page-load choreography where a minimalist headline expands via a staggered word reveal, followed by a large hero card sliding into view with a fading botanical illustration.
The sequence begins with a simplified brand statement that gracefully expands as supplementary words fade in to complete a complex mission statement. This typographic growth is followed by a deliberate upward slide of a large, parchment-colored card from the bottom edge, which then populates with a delicate butterfly illustration and announcement text, creating a high-end editorial feel.
Choreography, beat by beat
- Initial headline state displays 'AI products' in high-contrast serif typography
- Primary headline expands as keywords 'research', 'safety', and 'frontier' fade in synchronously
- Connective words 'and', 'that put', and 'at the' fade in to complete the sentence structure
- A large rounded-corner hero card slides up from the bottom viewport edge
- Botanical butterfly illustrations and 'Announcing Table 5' text fade in atop the card
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.