Gallery
Real UI motion, decoded
Every entry is a real analysis: the clip, the storyboard, and the exact timings + easing a developer (or their AI agent) can build from.
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.
Browserbase's hero animation — synchronized full-hero choreography, decoded
A synchronized page-load choreography where the entire hero section—header, headline, and pixelated terrain graphic—appears simultaneously with a rapid fade-in.
Neon's hero animation — infinite ambient glitching matrix, decoded
A dark hero section featuring an infinite ambient glitching matrix and a multi-layered, staggered UI entrance reveal.
Figma's hero animation — sliding headline with fanning image stack, decoded
Staggered hero reveal featuring a sliding headline, fanning UI image stack, and a secondary transition to an infinite loading spinner.
Family's hero animation — top-down bottom-up assembly reveal, decoded
A clean page-load reveal assembles a hero section through a top-down and bottom-up stagger, accented by slow-drifting iridescent background spheres.
Lusion's preloader animation — stepped counter choreography, decoded
A minimalist preloader featuring a centered progress container and a stepped numeric counter in the bottom-left corner. The choreography relies on timed text swaps and simple entrance fades against a black void.
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.
Magic UI's hero animation — synchronized fade-and-rise reveal, decoded
Snappy page-load choreography featuring a synchronized fade-and-rise text reveal and staggered icon entrance, anchored by continuous ambient mesh gradients and rotating button border glows.
Tailwind CSS's hero animation — simulated code-typing sequence, decoded
A technical hero demonstration featuring a simulated code-typing sequence that drives real-time reactive layout and style updates on a component preview card.
v0's hero animation — snappy template-grid reveal, decoded
Snappy content reveal for a template grid. Rich thumbnails and metadata fade and scale in at the 2.5s mark, replacing gray skeleton placeholders.
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.
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.
Superhuman's hero animation — glassmorphism cards in staggered rise, decoded
A hero section assembly where glassmorphism UI cards arrive via a staggered rise-and-fade, settling into a continuous, unsynchronized ambient bobbing motion.
Cal.com's hero animation — coordinated entrance with text wipe reveal, decoded
A coordinated hero-section entrance where text reveals through a wipe/mask while UI components slide and fade into position, concluding with a staggered pop-in of social proof badges.
Pitch's hero animation — shifting purple gradients with prompt entrance, decoded
Deep purple ambient gradients shift continuously while a central prompt input and subtitle fade and scale into the hero section.
Loom's hero animation — minimal entrance with sliding video card, decoded
The hero section features a crisp, minimal entrance where the central video card slides up and fades into view while the typography remains static, followed by a continuous ambient video loop of a talking-head recording.
Retool's hero animation — ambient loop of translucent UI panels, decoded
A dark hero section featuring a persistent ambient loop where blurred, translucent UI cards drift diagonally behind static product messaging.
Warp's hero animation — simulated page-refresh choreography, decoded
The UI performs a simulated page-refresh choreography where the hero content and header fade to near-zero opacity before smoothly revealing back to 100%. A persistent, horizontal marquee ticker at the bottom edge introduces industry integrations through text and colorful icons.
Fly.io's hero animation — staggered entrance with cinematic pan, decoded
A staggered hero entrance leads into a slow, cinematic ambient background pan. UI elements fade and rise into place while a terminal-style cursor blinks within the primary action button.
Railway's hero animation — slow-drift parallax clouds and CLI snap, decoded
Celestial landing page hero featuring slow-drift parallax clouds and a snappy CLI-style character loop on button hover.
PostHog's hero animation — staggered header and continuous motion, decoded
The page-load sequence features a staggered header entrance followed by continuous ambient loops within a bento-style feature grid, emphasizing a live, functional backend feel.
Supabase's hero animation — staggered entrance with ambient loops, decoded
Clean staggered entrance of hero navigation followed by subtle ambient loops in a bento-style feature grid, emphasizing live infrastructure.
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.
Raycast's hero animation — coordinated staggered entrance, decoded
The page performs a coordinated staggered entrance: the primary headline and footer CTAs slide upward and fade in, followed by the secondary subtitle. Later, header call-to-action elements reveal themselves with a subtle inward slide.
Resend's hero animation — cinematic dark-mode text reveal, decoded
A cinematic dark-mode hero reveal where text content fades in from a ghosted state while a subtle ambient light beam sweeps the background.
Linear's hero animation — minimalist dark reveal, decoded
Minimalist hero reveal on a dark landing page. A clean header precedes a delayed, multi-layered headline entrance featuring blur-to-clear and slide-up effects.
Stripe's hero animation — ambient gradient motion, decoded
The hero section uses continuous data-driven and ambient motion, featuring a live decimal counter and an infinite logo marquee over a slow-drifting iridescent mesh background.
A central headline anchors a radial explosion of mail-themed stickers that scatter across
A central headline anchors a radial explosion of mail-themed stickers that scatter across the viewport and transition into a slow, multi-layered ambient drift.
Snappy reward screens featuring character pop-ins with high-energy spring physics and stag
Snappy reward screens featuring character pop-ins with high-energy spring physics and staggered text reveals over pulsing backgrounds.
A multi-step wallet removal flow featuring a bottom sheet dismissal, staggered checkbox se
A multi-step wallet removal flow featuring a bottom sheet dismissal, staggered checkbox selections, a Dynamic Island FaceID authentication, and a vertical-to-horizontal collapse animation for the wallet card.
The interface assembles through a vertically coordinated choreography where a hero logo re
The interface assembles through a vertically coordinated choreography where a hero logo recedes into a background watermark while UI chrome and suggestion bubbles slide and fade into position from the edges.
Want your animation decoded like this? Analyze any clip or live site — 5 free credits, no card.