Framer Agency Website: Fieldwork Studio

A small design studio needs a site that sells one thing, taste. No templates, no stock photography, and the studio has to be able to edit it after handoff. I wrote the brief myself and built it to the standard I would hand a paying client.

Everything on the page is drawn or written for it. The project artwork is generated in code, so there is no stock imagery to licence or replace. The site had to score 95 plus on PageSpeed, work on a phone without a separate layout, and respect reduced-motion settings.

Kinetic hero. The serif word rotates through the studio's four services. It is a React code component inside Framer and falls back to a static word when the visitor has reduced motion on. Work grid. Each card's artwork is CSS, with a hover zoom and a cursor-follow pill on desktop, so swapping a project never breaks the layout. Services accordion. Real buttons with aria-expanded and visible focus states, so it works on a keyboard, not only a mouse. Process on a dark panel. Six weeks, four cards, fixed scope and price stated plainly, because that is the first question every founder asks.

Framer with four custom React code components, StudioHero, WorkGrid, ServicesList and Marquee. Fluid type in rem with a per-breakpoint base size, container queries inside the code components so they size themselves, and desktop, tablet and phone breakpoints checked by hand rather than left to auto-stacking. Every call to action points at one contact link, and the footer credit links back to my Contra profile.

Google PageSpeed Insights, desktop, 97 Performance, 98 Accessibility, 100 Best Practices, 100 SEO. Three breakpoints checked by hand, reduced-motion fallback on every animated component, and the studio can edit every word without touching code.

Live site: https://fieldwork-studio.framer.website

Want the same build for your own studio or product? The five-day landing page sprint on my profile uses this exact process.