Mat Voyce: Đề Cử GSAP Site of the Year

Một tin mà mình thật sự tự hào: Mat Voyce vừa được GreenSock đề cử GSAP Site of the Year. Đây là một website portfolio thiên về chuyển động mà mình và team dựng bằng GSAP, Next.js và Strapi, và được chính cộng đồng GSAP ghi nhận riêng cho phần animation có lẽ là vinh dự phù hợp nhất mà một trang kinetic typography (chữ chuyển động) có thể nhận. Đây là bản tóm tắt — nếu bạn muốn xem chi tiết cách dựng, mình đã viết riêng trong case study Mat Voyce.

"GSAP Site of the Year" thực ra là gì

Suốt cả năm, GreenSock — đội ngũ đứng sau GSAP, thư viện animation JavaScript làm nền cho rất nhiều website đoạt giải — tuyển chọn một showcase gồm những tác phẩm nổi bật và vinh danh Site of the Week. Đến cuối năm, những trang xuất sắc nhất được gom lại và cộng đồng cùng ủng hộ cho lựa chọn yêu thích của mình ở hạng mục Site of the Year.

Vì sao một đề cử từ GSAP lại có sức nặng khác với một giải thiết kế thông thường? Các nền tảng như Awwwards chấm trọn gói — UI, UX, sáng tạo, nội dung, mọi thứ. Đề cử của GSAP hẹp hơn, và với dự án này thì ý nghĩa hơn: đó là những người viết code animation để kiếm sống chỉ vào một trang và nói rằng phần engineering chuyển động thuộc hàng đỉnh. Bạn không lọt vào đây nhờ một layout đẹp. Bạn lọt vào vì các timeline, easing, và hiệu năng dưới tải chuyển động nặng — thứ tay nghề vốn vô hình khi làm đúng — đứng vững trước một nhóm khán giả hiểu rõ nó khó tới mức nào.

Với một portfolio mà chủ đề chính là chuyển động, đó chính là lúc website làm đúng nhiệm vụ của nó.

Vì sao Mat Voyce xứng đáng

Mat là một trong những nghệ sĩ kinetic typography hàng đầu của Anh — chữ-chuyển-động cho những cái tên như Financial Times, Pepsi, UEFA và Nike. Brief vừa lặp lại vừa khắc nghiệt: dựng portfolio cho một người mà cả nghề là animation, mà không để chính website trông phẳng lì so với tác phẩm. Mỗi dòng tiêu đề phải như được ném vào đúng chỗ, mỗi chuyển cảnh phải đọc ra sự chủ đích, và không được phép giật.

Bọn mình làm điều đó bằng cách coi GSAP như một hệ thống chuyển động — một ngôn ngữ chung gồm các easing, một thang thời lượng nhất quán, và ScrollTrigger điều phối các đoạn reveal để nhịp điệu mạch lạc từ hero tới footer — thay vì một mớ animation rời rạc. Next.js giữ trang nhanh như tĩnh, Strapi cho Mat tự đăng dự án mới mà không cần deploy, còn kỷ luật chỉ động vào transform/opacity giữ mọi thứ chạy trên GPU ở 60fps ngay cả khi chữ chuyển động dày đặc. Mình không kể lại toàn bộ ở đây; case study Mat Voyce có code, các điểm dễ vấp và những đánh đổi về hiệu năng. Nếu bạn chỉ muốn nắm cơ chế motion phía sau phần scroll, bài hướng dẫn GSAP ScrollTrigger đi sâu vào pin, scrub và parallax.

Trang này trước đó đã đạt Awwwards Site of the Day; còn đề cử GSAP Site of the Year là sự ghi nhận khớp trực tiếp nhất với điều dự án thực sự hướng tới.

Xem trang trực tiếp (và vote, nếu còn mở)

Cách tốt nhất để đánh giá một tác phẩm motion là cảm nhận nó, nên:

• Mở trên thiết bị thật: matvoyce.tv. Cuộn chậm, để ý cách chữ tiếp đất và cách bộ chọn commercial đổi showreel.
• Nếu phần vote GSAP Site of the Year vẫn còn mở, bạn có thể ủng hộ qua showcase tại gsap.com. Còn nếu bạn đọc bài này sau khi vote đã đóng — không sao cả, trang tự nói lên tất cả bất kể kết quả.

Không áp lực gì đâu. Nếu nó khiến bạn muốn nhìn kỹ hơn cách phần motion được dựng, vậy là đã thành công rồi.

Cảm ơn — và sắp tới là gì

Một đề cử như thế này chưa bao giờ là công của riêng ai. Cảm ơn GreenSock đã tạo ra bộ công cụ mà cả ngành web sáng tạo dựa vào, và đã tôn vinh những tác phẩm đẩy giới hạn của chúng; cảm ơn studio Uncommon và nhà thiết kế Huy Phan đã cùng mình định hình Mat Voyce; cảm ơn Mat đã tin tưởng giao một brief mà phần lớn website sẽ làm cho phẳng đi; và cảm ơn tất cả những ai đã chia sẻ, vote, hay chỉ gửi một lời động viên. Điều đó có ý nghĩa rất lớn.

Mình làm việc cho đúng những khoảnh khắc thế này — nơi animation không phải để trang trí mà chính là trọng tâm. Tiến tới nhiều trải nghiệm web sáng tạo và thử nghiệm hơn nữa. Nếu bạn đang ấp ủ một dự án như vậy, mình rất muốn nghe.

• Xem thêm các dự án đã ship và đoạt giải trong kho dự án.
• Muốn một website thiên về chuyển động được đánh giá đỉnh về tay nghề? Hợp tác cùng mình →

FAQ

GSAP Site of the Year là gì?

Đó là sự ghi nhận cuối năm của GreenSock cho những website tốt nhất dựng bằng GSAP, chọn ra từ các tác phẩm họ giới thiệu trong showcase suốt cả năm. Vì đến từ cộng đồng GSAP, nó tôn vinh riêng phần animation và engineering chuyển động chứ không chỉ thiết kế.

Website Mat Voyce dựng bằng gì?

Next.js ở front end, GSAP cho toàn bộ hệ thống chuyển động, và Strapi làm headless CMS để nghệ sĩ tự đăng tác phẩm mới — kèm WebGL/canvas có chọn lọc cho các chuyển cảnh nặng hơn. Chi tiết đầy đủ nằm trong case study Mat Voyce.

Xem website Mat Voyce ở đâu?

Trực tiếp tại matvoyce.tv — trải nghiệm tốt nhất là cuộn qua trang trên thiết bị thật để cảm nhận kinetic typography và các chuyển cảnh showreel.

---

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 các 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. Là developer người Việt đầu tiên đoạt giải web quốc tế. hontran.dev · Behance.