Studio
A creative agency website template.
A complete website for a design studio or creative agency: a 3D hero where your studio's name is a solid object, selected work in a sideways strip, a page for every project, a team page and a project enquiry form. Built with Astro 5, TypeScript and plain CSS. Static output, no trackers, no runtime CDN, self-hosted fonts. Part of the Cardzo template gallery.
- For
- Creative agency
- Built with
- Astro 5, TypeScript, plain CSS (engine tokens), three.js
- Pages
- 6 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
The studio's name cut from a solid block in 3D, drifting slowly and turning toward the pointer.
What you get
Straight from the template's README, the same file you will find in the repository.
- Signature 3D hero. Your studio's name cut from a solid block in the site's own display face (three.js), standing directly on the page beside the headline. It rises into place, drifts slowly and turns a few degrees toward the mouse. Lazy loaded, pixel ratio capped at 2, paused off screen and in hidden tabs, one still frame under reduced motion, and a same-size still image if WebGL is missing.
- Selected work, pinned and sideways. On wide screens the section holds while your normal scroll moves the strip sideways (CSS scroll-driven animation, with a light fallback). Never hijacks scrolling. On phones, tablets and with reduced motion it is a swipeable row.
- Case study template: facts, hero picture, challenge, approach, outcomes with figures that count up once, a picture grid that opens as you scroll, a client quote, credits and the next project. The card picture you click grows into the case study hero (View Transitions, where the browser supports them).
- Work index with discipline filters (shareable as
?discipline=packaging), live result count for screen readers, a designed empty state, and cards that glide to their new places. - Services on a full colour field, a process story with a held picture that changes per stage, a typographic client list that links to case studies, testimonials, an awards and press table and a closing call to action.
- About: statement, studio photographs, values, team grid and a hiring note.
- Contact form with validation, an error summary, sending, sent and network-error states. Posts JSON to any form service you choose, or opens the visitor's email app if you set none.
- 404 page.
- Light and dark themes that follow the system until the visitor picks one; the switch opens the new theme as a circle from the button.
- Accessible: semantic HTML, skip link, visible focus everywhere, keyboard-friendly menu and strip, AA contrast checked by script, reduced motion respected throughout.
- Phone (390 px), tablet and desktop (1440 px) layouts for every page.
- All words, links, projects and images in one file:
src/data/content.ts. - 53 original placeholder artworks (SVG) in each fictional client's colours, listed in
IMAGES.md.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Work
- Case study
- About
- Contact
- 404
Stack
- Astro 5
- TypeScript
- plain CSS (engine tokens)
- three.js
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
