Iventions: Case Study Website Sự Kiện Đoạt Giải

Khi một thương hiệu tạo ra những không gian và sự kiện đẳng cấp thế giới, website của họ cũng phải mang lại cảm giác như chính một sự kiện. Iventions đúng là như vậy — và kết quả là một website sự kiện đoạt giải, mang về CSS Design Awards "Website of the Month" (tháng 10/2025), lọt vào chung kết Website of the Year 2025, cùng Awwwards Site of the Day + Developer Award. Bài case study này phân tích đề bài, phần thủ công (craft) và các quyết định kỹ thuật phía sau một site dẫn dắt bằng chuyển động — viết bởi chính lập trình viên đã xây nó. Nếu bạn đang tìm thiết kế website sự kiện / trải nghiệm, đây là những gì "đoạt giải" thực sự đòi hỏi.

Ai đã làm — và vì sao điều đó quan trọng

Iventions là sự hợp tác giữa studio SERIOUS.BUSINESS (định hướng thiết kế bởi Huy Phan, ứng viên Designer of the Year của CSS Design Awards và thành viên ban giám khảo Awwwards) cùng Hon Tran ở vai trò creative developer — đó là tôi.

Để hiểu vì sao sự kết hợp này tạo ra sản phẩm tầm giải thưởng: tôi đã có hơn 11 năm xây dựng các trải nghiệm số đoạt giải cho khách hàng tại Na Uy, Đan Mạch, Thụy Điển, Malta, Đức và Việt Nam. Tôi hai lần được vinh danh Awwwards "Independent of the Year", là thành viên ban giám khảo Awwwards, và đã nhận nhiều giải Awwwards Site of the Day cùng các giải FWA và CSS Design Awards. Điểm cốt lõi không phải là đếm cúp — mà là: khi bạn giao một ý tưởng sáng tạo cho một developer đã nhiều lần ship ở tầm này, thì chuyển động, 3D và hiệu năng sẽ "ăn khớp" thay vì vỡ trận. Sự ổn định đó chính là tất cả trên một site thương hiệu chủ lực.

Đề bài: biến "trải nghiệm" thành thứ chạm được trên màn hình

Iventions thiết kế và sản xuất sự kiện cùng không gian cao cấp — loại công việc thực sự chỉ tồn tại trong một căn phòng, trong một khoảnh khắc. Thử thách là bài toán kinh điển của thương hiệu trải nghiệm: làm sao đưa cảm giác trực tiếp lên một màn hình phẳng?

Lời giải thiết kế là khái niệm spotlight (ánh đèn sân khấu) — typography mạnh mẽ, bộ nhận diện xanh lime và tím tự tin, cùng chuyển động đặt từng thương hiệu, từng dự án vào trung tâm. Lời giải kỹ thuật là một bản dựng mà mọi transition, hover và cuộn đều củng cố ánh đèn đó thay vì trang trí xung quanh. Ba ràng buộc định hình mọi quyết định:

• Chuyển động phải có chủ đích, không ngẫu nhiên. Sự kiện được dàn dựng; website cũng vậy.
• Hình ảnh chính là sản phẩm. Visual dự án tuyệt đối không được hiệu ứng làm giảm chất lượng — độ sắc nét là không thể thương lượng.
• Phải nhanh. Chuyển động nặng và WebGL trở nên vô nghĩa nếu trang giật trên laptop tầm trung hay điện thoại.

Phần thủ công: chuyển động, 3D và hiệu năng được xây thế nào

Stack là Next.js + React ở front end, WordPress (headless) làm CMS, với Three.js cho WebGL và GSAP điều khiển lớp chuyển động. Đây là cách các thành phần đặc trưng được ghép lại.

Transition trang và menu mượt như được dàn dựng

Transition menu và chuyển trang là những yếu tố được ban giám khảo Awwwards nhắc đến đích danh. Mẹo ở đây là coi điều hướng như một timeline duy nhất thay vì hai lần đổi route rời rạc — nội dung đi ra, menu hiện lên và trang đi vào là một chuỗi được phối hợp. Timeline của GSAP giúp việc sắp xếp đó trở nên rõ ràng:

import gsap from 'gsap'

function pageTransition(onMidpoint: () => void) {
  const tl = gsap.timeline({ defaults: { ease: 'expo.inOut', duration: 0.9 } })

  tl.to('[data-transition-cover]', { yPercent: 0 })           // lớp phủ trượt vào
    .add(onMidpoint)                                          // đổi route tại đỉnh
    .to('[data-transition-cover]', { yPercent: -100 }, '+=0.05') // lộ trang mới
    .from('[data-page] [data-stagger]', { yPercent: 110, stagger: 0.04 }, '<0.2')

  return tl
}

Tham số position ('<0.2', '+=0.05') là thứ khiến nó cảm giác có chủ đích thay vì cộc lốc — nội dung trang mới bắt đầu nâng lên trước khi lớp phủ rời đi hẳn, nên mắt không bao giờ chạm phải một khung hình "chết". Lớp chuyển động này được kết hợp với cuộn mượt theo quán tính để toàn bộ trải nghiệm đọc như một bề mặt liền mạch.

