annotated analysis · simulated-ui · choreography · dark
Framer's hero animation — dark UI mockup choreography, decoded
The landing page hero features a dark-themed UI mockup that executes a synchronized 'AI generation' sequence, characterized by a sudden content reveal in the canvas and a streaming status log in the sidebar.
After a brief hold, the mockup's AI agent triggers a rapid assembly of a website. A bold 'HAUS' logo and navigation scale into the central canvas while a status log slides up in the right panel. Simultaneously, an image ticker begins a continuous horizontal loop as the main page's utility navigation fades into the header.
Choreography, beat by beat
- Initial state: Hero holds on an empty UI mockup with a 'Thinking' status.
- Synchronized content burst: Large 'HAUS' logo and site nav scale/fade into the central canvas.
- Status stream: Multiple chat bubbles slide and fade up in the right sidebar with a tight stagger.
- Ticker activation: A horizontal row of images fades in and begins a seamless leftward scroll.
- Header completion: Main page 'Log in' and 'Sign up' buttons fade into the top-right corner.
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.