By-Kin: An Award-Winning Website Case Study

Some sites win an award. By-Kin won four. This By-Kin case study breaks down a project that took home Awwwards Site of the Day, the Awwwards Developer Award, an FWA (TheFWA), and CSS Design Awards Web of the Day — the most decorated build in my portfolio, and the clearest answer I can give to what an award-winning website case study actually takes. It's a UK studio site built with Next.js, GSAP and Strapi, engineered so that every interaction, transition and pixel earns its place. Written by the Next.js + GSAP developer who shipped it.

Who built this — and why the Developer Award matters

By-Kin is a UK-based creative studio working across commercial interiors, branding and graphic design — a practice whose entire value is taste. The site had to read as confidently as the work they put in front of their own clients. I came onto it as the creative developer: the person responsible for turning a precise, motion-led design into a build that actually runs at that level in a browser.

Leading with that isn't a trophy count — it's the reason this project is worth studying. I've spent 11+ years building award-winning digital experiences for clients across Norway, Denmark, Sweden, Malta, Germany and Vietnam. I've been named Awwwards "Independent of the Year" twice, I sit on the Awwwards jury, and my work has earned multiple Awwwards Site of the Day awards alongside FWA and CSS Design Awards honors. On By-Kin specifically, the recognition that means the most is the Awwwards Developer Award — because that one isn't voted by the public or handed out for a pretty screenshot. It's the jury singling out the engineering: the motion system, the performance, the craft under the hood. That's the whole point of hiring a developer instead of buying a template.

The brief: less a portfolio, more a statement

A design studio's own website is the hardest brief there is. The work is the pitch, so the site can't just present projects — it has to be a project. The direction was clear from the start: By-Kin didn't want a grid of thumbnails. They wanted an immersive digital journey where the navigation, the reveals and the pacing tell a story, so a visitor leaves having felt the studio's sensibility rather than just scrolled past it.

Three constraints shaped every engineering decision:

• Motion had to feel directed, not decorative. Every transition needed a reason — guiding the eye, setting rhythm, building anticipation between projects. Random animation would have undercut a studio that sells intentionality.
• The imagery is the product. Interiors and branding live or die on the photography. No effect was ever allowed to soften, crop badly, or slow down a hero image.
• The studio updates it themselves. New projects, journal entries and case studies ship constantly, so the content had to live in a headless CMS, never in code.

The craft: Next.js, GSAP motion, and a Strapi content layer

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

Treating the whole site as one choreographed timeline

The thing the jury responds to on a site like this is cohesion — the sense that the page is one continuous, directed experience rather than a stack of independent components. The way you get there is to stop thinking in isolated animations and start thinking in shared timelines. Navigation, in particular, is built as a single orchestrated sequence: the outgoing view, the transition, and the incoming content are one GSAP timeline, not three 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)                                      // change route at the apex
    .to('[data-cover]', { yPercent: -100 }, '+=0.05')    // reveal the new page
    .from('[data-reveal]', { yPercent: 60, opacity: 0, stagger: 0.05 }, '<0.15')

  return tl
}

The position parameters ('<0.15', '+=0.05') are what make it feel authored — the new page starts lifting in before the cover has fully cleared, so the eye never lands on a dead frame. That overlap is the difference between motion that feels expensive and motion that feels like a default page load.

A motion language, not a pile of one-offs

A site this motion-dense collapses if every animation is tuned in isolation. The fix is a shared vocabulary: one curated set of eases, a consistent duration scale, and ScrollTrigger driving the section reveals so the rhythm reads as deliberate from the first scroll to the last.

import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

gsap.utils.toArray<HTMLElement>('[data-reveal]').forEach((el) => {
  gsap.from(el, {
    yPercent: 20,
    opacity: 0,
    ease: 'expo.out',
    duration: 1,
    scrollTrigger: { trigger: el, start: 'top 85%', once: true },
  })
})

Pairing that with smooth, inertia-based scrolling makes the whole page read as one surface. The deeper mechanics — pinning, scrub and parallax, plus the smoothing layer — are covered in my guides on smooth scroll in Next.js with GSAP & Lenis if you want the how-to.