WebGL nâng tầm tác phẩm, không bao giờ làm giảm chất lượng

Three.js đảm nhận hiệu ứng spotlight và xử lý hình ảnh. Quy tắc cứng từ đề bài — không bao giờ làm giảm chất lượng hình ảnh — dẫn tới một cách tiếp cận cụ thể: texture được tải ở độ phân giải đầy đủ và phần shader hoạt động xung quanh ảnh (ánh sáng, reveal, displacement khi transition) thay vì "đè bẹp" nguồn. Trên một plane WebGL, điều đó nghĩa là tôn trọng device pixel ratio và tỉ lệ nguồn để không gì bị mềm hay kéo giãn:

import * as THREE from 'three'

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

// Giới hạn DPR để màn hình mật độ cao vẫn sắc nét mà không "nung chảy" GPU
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

Giới hạn pixel ratio ở mức 2 là một trong những đòn hiệu năng đáng giá nhất trên site nặng WebGL: trên mức 2 bạn phải trả chi phí fill-rate khổng lồ cho một khác biệt mà gần như không ai thấy được.

Giữ tốc độ giữa ngần ấy chuyển động

Một giải thưởng không sống sót nổi qua một cú cuộn giật. Kỷ luật hiệu năng gói gọn trong vài thói quen:

• Chỉ animate transform và opacity. Chúng được GPU composite và bỏ qua layout/paint, nên main thread rảnh tay cho việc cuộn.
• Khởi tạo WebGL theo nhu cầu. Scene Three.js chỉ chạy khi section của nó gần viewport, và tạm dừng vòng lặp render khi cuộn ra khỏi màn hình — không đốt chu kỳ GPU cho thứ không nhìn thấy.
• Tôn trọng người dùng. gsap.matchMedia() tắt chuyển động nặng khi bật prefers-reduced-motion, giúp site vẫn dùng được và truy cập được mà không cần tách codebase.

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

Nếu bạn muốn đi sâu vào các kỹ thuật này, xem hướng dẫn của tôi về cuộn mượt trong Next.js với GSAP & Lenis và các pattern GSAP ScrollTrigger đứng sau những chuyển động theo cuộn như thế này.

Kết quả: những giải thưởng (và ý nghĩa của chúng)

Giải thưởng	Đơn vị	Thời gian
Website of the Month	CSS Design Awards	Tháng 10/2025
Website of the Year 2025 — Chung kết	CSS Design Awards	2025
Site of the Day + Developer Award	Awwwards	Tháng 11/2025

Trên CSS Design Awards, Iventions đạt 8.43 tổng ở vòng Site of the Day và 8.57 từ 23 giám khảo ở cấp Website of the Year — đều trên 8.0 ở cả UI, UX và Innovation. Bạn có thể xem bản dựng trực tiếp tại iventions.com và trang giải thưởng trên CSS Design Awards.

Những điểm số đó nói gì với một người đi thuê: một site thắng cả ở Innovation lẫn UI/UX không chỉ đẹp — nó làm được điều gì đó đáng nhớ, và làm mà không hi sinh tính khả dụng. Với một thương hiệu trải nghiệm, đó chính là toàn bộ lời chào hàng được hiện thực hóa.

FAQ

Website Iventions được làm bằng gì?

Next.js và React ở front end, WordPress làm headless CMS, với Three.js cho WebGL và GSAP cho lớp chuyển động — một stack được chọn để có trang nhanh, quản trị nội dung dễ mà vẫn gánh được 3D nặng và transition được dàn dựng.

Ai thiết kế và phát triển Iventions?

Đây là sự hợp tác giữa studio SERIOUS.BUSINESS với nhà thiết kế Huy Phan, và Hon Tran ở vai trò creative developer (front-end, WebGL và kỹ thuật chuyển động).

Iventions đã thắng những giải nào?

CSS Design Awards Website of the Month (tháng 10/2025), chung kết CSS Design Awards Website of the Year 2025, cùng Awwwards Site of the Day và Awwwards Developer Award.

Một site tầm giải thưởng như vậy mất bao lâu để làm?

Tùy phạm vi, nhưng một bản dựng chủ lực nhiều chuyển động và WebGL thường là một engagement kéo dài vài tuần đến vài tháng. Con đường nhanh nhất là một đối tác thiết kế ăn ý cộng một developer đã từng ship ở tầm này — xem thêm tại kho dự án.

Cùng xây một thứ xứng tầm giải thưởng

Nếu bạn là founder, thương hiệu hay agency cần một website sự kiện / trải nghiệm với chuyển động và WebGL thực sự ship được — và đoạt giải — thì đó 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ụ.
• Xem thêm các dự án đã ship và đoạt giải tại kho dự án.
• Sẵn sàng trao đổi? Cùng trò chuyện →

---

Viết bởi Hon Tran — creative developer, founder của 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, Three.js / WebGL, Next.js) cho khách hàng toàn cầu. Lập trình viên Việt Nam đầu tiên thắng một giải web quốc tế. hontran.dev · Behance.