Mat Voyce: Case Study Website Portfolio Đoạt Giải

Khi portfolio thuộc về một trong những nghệ sĩ kinetic typography (chữ chuyển động) hàng đầu của Anh, website không thể chỉ trưng bày tác phẩm — nó phải chuyển động đúng như cách anh ấy làm việc. Mat Voyce là một type designer kiêm animator có các tác phẩm chữ-chuyển-động 2D xuất hiện cho những thương hiệu như Financial Times, Pepsi, UEFA và Nike. Case study website portfolio đoạt giải này phân tích cách trang đó được xây dựng — từ brief, phần engineering motion bằng GSAP, lớp nội dung chạy bằng Strapi, đến kỷ luật hiệu năng đã giúp nó đạt Awwwards Site of the Day và đề cử GSAP Site of the Year 2025 — viết bởi chính developer đã ship nó.

Ai làm — và vì sao credit developer quan trọng ở đây

Trang Mat Voyce là sản phẩm hợp tác giữa studio Uncommon (Oliver Muñoz), nhà thiết kế Huy Phan — thành viên ban giám khảo Awwwards — và Hon Tran trong vai trò creative developer. Đó là tôi.

Nói điều này không phải để khoe cúp. Khi cả brief xoay quanh chuyển động, khoảng cách giữa một file Figma đẹp và một website thực sự "sống" ở 60fps chính là người developer. Tôi đã có hơn 11 năm xây dựng trải nghiệm web đoạt giải cho khách hàng ở Na Uy, Đan Mạch, Thụy Điển, Malta, Đức và Việt Nam; hai lần được Awwwards vinh danh "Independent of the Year" và là thành viên ban giám khảo Awwwards. Với portfolio của một type animator, kinh nghiệm đó là ranh giới giữa animation toát lên sự tinh xảo và animation giật lag làm hỏng giá trị của nghệ sĩ.

Brief: một portfolio chuyển động đúng như chủ nhân của nó

Mat tự nhận mình là một type designer kiêm animator vui tính, nổi tiếng với phong cách chữ chuyển động mang tính minh họa, đầy ngẫu hứng. Bài toán ở đây vừa đệ quy vừa khắc nghiệt: làm sao xây một trang portfolio cho người mà toàn bộ nghề nghiệp là animation, mà bản thân trang web không trông "phẳng" và kém cạnh tác phẩm của họ?

Ba ràng buộc định hình mọi quyết định:

• Chữ chính là giao diện. Headline không phải nhãn nằm trên nội dung — chúng là hero, là gợi ý điều hướng, là cá tính. Phải kinetic mà không sến súa.
• Showreel là sản phẩm. Tác phẩm của Mat là video. Trang phải trình bày các commercial và collab thật nét, thật nhanh, mà không dính cái giá hiệu năng của việc autoplay tất cả.
• Mat tự cập nhật. Một nghệ sĩ đang làm việc liên tục ra dự án mới. Trang cần một headless CMS để thêm case study không bao giờ phải nhờ developer.

Phần craft: GSAP, motion, WebGL và lớp nội dung

Stack gồm Next.js ở front-end, GSAP cho toàn bộ hệ thống motion, Strapi làm headless CMS, và phần WebGL/canvas có chủ đích cho các transition nặng. Đây là cách các phần đặc trưng được dựng nên.

Hero kiểu kinetic-type

Hero phải truyền tải được cá tính của Mat ngay trong giây đầu tiên. Cách làm: xem mỗi headline như một timeline được dàn dựng theo từng ký tự (hoặc từng từ), thay vì một keyframe CSS đơn lẻ. Tách chữ thành các span và stagger transform/opacity giúp mọi thứ chạy trên GPU compositor, nên dù animation chữ dày đặc cũng không bao giờ đụng tới 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,        // trồi lên từ dưới mask
  rot:    () => gsap.utils.random(-12, 12),
  opacity: 0,
  ease: 'back.out(1.7)',
  duration: 0.8,
  stagger: { each: 0.025, from: 'start' },
})

Ease back.out tạo hiệu ứng vọt qua rồi lắng lại, khiến chữ như được ném vào vị trí — đúng kiểu nảy mà Mat dùng trong chính các tác phẩm của anh. Random góc xoay theo từng ký tự là thứ giữ cho nó mang tính minh họa thay vì máy móc.

Motion là một hệ thống, không phải đống một-lần-dùng

Một trang dày motion như vậy sẽ sụp đổ nếu mỗi animation được tinh chỉnh riêng lẻ. Giải pháp là một ngôn ngữ motion dùng chung: một bộ ease thống nhất, một thang duration nhất quán, và ScrollTrigger điều khiển reveal từng section để nhịp điệu mạch lạc từ trên xuống dưới.

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 },
  })
})

Các pattern sâu hơn phía sau — pin, scrub và parallax — được trình bày trong bài hướng dẫn GSAP ScrollTrigger nếu bạn muốn nắm phần cơ chế.

Bộ chọn commercial và showreel

