Uncommon Studio: Creative Studio Website Case Study

A studio's own website is the hardest brief there is: it has to be the portfolio piece, not just display one. This Uncommon Studio case study breaks down how I built the creative studio website for Uncommon Studio — an Australian design studio — with Next.js, GSAP and Strapi, and how that build earned Awwwards Site of the Day, the Awwwards Developer Award, and an FWA award. If you're a studio or agency wondering what a flagship, motion-led site actually takes to ship at this level, this is the engineering and the trade-offs, written by the developer who built it.

Who built it — and why the developer credit matters

The Uncommon Studio site was a collaboration: Uncommon (Oliver Muñoz) on design direction, and Hon Tran — me — as the creative developer. Oliver and I had already shipped award-winning work together (the Mat Voyce kinetic-typography portfolio, an Awwwards Site of the Day), so this time the brief was personal: build the studio's own home.

Leading with the dev credit isn't a trophy count. When a brief lives or dies on motion, the gap between a gorgeous Figma file and a site that feels alive at 60fps is the developer. I've spent 11+ years building award-winning web experiences for clients across Norway, Denmark, Sweden, Malta, Germany, Australia and Vietnam; I've been named Awwwards "Independent of the Year" twice and I sit on the Awwwards jury. On a studio's own site — where the audience is other designers and discerning buyers — that experience is the difference between a site that proves the studio's taste and one that quietly undersells it.

The brief: a site that proves the studio, not just describes it

Uncommon's positioning is direct — "We design for impact. See for yourself." — and that "see for yourself" is the whole problem. A studio that tells you it does uncommonly good work, on a site that feels ordinary, has already lost the pitch. The site itself is the proof.

Three constraints shaped every decision:

• The site is the case study. Every transition, hover and scroll had to read as deliberate craft — the kind of detail a prospective client notices without being able to name.
• The work has to stay crisp. Featured projects (like Yondr) are shown in full-bleed imagery and video reels. No effect could ever soften or degrade that source material — it's the product.
• The studio updates it themselves. New projects, new reels, reordered work — none of that can require a developer or a deploy. That meant a headless CMS from day one.

The craft: Next.js, GSAP and Strapi

The stack is Next.js on the front end, GSAP driving the entire motion system, and Strapi as the headless CMS. Here's how the signature pieces came together.

Directed page transitions, not route swaps

The first thing the Awwwards jury responds to on a studio site is continuity — navigation should feel choreographed, never like a hard cut between two pages. The trick is to treat a route change as one timeline: the outgoing content, a cover, and the incoming page are a single orchestrated sequence rather than two disconnected events.

import gsap from 'gsap'

function pageTransition(swapRoute: () => void) {
  const tl = gsap.timeline({ defaults: { ease: 'expo.inOut', duration: 0.9 } })

  tl.to('[data-cover]', { yPercent: 0 })                    // cover wipes in
    .add(swapRoute)                                          // swap route at the apex
    .to('[data-cover]', { yPercent: -100 }, '+=0.05')        // reveal the new page
    .from('[data-page] [data-stagger]', { yPercent: 110, stagger: 0.05 }, '<0.2')

  return tl
}

The position parameters ('<0.2', '+=0.05') are what make it feel intentional: the new page's content starts lifting before the cover fully clears, so the eye never lands on a dead frame. Pair that with inertia-based smooth scrolling and the whole site reads as one continuous surface — the deeper mechanics are in my guide to smooth scroll in Next.js with GSAP & Lenis.

Reels that feel premium without tanking performance

Uncommon's home page leans on video — a featured-project reel with mute/unmute and play/pause controls. Video is the single biggest performance trap on a site like this: autoplay a wall of clips and you'll watch the page choke. The discipline is simple but strict — one active video at a time, lazy-loaded, with a poster frame standing in until it's actually needed.

const reels = gsap.utils.toArray<HTMLVideoElement>('[data-reel]')

function activate(target: HTMLVideoElement) {
  reels.forEach((video) => {
    if (video === target) {
      video.play()
    } else {
      video.pause()      // never decode more than one clip at once
      video.currentTime = 0
    }
  })
}

