Mat Voyce: Award-Winning Portfolio Case Study

When the portfolio belongs to one of the UK's best kinetic typography artists, the website can't just show the work — it has to move like it. Mat Voyce is a type designer and animator whose 2D type-in-motion has appeared for brands like the Financial Times, Pepsi, UEFA and Nike. This award-winning portfolio website case study breaks down how that site was built — the brief, the GSAP motion engineering, the Strapi-driven content layer, and the performance discipline that earned it Awwwards Site of the Day and a GSAP Site of the Year 2025 nomination — written by the developer who shipped it.

Who built it — and why a developer credit matters here

The Mat Voyce site was a collaboration between studio Uncommon (Oliver Muñoz), designer Huy Phan — an Awwwards jury member — and Hon Tran as the creative developer. That's me.

Leading with that isn't about trophies. When a brief hinges entirely on motion, the gap between a beautiful Figma file and a site that actually 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 and Vietnam; I've been named Awwwards "Independent of the Year" twice and I sit on the Awwwards jury. On a type-animator's portfolio, that experience is the difference between animation that reads as craft and animation that stutters and undersells the artist.

The brief: a portfolio that animates like its owner

Mat is, in his own words, your friendly neighbourhood type designer and animator — known for a playful, illustrative style of type in motion. The problem is recursive and unforgiving: how do you build a portfolio site for someone whose entire craft is animation, without the site itself looking flat by comparison?

Three constraints shaped every decision:

• The type is the interface. Headlines aren't labels sitting above content — they're the hero, the navigation cue, and the personality. They had to be kinetic without feeling gimmicky.
• Showreels are the product. Mat's work is video. The site had to present commercials and collabs crisply, fast, and without the typical autoplay-everything performance tax.
• Mat updates it himself. A working artist ships new projects constantly. The site needed a headless CMS so adding a case study never required a developer.

The craft: GSAP, motion, WebGL and the content layer

The stack is Next.js on the front end, GSAP for the entire motion system, Strapi as the headless CMS, and targeted WebGL/canvas work for the heavier transitions. Here's how the signature pieces came together.

The kinetic-type hero

The hero had to land Mat's personality in the first second. The approach: treat each headline as a choreographed timeline of per-character (or per-word) transforms rather than a single CSS keyframe. Splitting the text into spans and staggering transform/opacity keeps everything on the GPU compositor, so even dense type animation never touches layout:

import gsap from 'gsap'
import { SplitText } from 'gsap/SplitText'

gsap.registerPlugin(SplitText)

const split = new SplitText('[data-kinetic]', { type: 'chars,words' })

gsap.from(split.chars, {
  yPercent: 120,        // rise from below the mask
  rot:    () => gsap.utils.random(-12, 12),
  opacity: 0,
  ease: 'back.out(1.7)',
  duration: 0.8,
  stagger: { each: 0.025, from: 'start' },
})

The back.out ease gives the overshoot-and-settle that makes type feel thrown into place — the same bounce Mat uses in his own animation work. Randomising rotation per character is what keeps it illustrative instead of mechanical.

Motion as a system, not a pile of one-offs

A site this motion-dense falls apart if every animation is hand-tuned in isolation. The fix is a shared motion language: one set of eases, a consistent duration scale, and ScrollTrigger driving section reveals so the rhythm stays coherent top to bottom.

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

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

The deeper patterns behind this — pinning, scrub, and parallax — are covered in our GSAP ScrollTrigger tutorial if you want the mechanics.

The commercial selector and showreels

The commercial section is an interactive selector — hover or navigate between projects (FT, Pepsi, UEFA, Nike and more) and the preview swaps with a transition. The performance trap here is video: autoplaying a wall of clips will tank the page. The discipline:

• One active video at a time. Only the hovered/selected showreel plays; the rest stay paused posters until needed.
• Lazy-load below the fold. Previews don't fetch until their section nears the viewport.
• transform/opacity only on the swap animation, so the selector stays buttery while video decodes in the background.

Strapi: so the artist owns his own site

Choosing Strapi as the headless CMS meant every project — title, showreel, client, gallery, ordering — is a content entry, not a code change. Next.js fetches it at build/revalidation time and renders static-fast pages, while Mat adds new work through the Strapi admin without touching a deploy. For a portfolio that grows constantly, that's the difference between a living site and one that quietly goes stale.

The result: the awards (and what they signal)

Recognition	Body	Detail
Site of the Day	Awwwards	Jan 2025, scored 7.59
Site of the Year 2025 — Nominee	GSAP (GreenSock)	2025

Awwwards judges UI, UX, creativity and content — a Site of the Day on a portfolio means the motion read as craft, not decoration. A GSAP Site of the Year nomination is the signal that matters most here: it's GreenSock's own jury recognising the animation engineering specifically. For a kinetic-typography artist, having the site judged best-in-class on motion is the portfolio doing exactly its job. You can see it live at matvoyce.tv and the award listing on Awwwards.

What this case study is really about

If you commission creative work, the lesson generalises past one portfolio: a motion-led site lives or dies on the engineering, not the mockup. The same approach that won here — a GSAP motion system, a headless CMS the owner controls, and ruthless performance discipline — is what makes any high-motion brand site ship instead of stall. If you're weighing what that costs and how to scope it, our guide on how much an animated website costs and how to hire a creative developer walk through it, and the Iventions case study shows the same playbook on an experiential brand site.

FAQ

What is the Mat Voyce website built with?

Next.js on the front end, GSAP for the full motion system, Strapi as the headless CMS, and targeted WebGL/canvas for the heavier transitions — a stack chosen for kinetic type animation that stays fast and that the artist can update himself.

Who designed and developed the Mat Voyce site?

It was a collaboration between Uncommon studio (Oliver Muñoz) and designer Huy Phan, with Hon Tran as the creative developer responsible for the front-end, GSAP motion and Strapi integration.

What awards did the Mat Voyce portfolio win?

Awwwards Site of the Day (January 2025) and a nomination for GSAP (GreenSock) Site of the Year 2025.

How do you keep a kinetic typography site fast?

Animate only transform and opacity so motion stays GPU-composited, split text once and reuse the timeline, play a single video at a time, lazy-load below-the-fold media, and respect prefers-reduced-motion for accessibility.

Let's build something award-worthy

If you're an artist, brand, or agency that needs a kinetic typography or high-motion portfolio that actually moves the way it looks — that's exactly what I do as a creative developer.

• See how I work and the engagement tiers on the services 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.