By-Kin: Case Study Website Đoạt 4 Giải Thưởng

Cách By-Kin đoạt bốn giải — Awwwards Site of the Day & Developer Award, FWA, và CSS Design Awards Web of the Day — xây bằng Next.js, GSAP và Strapi.

Case StudyAwwwardsNext.jsGSAPStrapiDeveloper Award

By-Kin: Case Study Website Đoạt 4 Giải Thưởng

Có những trang web đoạt một giải. By-Kin đoạt bốn. Case study By-Kin này phân tích một dự án đã giành Awwwards Site of the Day, Awwwards Developer Award, một FWA (TheFWA) và CSS Design Awards Web of the Day — dự án nhiều giải nhất trong portfolio của tôi, và là câu trả lời rõ ràng nhất tôi có thể đưa ra cho câu hỏi một case study website đoạt giải thực sự cần những gì. Đây là website của một studio ở Anh, xây bằng Next.js, GSAP và Strapi, được dựng sao cho mỗi tương tác, mỗi transition, mỗi pixel đều xứng đáng có mặt. Viết bởi chính developer Next.js + GSAP đã ship nó.

Ai làm — và vì sao Developer Award quan trọng

By-Kin là một studio sáng tạo ở Anh, hoạt động trong lĩnh vực nội thất thương mại, branding và thiết kế đồ họa — một công ty mà toàn bộ giá trị nằm ở gu thẩm mỹ. Website phải tự tin đúng như cách họ trình bày tác phẩm trước khách hàng của chính mình. Tôi tham gia với vai trò creative developer: người chịu trách nhiệm biến một thiết kế thiên về chuyển động, đầy tính toán thành một bản build thật sự chạy được ở đẳng cấp đó trên trình duyệt.

Nói điều này không phải để đếm cúp — mà là lý do dự án này đáng để mổ xẻ. Tôi đã có hơn 11 năm xây dựng trải nghiệm số đ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", là thành viên ban giám khảo Awwwards, và các sản phẩm của tôi đã đạt nhiều Awwwards Site of the Day cùng các giải FWA và CSS Design Awards. Riêng với By-Kin, giải có ý nghĩa nhất là Awwwards Developer Award — bởi giải này không do công chúng bình chọn và cũng không trao cho một ảnh chụp màn hình đẹp. Đó là lúc ban giám khảo chỉ đích danh phần engineering: hệ thống motion, hiệu năng, sự tinh xảo bên dưới capo. Đó chính là lý do người ta thuê developer thay vì mua template.

Brief: không phải portfolio, mà là một tuyên ngôn

Website của chính một design studio là brief khó nhất tồn tại. Tác phẩm chính là lời chào hàng, nên trang web không thể chỉ trưng bày dự án — nó phải là một dự án. Định hướng rõ ràng ngay từ đầu: By-Kin không muốn một lưới thumbnail. Họ muốn một hành trình số nhập vai (immersive), nơi điều hướng, các cú reveal và nhịp điệu cùng kể một câu chuyện, để người xem rời đi sau khi cảm được gu của studio chứ không chỉ lướt qua.

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

Motion phải có chủ đích, không phải trang trí. Mỗi transition cần một lý do — dẫn mắt, tạo nhịp, gây mong đợi giữa các dự án. Animation ngẫu nhiên sẽ phản chủ với một studio bán chính sự "có chủ ý".
Hình ảnh là sản phẩm. Nội thất và branding sống hay chết là nhờ nhiếp ảnh. Không hiệu ứng nào được phép làm ảnh mềm đi, crop xấu hay làm chậm một hero image.
Studio tự cập nhật. Dự án mới, bài journal, case study liên tục ra lò, nên nội dung phải nằm trong một headless CMS, không bao giờ nằm trong code.

Phần craft: Next.js, motion GSAP và lớp nội dung Strapi

Stack gồm Next.js + React ở front-end, GSAP điều khiển toàn bộ hệ thống motion, và Strapi làm headless CMS. Đây là cách các phần đặc trưng được dựng nên.

Xem cả trang như một timeline được dàn dựng

Thứ khiến ban giám khảo phản ứng tích cực với một trang như thế này là sự liền mạch — cảm giác trang là một trải nghiệm liên tục, có đạo diễn, chứ không phải một chồng component rời rạc. Cách đạt được điều đó là ngừng nghĩ theo từng animation riêng lẻ và bắt đầu nghĩ theo các timeline dùng chung. Điều hướng, đặc biệt, được dựng như một chuỗi dàn dựng duy nhất: view đi ra, transition, và nội dung đi vào là một timeline GSAP, không phải ba sự kiện tách rời.

import gsap from 'gsap'

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

  tl.to('[data-cover]', { yPercent: 0 })                 // tấm phủ quét vào
    .add(swapRoute)                                      // đổi route tại đỉnh
    .to('[data-cover]', { yPercent: -100 }, '+=0.05')    // lộ trang mới
    .from('[data-reveal]', { yPercent: 60, opacity: 0, stagger: 0.05 }, '<0.15')

  return tl
}

Các tham số position ('<0.15', '+=0.05') là thứ khiến nó cảm giác được biên đạo — trang mới bắt đầu trồi lên trước khi tấm phủ kịp dọn sạch, nên mắt không bao giờ rơi vào một khung hình chết. Sự gối đầu đó chính là khác biệt giữa motion "đắt tiền" và một lần tải trang mặc định.

Một ngôn ngữ motion, 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. Giải pháp là một bộ từ vựng dùng chung: một bộ ease được chọn lọc, 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ừ cú cuộn đầu tiên đến cuối cùng.

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

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

