Animation studio

Usually the end client can't see our work directly, which is the arrangement. This time the client was the studio, the work was the site that carries their own showreel, and every person reviewing the staging link judges timing for a living. There's no kinder audience and no harsher one.

Where it started

Their own site had been the cobbler's-children project for three years: designed twice internally, built never. When the second design was finished they sent it over with the sheepish note every studio attaches to their own site. We treated it like any client file, with the same two-day review, the same fixed quote and the same block list, and they said later that was the moment it stopped being a someday project.

As the build went on, the overlay pass turned competitive. Their animators checked staging against the file before we did and filed pixel notes at midnight, and by week four the review calls were less sign-off than sport. The final block shipped with a deviation list of zero, mostly out of pride on both sides.

The build

The project builder is a block kit tuned for showing moving work: a full-bleed film, a diptych, a storyboard-to-final comparison, a measured text column, and a strip of stills that behaves on a phone. Each project carries its own palette and type-scale fields, so a project page can take on its subject's art direction without anyone touching a stylesheet.

Because the studio would be assembling pages themselves, the control panel mattered as much as the front end. Field instructions are written in their vocabulary, blocks preview with their thumbnails, and anything we'd have had to explain twice got redesigned until we didn't.

A control panel held to the same standard

The palette fields aren't free colour pickers. They store two colours per project and run them through a validation rule that refuses any pair failing contrast at the type sizes the project blocks use, which leaves the studio free to be adventurous on a Friday afternoon without publishing something illegible.

Block thumbnails in the picker are exported straight from the studio's own Figma file, so choosing a layout feels like flicking through their design system rather than guessing from names. The film block self-hosts, with a queued job cutting each upload into three sizes and the player choosing between them by connection instead of by screen. The poster is a frame the studio picks, because an animator will not accept the frame a machine picked for them.

We built in their order of impatience: the project template first, so they could start loading real work while the rest of the kit was still grey boxes. That surfaced two rounds of field-instruction rewrites before launch instead of after, and meant the site went live with fourteen finished projects rather than a coming-soon page. The storyboard comparison is the only custom JavaScript on the page. It drives with keyboard arrows as well as a pointer, and without JavaScript it degrades to the two images stacked.

Interaction

The per-project palette is where Craft's flexibility shows. The two colour fields render as custom properties on the project's root element, so a project restyles every block it contains without a stylesheet deploy, and the studio can art-direct a new project page on a Friday and publish it the same day. The blocks query their container rather than the viewport, which lets the same diptych sit full-bleed on one page and inside a column on another and lay itself out correctly in both. It's most of why fourteen blocks behave like thirty.

The site itself hardly moves, because the films are the motion and anything competing with them looked like noise. Blocks enter with a short stagger, once, on first view, and the comparison handle carries a little weight so it settles rather than stops. Nothing autoplays, and all of it checks reduced motion first and doesn't run if it's on. The focus states were designed in the file rather than left to the browser, with ring colours drawn from each project's own palette and checked against the same contrast rule as the type, so tabbing through a project looks considered.

After launch

They've shipped every project since without us, which is the test of a builder. They now recommend us to the design studios they share clients with, which is how we met the studio behind the think tank above and how this is meant to work. Fourteen projects were live at launch. They've published nine more since without asking us a single question, which stings slightly and is what we were going for.