Qevron — Architecture Studio Astro Template
An Astro template for architecture and interior design studios, with a floor plan that draws itself on scroll, WebGL project cards and a map view of the work.
Or get this and every other template for $99 with the All-Access Pass.
About this template
QEVRØN is an Astro template for architecture practices, interior designers and landscape studios. Serif display type sits next to light Archivo and small mono labels on white, with one burnt orange accent and large building photography.
Projects and articles are Markdown files and every page's copy lives in a content file, so the site grows without touching a component. It is built with Astro 7, Tailwind CSS 4, GSAP, Lenis and TypeScript.
Pages
- Home: intro loader, full-screen hero that blurs and scales as you scroll, about statement, scattered project cards, a floor plan that assembles on scroll, client logo marquee, services, testimonials on a hanging wire, awards list, journal, FAQ and a call to action.
- Work: nine projects in grid, list and map views, with filters for Residential, Hospitality, Cultural and Interiors.
- Project detail: header and hero image, facts table, intro, image pair, detail split, client quote, credits and a next-project link.
- Studio: story with animated numbers, values and the team.
- Services: four disciplines, each with its deliverables, plus an FAQ.
- Journal: featured article and a grid of the nine articles.
- Article: article header, Markdown body and related articles.
- Contact: enquiry form with selectable pills, studio details and a Google Maps embed that switches between two studios.
- Terms and Privacy: two legal pages, written in Markdown.
- 404: a designed not-found page.
Built in
- Floor plan on scroll: an SVG courtyard house assembles from its walls, windows, furniture and labels in a sticky section.
- WebGL project cards: home page project images tilt and bend with the pointer on desktop.
- Three views of the work: grid, list and an inline SVG map of Europe with pins, plus category filters.
- Hanging testimonials: cards hang from a wire that bends under the pointer, on autoplay with pause on hover.
- Scroll motion: GSAP ScrollTrigger reveals, text and image reveals, drawn arrows, animated counters and Lenis smooth scroll.
- Reduced motion: visitors who ask for less motion get a still page with all content visible.
Easy to edit
Site name, contact details and labels are in src/config/config.json, menus in src/config/menu.json, and colours, fonts and easing in src/styles/variables.css. Every page's copy is in src/content.
Add one Markdown file to src/content/work or src/content/journal and you get its page, its listing card and its sitemap entry. Every page has its own title, description, canonical and Open Graph tags, and the build writes a sitemap and robots.txt.
Good to know
- Images: the download has grey placeholders at the exact demo sizes, so the layout holds until you add your own.
- Forms: the contact, footer and menu forms are front end only. Connect them to your form service.
- Output: a static site that deploys to any static host.
- Requirements: Node 22.23.4 or newer and Bun or npm.
The download includes a full documentation page covering setup, content, tokens, images, motion and deployment.