Axial is an Astro 7 theme for independent agencies, B2B studios and creative consultancies, built with Tailwind CSS 4, TypeScript and Lenis for smooth scrolling.
The homepage ships with a full-bleed hero video, a selected-work reel, a five-stage process shown as a scroll-driven dial around an exploded lens, flip stat cards, a testimonial slider and a client logo strip. Inner pages include four capability pages, an About page with leadership bios and studio locations, a journal with category filters, and a contact page with a working enquiry form.
Every section reads from one file, src/config/site.ts, so rebranding the theme is a text edit, not a rebuild.
Who it's for
- Independent strategy, design and digital agencies
- B2B brand and creative consultancies
- Product and design studios with a small senior team
- Campaign and content studios that need case studies
- Consultancies that publish a point of view
- Any studio that wants capabilities, a journal and a contact funnel in one site
What's distinctive
- A scroll-driven five-stage process orbit - a dial that turns as you scroll, each stage snapping into place around an exploded lens image. On mobile it becomes a swipeable slider
- A hero loop with a converging headline - a silent full-bleed video with a poster fallback, and two display words that slide together during the opening scroll
- A header that follows the page - every section declares whether it is dark or light and the fixed header re-themes itself as you scroll past
- Motion with a job - stat cards flip to reveal their story, testimonials stage in line by line, a selected-work reel advances with a progress bar, and the footer clock ticks
- An About page that moves - a pinned scrubbing timeline, leadership bios in a slide-in dialog, and a studios block that scrubs through three cities
- Eight journal entries and four capability pages generated from the config, with category filters
- Pointer-reactive dot fields on dark surfaces
Built to be fast
- No jQuery, no GSAP, no plugin bundle. Lenis for smooth scrolling plus one hand-written TypeScript module for everything else
- 16 WebP images, 1.6 MB for the whole theme, and a 1.3 MB silent hero loop with a WebP poster fallback
- Geist and Geist Mono self-hosted, so no third-party font request
- Every animation respects prefers-reduced-motion
Agent-ready and i18n-ready
Ships an AGENTS.md and a CLAUDE.md at the project root. Claude Code, Cursor, Copilot and Codex read them on open, so an AI assistant starts with the file map, a task-routing table, the design decisions worth preserving and the six things that break the theme quietly. Every route also has a localized twin, so adding a second language is one override file.
What's included
- Full source: Astro 7, Tailwind v4, TypeScript and Lenis
- 21 generated pages from 11 route templates: Home, About, Capabilities index and detail, Journal index, filters and article, Contact, Privacy and a custom 404
- Four capability pages and eight journal entries (articles and case studies) as editable config objects
- 17 sections built for this theme, not a generic library
- One-file config at src/config/site.ts, no code changes needed for branding
- Contact form wired to Formspree, FormSubmit, Netlify Forms or a custom endpoint, plus a footer newsletter
- Self-hosted Geist and Geist Mono fonts
- Cloudflare Pages deploy command
- Lifetime updates for this theme
- Documentation at aerolaunch.app/docs/themes/axial
