annotated analysis · typography · fade · entrance

Mistral's hero animation — modular typographic entrance, decoded

A clean, modular landing page entrance where initial typography fades in, followed by a secondary beat where the headline expands and a vibrant orange mosaic grid slides up to anchor the layout.

The page initializes with a coordinated fade-in of the header and hero text. After a brief pause, the brand message expands vertically as a second line reveals itself, synchronized with a large pixelated mosaic grid sliding up from the bottom to fill the lower-left quadrant.

Choreography, beat by beat

Header and primary headline 'Frontier AI.' fade and slide up (20px)
Right-hand supporting text fades in place
Primary headline shifts up further to accommodate 'In your hands'
Orange mosaic grid slides up from the bottom edge into the left hero area
Featured news component settles in the bottom right
Ambient color shimmering begins within the mosaic grid squares

feelarchitecturalprecisemodulartechnical

Element	Change	From → To	Timing
Frontier AI Headline	transform	y:20px, opacity:0 → y:0px, opacity:1	400ms · ease-out
In your hands	reveal	opacity:0, y:10px → opacity:1, y:0px	450ms · ease-out
Orange Mosaic Grid	transform	y:100% → y:0%	500ms · ease-out-quad
Mosaic Cells	other	static hex → varied hex shift	3000ms · linear

What video honestly can't tell you

Exact easing values for the mosaic slide
Specific trigger for the 1.25s delay (timed vs asset-load)
Frame-by-frame color cycle of individual grid pixels

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.

Mistral's hero animation — modular typographic entrance, decoded

Choreography, beat by beat

What video honestly can't tell you

Recreate it yourself

More decoded animations