Dev WebGL Cho Designer: Cộng Tác Với Huy Phan

Phần lớn các website đạt giải bạn từng thấy là hai người, không phải một. Một designer tác giả ý tưởng; một developer làm nó chuyển động, giữ 60fps và sống sót trên một thiết bị thật. Khi designer ở đẳng cấp thế giới, developer trở thành biến số quyết định — khoảng cách giữa một file Figma tuyệt đẹp và một site thực sự "thở" hoàn toàn là kỹ thuật. Đó là chiếc ghế tôi ngồi, lặp đi lặp lại, với tư cách dev WebGL cho designer — và ví dụ rõ nhất là mối cộng tác dài hơi của tôi với Huy Phan, một designer ở TP.HCM và thành viên ban giám khảo Awwwards. Bài này nói về chính mối cộng tác: cách một thiết kế đạt giải được build bằng GSAP, Three.js và Next.js, và vì sao cùng một cặp đôi cứ tiếp tục thắng.

Mối cộng tác, ghi rõ trên hồ sơ

Huy Phan thiết kế; tôi build. Chúng tôi đã ship ranh giới đó qua nhiều dự án, và kết quả là công khai — không phải lời nói, mà là các listing:

Dự án	Vai trò Huy Phan	Vai trò của tôi	Ghi nhận
fromanother	Thiết kế giao diện	Creative developer	Awwwards SOTD + Developer Award, FWA of the Day
Iventions	Design direction	Creative developer	CSS Design Awards Website of the Month, Awwwards SOTD + Developer Award
Mat Voyce	Designer (cùng Uncommon)	Creative developer	Awwwards Site of the Day

Huy Phan không phải một cái credential thường. Anh là thành viên ban giám khảo Awwwards với một kệ dài các giải — 12× Awwwards Site of the Day và 12× Awwwards Developer Award trải khắp tác phẩm của mình. Khi một designer ở đẳng cấp đó bàn giao một concept, phần build gần như không có biên độ: motion phải đọc đúng y như ý định, WebGL không được làm hỏng một tấm ảnh nào, và cả bản build phải luôn nhanh. Đó là brief tôi nhận, mỗi lần.

Vì sao designer đẳng cấp này thuê một developer chuyên biệt

Một designer đủ giỏi để ngồi ghế giám khảo Awwwards không cần một developer "cũng biết thiết kế". Họ cần điều ngược lại: một người làm GSAP, Three.js và hiệu năng để sống, và biết tránh ra khỏi đường đi của tầm nhìn. Giá trị không phải là góp ý sáng tạo — Huy đã có câu trả lời sáng tạo rồi. Giá trị là độ trung thực dưới tải: render thiết kế chính xác từng pixel trong khi vẫn giữ frame mượt trên một laptop tầm trung và một chiếc điện thoại.

Đó là một bộ môn khác với thứ một người chung chung mang lại. Người chung chung thỏa hiệp thiết kế để làm cho nó ship được; một chuyên gia thay đổi cách hiện thực hóa để không phần nào của thiết kế phải nhượng bộ. Ở Iventions, quy tắc cứng là "không bao giờ làm hỏng ảnh", nên phần shader diễn ra xung quanh mỗi tấm ảnh — ánh sáng và displacement khi chuyển cảnh — chứ không bao giờ nghiền nát nguồn. Đó là một quyết định từ phía developer để bảo vệ tác phẩm của designer, và nó chỉ đến từ việc đã ship đẳng cấp này nhiều lần.

Phần craft: hiện thực hóa một thiết kế đạt giải

Xuyên suốt mối cộng tác, ba thói quen kỹ thuật là thứ cho phép thiết kế của Huy lên sóng ở cường độ đầy đủ.

Một ngôn ngữ motion, không phải một đống animation lẻ

Một thiết kế nhiều-motion sẽ sụp nếu mỗi animation được chỉnh tay riêng lẻ — nhịp điệu vỡ và cả thứ đọc ra như ồn ào thay vì có tác giả. Cách sửa là một vốn từ chung: một bộ ease, một thang thời lượng nhất quán, và ScrollTrigger điều khiển reveal từ cùng một ngữ pháp để nhịp giữ chất editorial từ hero xuống footer.

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

// Một ngữ pháp reveal, dùng lại khắp site — đây là thứ làm một thiết kế đọc ra "có tác giả".
gsap.utils.toArray<HTMLElement>('[data-reveal]').forEach((el) => {
  gsap.from(el, {
    yPercent: 16,
    opacity: 0,
    ease: 'expo.out',
    duration: 1.1,
    scrollTrigger: { trigger: el, start: 'top 85%', once: true },
  })
})

Mọi thứ animate chỉ trên transform và opacity, nên reveal ở trên GPU compositor và không bao giờ chạm layout — đó là khác biệt giữa mượt và giật trên một trang dày media. Cơ chế sâu hơn nằm trong hướng dẫn GSAP ScrollTrigger của tôi.

WebGL chỉ ở nơi nó xứng đáng với sức nặng

