About the project
Astro Rocket is a production-ready Astro 6 starter that ships as a complete, styled website — not a blank slate. Clone it, update the text, go live. Everything else is already done.
It covers everything a serious portfolio or marketing site needs: a full design system, 57+ components, 12 live-switchable colour themes, dark mode, blog, projects, content collections, full SEO, RSS, sitemap, structured data, i18n scaffolding, and a suite of polished UI interactions — all wired together, all working on day one.
It’s built for designers, freelancers, and developers who want a site that genuinely impresses from the moment it launches.
12 Themes. Switch in Seconds.
The theme switcher is one of Astro Rocket’s most satisfying details. Twelve colour themes — Orange, Amber, Lime, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, and Magenta — toggle instantly in the header. Click a colour, and every button, link, badge, progress bar, and accent on the page updates in a single frame. No waiting, no code changes, no deploy.
The secret is CSS custom properties scoped to data-theme attributes on <html>. The browser does all the work — the server never needs to know. The full token system — how colours, spacing, and typography are wired together — is covered in How Astro Rocket’s Design System Works.
57+ Components, Six Categories
The component library is the core of the project. Every component is built for Astro, typed with TypeScript, styled with Tailwind CSS, dark-mode-aware, and theme-aware. Browse them all on the components page:
- UI — Badge, Button, Card, Alert, Toast, Tooltip, Progress, Table, Avatar, Accordion, Tabs, Dialog, Dropdown, Skeleton
- Patterns — Feature grids, pricing tables, testimonials, stats, step-by-step flows
- Layout — Header variants, Footer, PageLayout, Section wrappers
- Blog — PostCard, AuthorBio, TagCloud, RelatedPosts, ReadingTime
- Landing — Hero variants, CTA sections, social proof, FAQ, tech stack grid
- SEO — Breadcrumbs, structured data, Open Graph, canonical, sitemap, robots
Auto-Generated Branding
Change siteConfig.name and the logo badge and favicon update at runtime — automatically, in the right brand colour, with no design tools required. This is the detail that makes Astro Rocket genuinely forkable: new name, new colour, new site. Every available toggle is documented in the configuration guide.
SEO — The Complete Stack
Most starters ship three meta tags and call it SEO. Astro Rocket ships the complete implementation:
- JSON-LD structured data —
WebSite,Organization, andPersonschemas on the homepage;BlogPostingon every post — prerequisites for rich results in Google Search - Open Graph + Twitter Cards — full social metadata on every page, with post cover images wired in automatically
- Canonical URLs — constructed from the production domain, correct across staging and preview environments
- Auto-generated sitemap — every page included at build time; submit once to Search Console
- Per-page robots control —
noindex/nofollowon any page via a prop - Search Console verification — Google and Bing codes via
.env, no template edits
The full setup — what each piece does, how to configure it, and what rich results it unlocks — is in SEO in Astro Rocket.
The Interactions
Scroll progress bar. A 2px brand-coloured line runs along the bottom of the fixed header and fills as you scroll. Enabled on the homepage, blog index, and individual posts. Smooth, passive, requestAnimationFrame-throttled.
Scroll progress ring. As you scroll down the page, a thin arc traces around the back-to-top button — clockwise, from empty at the top to fully drawn at the bottom. It’s a quiet, satisfying way to know where you are on a long page without looking at a scrollbar. Click the button and you’re back at the top. The arc colour follows the active theme automatically — switch to a different colour and it updates instantly, no extra code needed.
Hero scroll indicator. Two stacked chevrons gently bounce at the bottom of the homepage hero, drawing the eye downward. They appear after the hero content has finished animating in and vanish the moment you start scrolling — desktop-only, zero intrusion.
Typing effect. The hero headline cycles through configurable phrases. The width is locked to the longest word before the animation starts, using a hidden off-screen measurer that inherits the exact computed font metrics — so the layout never shifts. A Core Web Vitals detail most typing effects get wrong.
Scroll reveal. Three distinct modes handle every case. data-reveal animates a single element into view — with direction variants for up, down, left, right, and scale. data-reveal-children cascades an entire grid of cards in sequence, each child staggering 100ms behind the last with a tunable --reveal-stagger custom property. data-reveal-content gives long-form pages like blog posts and project write-ups a per-block reveal: every paragraph, heading, and code block springs in individually as the reader scrolls to it. All three modes use an IntersectionObserver with a 15% threshold and a slight negative bottom margin, so the animation plays when the element is genuinely on screen — never off-screen where nobody sees it.
Spring curve. Every entrance in Astro Rocket uses cubic-bezier(0.22, 1.6, 0.36, 1) — a curve with the second control point above 1.0, which produces a controlled overshoot. The element travels a few pixels past its final position and snaps back, approximating a physics spring without any runtime library. This is the single detail that separates the animation feel from a standard ease-out: things arrive rather than stop. The same curve drives the hero stagger, the header drop-in, and every scroll-reveal transition across the site.
Hero entrance stagger. On page load, the hero content cascades in element by element — badge first, then title, description, and action buttons, each 90ms behind the last. A single parent class (animate-hero-stagger) handles all the timing with :nth-child selectors. No JavaScript scheduling, no component props. Simultaneously, the header drops in from above on its own spring curve, arriving 150ms after the hero starts rising — a counterpoint that feels choreographed rather than coincidental.
Header drop-in. The floating header slides in from above on its own spring entrance — cubic-bezier(0.22, 1.6, 0.36, 1) over 0.8 seconds, delayed 150ms so it lands just as the hero content is mid-rise. The from state mirrors the header’s auto-hide position exactly, so the entrance and the scroll-hide behaviour use the same transform values and never conflict.
A full technical breakdown of every animation layer — spring curve, stagger logic, observer tuning, and the reason view transitions are intentionally disabled — is in the Animations in Astro Rocket post.
Dark Mode — Done Right
Dark mode uses sessionStorage rather than localStorage. The difference: every new tab resets to the intended theme. A visitor who switched modes out of curiosity arrives back in the right one. First impressions are intentional, every time. The full reasoning is in Why Astro Rocket Uses sessionStorage for Dark Mode.
Lighthouse: 100 Across the Board
Astro Rocket scores 100 on every Lighthouse category — Performance, Accessibility, Best Practices, and SEO — on the live demo at astrorocket.dev. That’s not a tuned benchmark page; it’s the full site with animations, a theme switcher, typed headlines, and a contact form.
The scores are a side-effect of decisions made throughout the build: Astro’s static-first output keeps JavaScript off pages that don’t need it, images are processed through Astro’s built-in image pipeline, every interactive component meets WCAG contrast and keyboard requirements by default, and the SEO layer ships the full stack rather than just meta tags. Nothing is sacrificed to hit the number — the number reflects how the site is built.
Zero JavaScript by Default
Astro’s island architecture means every page ships pure HTML unless a component explicitly needs JavaScript. Interactive islands — theme switcher, contact form, typing effect, scroll indicators — hydrate themselves. Everything else stays static.
Open Source
Astro Rocket is open source under the MIT licence and submitted to the official Astro themes directory.