Atelier

About This Template

Atelier is a premium creative agency template built for design studios, branding consultancies, and creative firms. Eleven production-ready pages cover portfolio case studies, services, team, blog, careers, and contact. Two color skins — Warm Paper and Studio Night — switchable via a single HTML attribute. Variable-width font animation on the hero, GSAP scroll animations on every section, and six typed content collections for projects, posts, services, team, testimonials, and jobs.

Signature

The hero word "STUDIO" expands from thin condensed to full-width ultra-wide using Archivo's variable font width axis, with a color shift from burnt sienna to ink black synchronized to scroll position — a typographic statement that sets the creative tone instantly.

Features

• 11 complete pages — Home, Work, Case Study, About, Services, Blog, Post, Contact, Careers, Legal, 404
• 6 content collections — projects, posts, services, team, testimonials, jobs (Zod schemas)
• 2 color skins — Warm Paper (light) and Studio Night (dark) switchable via data-skin attribute
• Variable-width font hero animation — Archivo expands from condensed to ultra-wide on scroll
• GSAP scroll animations with 6 reveal variants on every major section
• Portfolio case study pages with dynamic routes and project detail layouts
• Testimonials carousel with client quotes and project attribution
• Team grid with member profiles and role descriptions
• Blog with Markdown posts and cover images
• Careers page with job listings from content collection
• Contact form with validation and magnetic button hover effect
• Lenis smooth scroll + Astro View Transitions
• Fluid typography from mobile to ultrawide — fully responsive
• 33 Unsplash-licensed images included — ready to ship
• SEO optimized — JSON-LD, Open Graph, sitemap, canonical URLs, robots.txt
• TypeScript strict mode — zero any

Deployment