Overview
The studio wanted a new website that felt like a quiet gallery, not a campaign microsite. The goal was to showcase work in a way that felt deliberate, timeless, and comfortable to browse on large desktop screens.
Information architecture
The site is intentionally small:
- Home – a sequence of “chapters” that introduce the studio, capabilities, and selected work.
- Projects – a focused index with one paragraph per project.
- Journal – occasional notes on process and tools.
- Contact – a single, clear ask rather than multiple CTAs.
Navigation is handled with a slim top bar that disappears on scroll‑down and reappears on scroll‑up to keep the canvas as open as possible.
Visual language
- Strict black, white, and soft neutrals; no accent color.
- Wide horizontal bands to break the page into discrete, cinematic scenes.
- Small‑caps meta labels and generous letter‑spacing for headings.
- Thinner rules and dividers instead of heavy card borders.
Photography is desaturated and treated like layout elements, so it never competes with the typography.
Motion system
Framer Motion powers a few key behaviors:
- Chapter transitions – as the user scrolls, sections gently fade and slide, with a slight delay on secondary content.
- Link hover states – links nudge by 1–2px and adjust weight instead of changing color.
- Project previews – cards lift and cast a soft shadow to suggest depth, but never rotate or scale aggressively.
Every motion token is tied back to the same duration and easing scale used in the studio’s product work, so the marketing site feels like an extension of the apps.
Tech stack
- Astro for static generation and performance.
- React islands for interactive elements like nav and contact forms.
- Framer Motion for scroll‑aware transitions and hover feedback.
The result is a site that feels fast, quiet, and precise—even when viewed on large, high‑resolution displays.