Velocity Motion
Dark themed landing page with Framer Motion animations built on Astro + React.
Velocity Motion is a showcase of what happens when you combine Astro's static performance with React's interactivity and Framer Motion's animation capabilities. Built as a dark-themed landing page, it demonstrates scroll-triggered animations, staggered reveals, and smooth page transitions — all while maintaining sub-second load times thanks to Astro's island architecture.
Astro + React + Framer Motion
Performance Meets Motion Design.
A dark-themed landing page that proves you don't need to sacrifice performance for animation quality. Astro handles static content while React islands power interactive Framer Motion sequences.
Project Overview
Scroll-driven storytelling with zero jank.
The challenge with animation-heavy websites is keeping them performant on lower-end devices. Velocity Motion solves this by leveraging Astro's partial hydration — only the animated components ship JavaScript to the browser, while the rest of the page is pure static HTML. The result is a page that feels alive with motion but loads instantly. Animations include viewport-triggered fade-ins, parallax scrolling, hover state transitions, and orchestrated entrance sequences. The project is live at velocity.aidxn.com and serves as both a portfolio piece and a reference implementation for developers building animated Astro sites.