The swap animation between projects only ever touches transform and opacity, so the interaction stays buttery even while a new clip decodes in the background. That's the difference between motion that feels expensive and motion that feels broken.

Strapi: so the studio owns its own site

Choosing Strapi as the headless CMS meant every project — title, hero reel, gallery, client, ordering — is a content entry, not a code change. Next.js fetches it at build/revalidation time and renders static-fast pages, while Uncommon adds new work through the Strapi admin without ever touching a deploy. For a studio whose roster grows constantly, that's the difference between a living site and one that silently goes stale six months after launch.

Keeping it fast under all that motion

An award doesn't survive a janky scroll. The performance habits that carried this build:

• Animate only transform and opacity. They're GPU-composited and skip layout/paint, so the main thread stays free for scroll.
• Lazy-init the heavy stuff. Reels and motion-heavy sections only spin up as they near the viewport, and pause when scrolled away — no cycles burned on what you can't see.
• Respect the visitor. gsap.matchMedia() disables the heavy choreography under prefers-reduced-motion, so the site stays accessible without forking the codebase.

const mm = gsap.matchMedia()
mm.add('(prefers-reduced-motion: no-preference)', () => {
  // full transition + reel choreography lives here
})

If you want the full performance playbook these habits come from, see my guide on Core Web Vitals for animation-heavy sites.

The result: the awards (and what they signal)

Award	Body	What it judges
Site of the Day	Awwwards	Design, usability, creativity, content
Developer Award	Awwwards	The front-end engineering specifically
FWA Award	The FWA (Favourite Website Awards)	Cutting-edge digital craft

The one I'd point to is the Awwwards Developer Award. Site of the Day rewards the whole package; the Developer Award is the jury singling out the engineering — the transitions, the performance, the build quality — as best-in-class. On a studio's own site, that's the most useful signal a buyer can get: the team behind it doesn't just design well, it ships at that level. You can see the build live at uncommonstudio.com.au and verify the recognition on Awwwards and The FWA.

What this case study is really about

The lesson generalises well past one studio site: a motion-led site lives or dies on the engineering, not the mockup. The same playbook that won here — a GSAP motion system, a headless CMS the client controls, and ruthless performance discipline — is what makes any flagship brand or studio site ship instead of stall.

It's also why agencies and studios increasingly bring in a specialist for the build rather than forcing motion and WebGL through a generalist team. If that's your situation, my guide to white-label creative development for agencies walks through how that partnership works, and if you're scoping budget, how much an animated website costs breaks down the numbers.

FAQ

What is the Uncommon Studio website built with?

Next.js on the front end, GSAP for the full motion system (page transitions and reel interactions), and Strapi as the headless CMS — a stack chosen for fast, content-managed pages that still support heavy, choreographed motion the studio can update itself.

Who designed and developed the Uncommon Studio site?

It was a collaboration between Uncommon (Oliver Muñoz) on design direction and Hon Tran as the creative developer, responsible for the front-end, GSAP motion system and Strapi integration.

What awards did the Uncommon Studio website win?

Awwwards Site of the Day, the Awwwards Developer Award (recognising the front-end engineering), and an FWA award.

How do you keep a video-heavy studio site fast?

Play only one video at a time, lazy-load reels until they near the viewport, use poster frames as placeholders, animate only transform and opacity on swaps, and respect prefers-reduced-motion for accessibility.

Let's build something award-worthy

If you're a studio, agency or brand that needs a creative studio website with motion that actually ships — and wins — that's exactly what I do as a creative developer.

• See how I work and start a project on the hire page.
• Browse more shipped, awarded work in the projects archive.
• Ready to talk? Let's talk →

---

Written by Hon Tran — creative developer, founder of hontran.dev, and Awwwards jury member. 11+ years building award-winning, performance-first web experiences (GSAP, WebGL, Next.js) for clients worldwide. The first Vietnamese developer to win an international web award. hontran.dev · Behance.