Phần commercial là một bộ chọn tương tác — hover hoặc điều hướng giữa các dự án (FT, Pepsi, UEFA, Nike và nhiều hơn) và preview đổi kèm transition. Cái bẫy hiệu năng ở đây là video: autoplay cả một "bức tường" clip sẽ giết chết trang. Kỷ luật:

• Mỗi lúc chỉ một video chạy. Chỉ showreel đang hover/được chọn mới phát; số còn lại là poster tạm dừng cho tới khi cần.
• Lazy-load phần dưới màn hình. Preview không fetch cho tới khi section gần viewport.
• Chỉ transform/opacity cho animation đổi cảnh, để bộ chọn luôn mượt trong lúc video đang decode ở nền.

Strapi: để nghệ sĩ làm chủ trang của mình

Chọn Strapi làm headless CMS nghĩa là mỗi dự án — tiêu đề, showreel, client, gallery, thứ tự — đều là một content entry, không phải sửa code. Next.js fetch dữ liệu lúc build/revalidate và render các trang nhanh kiểu static, còn Mat thêm tác phẩm mới qua trang admin Strapi mà không cần đụng tới deploy. Với một portfolio liên tục lớn lên, đó là ranh giới giữa một trang "sống" và một trang lặng lẽ cũ đi.

Kết quả: các giải thưởng (và chúng nói lên điều gì)

Ghi nhận	Đơn vị	Chi tiết
Site of the Day	Awwwards	1/2025, điểm 7.59
Site of the Year 2025 — Đề cử	GSAP (GreenSock)	2025

Awwwards chấm UI, UX, sáng tạo và nội dung — một Site of the Day trên portfolio nghĩa là motion được đọc như craft, không phải trang trí. Một đề cử GSAP Site of the Year mới là tín hiệu quan trọng nhất ở đây: chính ban giám khảo của GreenSock ghi nhận riêng phần engineering animation. Với một nghệ sĩ kinetic typography, việc trang web được chấm thuộc nhóm dẫn đầu về motion chính là lúc portfolio làm đúng nhiệm vụ của nó. Bạn có thể xem trực tiếp tại matvoyce.tv và trang giải thưởng trên Awwwards.

Case study này thực ra nói về điều gì

Nếu bạn là người đặt hàng tác phẩm sáng tạo, bài học vượt ra ngoài một portfolio: một trang web thiên về chuyển động sống hay chết là ở phần engineering, không phải ở mockup. Cùng cách tiếp cận đã thắng ở đây — một hệ thống motion bằng GSAP, một headless CMS do chủ sở hữu kiểm soát, và kỷ luật hiệu năng khắt khe — là thứ giúp bất kỳ trang thương hiệu nhiều chuyển động nào ship được thay vì sa lầy. Nếu bạn đang cân nhắc chi phí và cách định phạm vi, bài chi phí làm website chuyển động và cách thuê creative developer sẽ giúp bạn, còn case study Iventions cho thấy cùng playbook trên một trang thương hiệu trải nghiệm.

FAQ

Website Mat Voyce được xây bằng gì?

Next.js ở front-end, GSAP cho toàn bộ hệ thống motion, Strapi làm headless CMS, và WebGL/canvas có chủ đích cho các transition nặng — một stack được chọn để animation chữ kinetic vẫn nhanh và để nghệ sĩ tự cập nhật.

Ai thiết kế và phát triển trang Mat Voyce?

Đây là sản phẩm hợp tác giữa studio Uncommon (Oliver Muñoz) và nhà thiết kế Huy Phan, với Hon Tran là creative developer phụ trách front-end, motion GSAP và tích hợp Strapi.

Portfolio Mat Voyce đã đoạt những giải nào?

Awwwards Site of the Day (tháng 1/2025) và đề cử GSAP (GreenSock) Site of the Year 2025.

Làm sao để một trang kinetic typography vẫn nhanh?

Chỉ animate transform và opacity để motion chạy trên GPU compositor, split text một lần rồi tái dùng timeline, mỗi lúc chỉ phát một video, lazy-load media dưới màn hình, và tôn trọng prefers-reduced-motion cho khả năng tiếp cận.

Cùng làm một sản phẩm xứng tầm giải thưởng

Nếu bạn là nghệ sĩ, thương hiệu hay agency cần một portfolio kinetic typography hoặc nhiều chuyển động thực sự chuyển động đúng như vẻ ngoài của nó — đó chính là việc tôi làm với vai trò creative developer.

• Xem cách tôi làm việc và các gói hợp tác tại trang dịch vụ.
• Khám phá thêm các dự án đã ship và đoạt giải trong kho dự án.
• Sẵn sàng trao đổi? Let's talk →

---

Viết bởi Hon Tran — creative developer, nhà sáng lập hontran.dev, và thành viên ban giám khảo Awwwards. Hơn 11 năm xây dựng trải nghiệm web đoạt giải, ưu tiên hiệu năng (GSAP, WebGL, Next.js) cho khách hàng toàn cầu. Developer Việt Nam đầu tiên đoạt giải web quốc tế. hontran.dev · Behance.