Protecting the imagery

The hard rule — never degrade the work — drives a lot of small decisions. Images are served at the right size through responsive sources, transitions animate the frame around an image (mask, reveal, displacement) rather than crushing the source, and the layout commits to a deliberate, often portrait-first composition so photography is shown the way a studio would art-direct it, not however a generic grid happens to crop it. The result is motion that frames the work instead of competing with it.

Strapi: so the studio owns its own site

Choosing Strapi as the headless CMS meant every project, journal post and gallery is a content entry, not a deploy. Next.js fetches it at build/revalidation time and renders static-fast pages, while the team adds new work through the Strapi admin without ever calling a developer. For a studio whose portfolio grows every month, that's the line between a living site and one that quietly goes stale.

Keeping four-award craft fast

An award doesn't survive a janky scroll — and the Developer Award certainly doesn't. The performance discipline came down to a few non-negotiable habits:

• Animate only transform and opacity. They're GPU-composited and skip layout and paint, so the main thread stays free for scrolling.
• Lazy-load everything below the fold. Heavy media doesn't fetch until its section nears the viewport, keeping the initial payload lean.
• Respect the visitor. gsap.matchMedia() strips the heavy motion under prefers-reduced-motion, so the experience stays usable and accessible without forking the codebase.

const mm = gsap.matchMedia()
mm.add('(prefers-reduced-motion: no-preference)', () => {
  // full choreography lives here; reduced-motion users get instant, static reveals
})

This is the part most "animated" builds skip, and it's exactly the part a Developer Award jury looks for. Anyone can add motion; keeping it smooth, accessible and fast on a mid-range laptop is the actual craft.

The result: four awards, and what each one signals

Award	Body	What it recognises
Site of the Day	Awwwards	Overall excellence — design, creativity, usability
Developer Award	Awwwards	The engineering specifically — motion, performance, code
FWA of the Day	The FWA	Innovation and cutting-edge digital craft
Web of the Day	CSS Design Awards	Jury-scored UI, UX and innovation

Four bodies, four different juries, one site — that's the signal worth paying attention to. A public-leaning award says people liked it; the Awwwards Developer Award and an FWA say peers and professionals respected how it was built. Winning across all four means the site holds up whether you're a casual visitor, a designer, or an engineer reading the source. You can see the live build at by-kin.com and the listing on Awwwards.

What this case study is really about

The lesson generalises well past one studio site: a motion-led brand site lives or dies on the engineering, not the mockup. The same playbook that swept four awards here — treating the site as one choreographed timeline, a shared GSAP motion system, a headless CMS the client controls, and ruthless performance discipline — is what makes any high-motion site ship at that level instead of stalling at "looks great in Figma." If you're weighing what that costs and how to scope it, my guide on how much an animated website costs walks through it, and what a creative developer actually does explains the role that won the Developer Award. For more shipped, awarded work, browse the projects archive.

FAQ

What is the By-Kin website built with?

Next.js and React on the front end, GSAP for the entire motion system, and Strapi as the headless CMS — a stack chosen for choreographed, content-managed pages that stay fast under heavy motion and that the studio can update itself.

What awards did By-Kin win?

Four: Awwwards Site of the Day, the Awwwards Developer Award, an FWA (TheFWA), and CSS Design Awards Web of the Day — recognition spanning overall design, engineering, and innovation.

What is the Awwwards Developer Award?

It's the recognition Awwwards gives specifically for the development of a site — the motion system, performance, interactivity and code quality — rather than the visual design alone. It's the award that distinguishes serious engineering from a good-looking template.

Who built the By-Kin site?

By-Kin is a UK creative studio; Hon Tran (hontran.dev) was the creative developer responsible for the front-end build, the GSAP motion system, and the Strapi integration.

Let's build something award-worthy

If you're a studio, brand, or agency that needs a high-motion website with Next.js, GSAP and a headless CMS — built to actually ship, run fast, and win — 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.
• Hiring soon? Read how to hire a creative developer, then 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.