Một context WebGL tốn bộ nhớ và pin, nên tôi dành nó cho những khoảnh khắc mang lời hứa "immersive" của thiết kế — chuyển ảnh điện ảnh, displacement giữa các tác phẩm — và mount canvas chỉ khi nó thực sự trên màn hình.

// Khởi tạo renderer đúng lúc; giải phóng context khi cuộn qua.
const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) mountGL()
  else disposeGL()
}, { rootMargin: '200px' })

io.observe(canvasSection)

Và quan trọng, texture được coi là thiêng liêng. Trên bản build của một designer, làm mềm một tấm ảnh để tiết kiệm vài frame là một thất bại, không phải một đánh đổi:

import * as THREE from 'three'

new THREE.TextureLoader().load('/work/feature.jpg', (texture) => {
  texture.colorSpace = THREE.SRGBColorSpace
  texture.anisotropy = renderer.capabilities.getMaxAnisotropy() // sắc nét ở góc nghiêng
  texture.generateMipmaps = true
})

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) // sắc mà không nung chảy GPU

Kỷ luật đó — context lười, dispose renderer, chặn DPR ở mức 2 — là thứ giữ một thiết kế nhiều animation trong ngân sách hiệu năng. Cùng tư duy đằng sau Core Web Vitals cho web nhiều chuyển động, và là lý do lớn khiến các bản build này lấy Awwwards Developer Award, không chỉ cái gật đầu về hình.

Motion tôn trọng người xem

Mọi bản build đều tránh ra cho bất kỳ ai đã yêu cầu. gsap.matchMedia() tắt phần choreography nặng dưới prefers-reduced-motion, để một thiết kế đạt giải vẫn tiếp cận được mà không phải fork codebase.

const mm = gsap.matchMedia()
mm.add('(prefers-reduced-motion: no-preference)', () => {
  // toàn bộ choreography WebGL + motion nằm ở đây
})

Vì sao cùng một cặp đôi cứ tiếp tục thắng

Lý do một designer và developer quay lại với nhau không phải lòng trung thành — mà là niềm tin cộng dồn. Đến dự án thứ ba, Huy biết chính xác cái gì rẻ và cái gì đắt để build, còn tôi biết chính xác anh muốn motion cảm giác thế nào, nên hao hụt từ concept sang code tiến về không. Đó là vì sao các giải chồng lên: Developer Award của fromanother, Website of the Month của Iventions, Site of the Day của Mat Voyce. Ba ban giám khảo, ba dự án, một cặp đôi lặp lại.

Bài học vượt xa một cộng sự: một thiết kế đạt giải chỉ tốt bằng developer ship nó. Nếu bạn là designer với một concept xứng đáng chuyển động đúng như bạn vẽ — và trụ được trên thiết bị thật — thì đó là mối cộng tác tôi vận hành. Xem nó nằm ở đâu giữa các designer và studio tôi build cho.

FAQ

Huy Phan là ai?

Một designer ở TP.HCM và thành viên ban giám khảo Awwwards với một bảng thành tích dài — 12× Awwwards Site of the Day và 12× Awwwards Developer Award trải khắp tác phẩm. huyml.co là portfolio của anh.

Vai trò của Hon Tran trong mối cộng tác là gì?

Creative developer. Huy thiết kế và art-direct; tôi build front-end — hệ GSAP motion, Three.js / WebGL, và lớp hiệu năng Next.js — trung thực với thiết kế của anh. Chúng tôi đã ship fromanother, Iventions và Mat Voyce cùng nhau.

"Dev WebGL cho designer" thực sự làm gì?

Biến một thiết kế đạt giải thành một site sống ở độ trung thực đầy đủ: motion đọc đúng y ý định, WebGL không bao giờ làm hỏng ảnh, và một bản build nhanh, tiếp cận được trên thiết bị thật — mà không đổi thiết kế để làm cho nó ship được.

Bạn có thể làm việc với designer hoặc team thiết kế của tôi không?

Có — đó là cốt lõi cách tôi làm. Designer làm chủ tầm nhìn và mối quan hệ khách hàng; tôi làm chủ motion, WebGL và hiệu năng dưới thương hiệu của bạn.

Cùng build thiết kế của bạn ở độ trung thực đầy đủ

Nếu bạn là designer hay studio với một concept đạt giải cần một dev WebGL để ship nó đúng như đã vẽ — đó chính là việc tôi làm.

• Xem cách tôi làm và bắt đầu một dự án ở trang hire.
• Xem thêm tác phẩm đã ship, đã đạt giải trong kho dự án.
• Sẵn sàng trao đổi? Cùng trao đổi →

---

Viết bởi Hon Tran — creative developer, sáng lập hontran.dev, và thành viên ban giám khảo Awwwards. Hơn 11 năm xây trải nghiệm web đạt giải, ưu tiên hiệu năng (GSAP, Three.js / WebGL, Next.js) cho khách hàng toàn cầu. Hai lần được Awwwards vinh danh "Independent of the Year" và là người Việt đầu tiên thắng một giải web quốc tế. hontran.dev · Behance.