Studiox — Creative Agency Astro Template
A calm, editorial Astro template for creative agencies: liquid-chrome hero, kinetic wordmark, Markdown work and journal, and GSAP motion.
Or get this and every other template for $99 with the All-Access Pass.
About this template
About this template
Studiox is a calm, editorial Astro template for independent creative agencies, design studios and freelancers. Big Geist type, a single cobalt accent and generous white space keep the focus on the work, while a real-time liquid-chrome hero and a kinetic wordmark give it a crafted feel from the first scroll.
Projects, articles, services and team members are Markdown files, so the site grows by adding a file. It is built with Astro 7, Tailwind CSS v4, GSAP, Lenis and TypeScript.
Pages
- Home: 16 sections, including the WebGL hero with an expanding video, a scroll-driven image zoom, services with a hover preview, selected work, client logos, process, numbers, a draggable team row, awards, a drag-to-shuffle testimonial deck, pricing, journal, FAQ and contact
- Studio: page hero, the studio story, values, numbers, client logos and the team
- Services: four disciplines with deliverables, the four-step process, two pricing plans and an FAQ
- Work: the project list with sector, year and summary
- Project detail: challenge, approach, three result numbers and a gallery
- Journal: the article list with cover, category and date
- Article: cover, meta and the Markdown article body
- Pricing: a project plan and a retainer plan, what is always included, and an FAQ
- Team member: portrait, role, focus areas, bio and LinkedIn link
- Contact: a brief form with choice chips and validation, plus a live studio clock
- Privacy Policy: page hero and clause sections
- 404: a short message and a link home
Built in
- Liquid-chrome hero: a WebGL shader blob that follows the cursor.
- Kinetic wordmark: the letters of the big wordmark swell under the cursor on the font's weight axis.
- Intro loader and page transitions: a cobalt loader built from the logo mark, and a curtain that carries the name of the page you are heading to.
- Crosshair cursor: thin full-height lines with a label that changes per section, on devices with a mouse.
- Scroll motion: GSAP ScrollTrigger text, block and image reveals, a scroll-driven image zoom, drawn process lines and pixel-edge dissolves.
- Smooth scroll: Lenis.
- Counters: NumberFlow numbers and pixel-grid stats that fill as they enter the viewport.
- Testimonials and team: a drag-to-shuffle quote deck and a draggable team row.
- Menu and header: an animated menu, a header that adapts to the section behind it, and a back-to-top control.
- Reduced motion: loaders, reveals and transitions are skipped, and every section stays visible and readable.
Easy to edit
- Email, navigation, footer and social links live in
src/data/site.ts; home and page copy live insrc/data/home.tsandsrc/data/pages.ts. - Projects, articles, services and team members are Markdown files in
src/data/. Adding a file adds a page or a row, and a Zod schema names the file if a field is wrong. - Colours and easings are tokens in
src/styles/variable.css, and the type scale is insrc/styles/typography.css. - Every page sets its own title, description, canonical, robots and Open Graph tags, and the sitemap and
robots.txtare built from the site URL.
Good to know
- Images: the photos and hero video in the download are placeholders at the exact demo size, so the layout stays as you see it.
- Forms: the contact form opens the visitor's mail app with the enquiry filled in. One step in
src/scripts/contact-form.tschanges it to a form service. - Output: fully static HTML, ready for any static host.
- Requirements: Node 22.12 or newer, with Bun or npm.
The download includes a full documentation page covering setup, content, tokens, images, motion and deployment.