Design studio site · 2024

MosaicA portfolio engine where motion carries the narrative.

A studio portfolio where motion carries the narrative rather than decorating it. Every transition explains where you are and where you came from.

Role

Design + build

Year

2024

Stack

Next.js · Framer Motion · Prismic

3x
Case-study opens
0
Layout-shifting animations
98
Lighthouse performance

Theproblem.

The studio had strong work presented as a flat grid. Visitors bounced from the index without opening a single case study — the grid gave them no reason to.

WhatI did.

  1. 01

    Made the project card the transition subject, so opening a case study grows the card you clicked instead of cutting to a new page.

  2. 02

    Gave each project a distinct colour field so the index reads as a set of places rather than a list of rows.

  3. 03

    Kept every animation interruptible — clicking away mid-transition never traps you.

Whatchanged.

Case-study opens roughly tripled. The motion is load-bearing: remove it and the index stops explaining itself.