annotated analysis · simulated-ui · typing · fade

Arc (Dia)'s hero animation — simulated AI interaction, decoded

A landing page hero featuring a simulated AI interaction inside a browser mockup, supported by a slow-fading iridescent aurora background and staggered chat elements.

The hero section initializes with a static layout before a soft iridescent glow fades in behind the central browser mockup. Inside the mockup, a user query slides in, followed by a staggered reveal of processed tabs and a final text-based AI summary, creating a high-end technological feel.

Choreography, beat by beat

Initial page load with flat beige background
Iridescent 'aurora' glow fades in behind the hero content
User chat bubble slides in from the right into the mockup
Staggered list of browser tabs reveals with a vertical slide-up
Final AI summary text fades in to complete the interaction

feelfluidatmosphericintelligentdeliberate

Element	Change	From → To	Timing
Aurora Glow	reveal	0 → 1.0	1000ms · ease-out
Aurora Glow	other	shifting hues → shifting hues	8000ms · linear
User Chat Bubble	transform	right-offset → center-right	400ms · ease-out
Tab Items	reveal	0 → 1.0	300ms · ease-out

What video honestly can't tell you

Exact easing values for the aurora color shift
Z-index layering of the scalloped borders
Specific trigger for the AI sequence (time-on-page vs scroll)

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.

Arc (Dia)'s hero animation — simulated AI interaction, decoded

Choreography, beat by beat

What video honestly can't tell you

Recreate it yourself

More decoded animations