Kết hợp điều đó với cuộn mượt theo quán tính (inertia) khiến cả trang đọc như một mặt phẳng liền lạc. Phần cơ chế sâu hơn — pin, scrub, parallax và lớp smoothing — tôi trình bày trong bài cuộn mượt trong Next.js với GSAP & Lenis nếu bạn muốn nắm cách làm.

Bảo vệ hình ảnh

Quy tắc cứng — không bao giờ làm hỏng tác phẩm — chi phối rất nhiều quyết định nhỏ. Ảnh được phục vụ đúng kích thước qua responsive source, transition animate phần khung quanh ảnh (mask, reveal, displacement) thay vì bóp nát nguồn, và bố cục cam kết với một composition có chủ đích, thường ưu tiên khổ dọc, để nhiếp ảnh được trình bày đúng cách một studio art-direct, chứ không phải bị một lưới chung crop tùy tiện. Kết quả là motion làm khung cho tác phẩm thay vì cạnh tranh với nó.

Strapi: để studio làm chủ trang của mình

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

Giữ cho craft 4-giải vẫn nhanh

Một giải thưởng không sống sót qua một cú cuộn giật — và Developer Award thì càng không. Kỷ luật hiệu năng gói gọn trong vài thói quen bất di bất dịch:

Chỉ animate transform và opacity. Chúng chạy trên GPU compositor, bỏ qua layout và paint, nên main thread luôn rảnh để xử lý cuộn.
Lazy-load mọi thứ dưới màn hình. Media nặng không fetch cho tới khi section gần viewport, giữ cho payload ban đầu gọn nhẹ.
Tôn trọng người dùng. gsap.matchMedia() gỡ bỏ phần motion nặng khi prefers-reduced-motion, để trải nghiệm vẫn dùng được và tiếp cận được mà không phải tách codebase.

const mm = gsap.matchMedia()
mm.add('(prefers-reduced-motion: no-preference)', () => {
  // toàn bộ phần biên đạo nằm ở đây; người dùng reduced-motion nhận reveal tĩnh, tức thì
})

Đây là phần đa số các bản build "có animation" bỏ qua, và đúng là phần mà ban giám khảo Developer Award soi kỹ. Ai cũng thêm được motion; giữ cho nó mượt, tiếp cận được và nhanh trên một laptop tầm trung mới là craft thực sự.

Kết quả: bốn giải, và mỗi giải nói lên điều gì

Giải	Đơn vị	Ghi nhận điều gì
Site of the Day	Awwwards	Sự xuất sắc tổng thể — thiết kế, sáng tạo, khả dụng
Developer Award	Awwwards	Riêng phần engineering — motion, hiệu năng, code
FWA of the Day	The FWA	Tính đổi mới và craft số tiên phong
Web of the Day	CSS Design Awards	UI, UX và đổi mới do ban giám khảo chấm điểm

Bốn đơn vị, bốn ban giám khảo khác nhau, một trang web — đó mới là tín hiệu đáng chú ý. Một giải thiên về công chúng nói rằng người ta thích nó; Awwwards Developer Award và một FWA nói rằng đồng nghiệp và giới chuyên môn tôn trọng cách nó được dựng. Thắng cả bốn nghĩa là trang đứng vững dù bạn là khách vãng lai, một nhà thiết kế, hay một kỹ sư đang đọc source. Bạn có thể xem trực tiếp tại by-kin.com và trang giải thưởng trên Awwwards.

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

Bài học vượt xa một trang studio: một trang thương hiệu thiên về chuyển động sống hay chết là ở phần engineering, không phải ở mockup. Cùng playbook đã quét bốn giải ở đây — xem cả trang như một timeline được dàn dựng, một hệ thống motion GSAP dùng chung, một headless CMS do khách hàng kiểm soát, và kỷ luật hiệu năng khắt khe — là thứ giúp bất kỳ trang nhiều chuyển động nào ship được ở đẳng cấp đó thay vì mắc kẹt ở mức "trông đẹp trong Figma". 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 sẽ giúp bạn, còn creative developer là gì giải thích chính vai trò đã đoạt Developer Award. Xem thêm các dự án đã ship và đoạt giải trong kho dự án.

FAQ

Website By-Kin được xây bằng gì?

Next.js và React ở front-end, GSAP cho toàn bộ hệ thống motion, và Strapi làm headless CMS — một stack được chọn để có các trang được biên đạo, quản lý nội dung dễ dàng, vẫn nhanh dù nhiều chuyển động và để studio tự cập nhật.

By-Kin đã đoạt những giải nào?

Bốn giải: Awwwards Site of the Day, Awwwards Developer Award, một FWA (TheFWA), và CSS Design Awards Web of the Day — ghi nhận trải dài từ thiết kế tổng thể, engineering, đến đổi mới.

Awwwards Developer Award là gì?

Là giải Awwwards trao riêng cho phần phát triển của một trang — hệ thống motion, hiệu năng, tính tương tác và chất lượng code — chứ không phải riêng phần thiết kế hình ảnh. Đó là giải phân biệt engineering nghiêm túc với một template đẹp mã.

Ai đã xây trang By-Kin?

By-Kin là một studio sáng tạo ở Anh; Hon Tran (hontran.dev) là creative developer phụ trách phần build front-end, hệ thống motion GSAP và tích hợp Strapi.

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

Nếu bạn là studio, thương hiệu hay agency cần một website nhiều chuyển động với Next.js, GSAP và một headless CMS — dựng để thực sự ship được, chạy nhanh và đoạt giải — đó 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à bắt đầu dự án tại trang hire.
Khám phá thêm các dự án đã ship và đoạt giải trong kho dự án.
Sắp tuyển? Đọc cách thuê creative developer, rồ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.