Everything you need to know about Astro Rocket, explained in practical guides.
A 3-state colour mode with no flash, live OS-preference tracking, and a pill dropdown that respects what the user picked. Here is how it is built.
How to drop a brand-tinted LetterGlitch canvas effect into an Astro 7 project: the full component, an Astro wrapper, and the production-ready details.
Every animation layer in Astro Rocket: the ease-out hero entrance, the staggered scroll-reveal cascade, and how it stays smooth with no JS animation library.
A 44-component UI library: buttons, cards, dialogs, forms, data display, and full page-structure components. All accessible, all themed.
Astro Rocket handles structured data, Open Graph, canonical URLs, sitemaps, and more out of the box. Here's exactly what ships and where to configure it.
Two bouncing chevrons that fade in after the hero animation and disappear the moment you start scrolling. How every part of the indicator works.
The back-to-top button has a circular SVG ring that fills as you scroll: brand-coloured, theme-aware, and built from CSS and a small inline script.
The contact form is wired up but needs three things to deliver email: a Resend account, a verified domain, and one environment variable on Vercel.
A thin brand-coloured line that fills as you scroll. How the progress bar works, where it lives, and how to enable it on any page.
Astro Rocket uses a three-tier token architecture with OKLCH colors. Change one value and the entire site updates. Here's how it works and how to make it yours.
The hero headline cycles through words with a typing animation. How it works, how to tune every speed and pause, and how to turn it off.
Clone Astro Rocket, pick a theme, and launch your next project in minutes.
Clone Astro Rocket, pick a theme, and launch your next project in minutes.