fromanother: Website Agency Sáng Tạo Đoạt Giải

Khi khách hàng chính là một creative agency, website mang một nhiệm vụ khắc nghiệt: nó phải vượt mặt chính những tác phẩm trong portfolio của mình. fromanother là một creative agency dẫn dắt bởi nghệ sĩ — direction, digital và trải nghiệm immersive trải khắp châu Á và châu Âu — và case study website agency sáng tạo đoạt giải này phân tích cách trang được dựng nên: brief, hệ thống motion bằng GSAP, phần WebGL có chủ đích, lớp nội dung Prismic, và kỷ luật hiệu năng đã giúp nó đạt FWA of the Day cùng Awwwards Site of the Day và Awwwards Developer Award — viết bởi chính developer đã ship nó.

Bằng chứng trước (vì agency mua bằng niềm tin)

Nếu bạn đang đặt hàng một website, uy tín quan trọng hơn cả craft. fromanother.love đã đạt:

Ghi nhận	Đơn vị	Chi tiết
FWA of the Day	The FWA	thefwa.com/cases/fromanotherlove
Site of the Day	Awwwards	14/5/2026, điểm tổng 7.44
Developer Award	Awwwards	Engineering front-end, điểm 7.25

Developer Award là giải tôi coi trọng nhất ở dự án này. Ban giám khảo Awwwards trao nó riêng cho phần engineering — không phải thiết kế hình ảnh — nên với một trang agency mà toàn bộ điểm nhấn là motion và tương tác, đó là hội đồng xác nhận bản build thuộc nhóm dẫn đầu. Bạn có thể xem trang giải trên Awwwards và bản live tại fromanother.love.

Ai làm — và vì sao credit developer quan trọng

Trang là sản phẩm hợp tác: fromanother giữ creative direction và identity, nhà thiết kế Huy Phan — thành viên ban giám khảo Awwwards — định hình giao diện, còn Hon Tran dựng nó trong vai trò creative developer. Đó là tôi.

Nói điều này không phải để khoe. Khi cả brief xoay quanh nhịp điệu editorial và chuyển động mượt, khoảng cách giữa một file Figma đẹp và một website thực sự "thở" ở 60fps chính là người developer. Tôi đã có hơn 11 năm xây 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", sở hữu nhiều giải Awwwards Site of the Day và nhiều lần FWA of the Day, và là thành viên ban giám khảo Awwwards. Với trang web của chính một agency, kinh nghiệm đó là ranh giới giữa motion toát lên sự tinh xảo và motion giật lag âm thầm làm hạ giá trị studio.

Brief: một portfolio vượt mặt chính portfolio

Trang agency là một bài toán đệ quy. Sản phẩm của fromanother chính là gu thẩm mỹ — direction, digital, immersive — nên trang không thể chỉ liệt kê case study; nó phải chứng minh con mắt của studio ngay trong cách nó chuyển động, dàn nhịp và chuyển cảnh. Ba ràng buộc định hình mọi quyết định:

• Trang chính là bài pitch. Ấn tượng đầu tiên của khách hàng tiềm năng về câu hỏi "họ có làm được immersive không?" nằm ngay ở homepage. Mọi transition phải có chủ đích, cinematic, và cao cấp rõ rệt — không bao giờ giống template.
• Tác phẩm phải "thở". Portfolio agency sống hay chết ở cách trình bày hình ảnh. Media cinematic, khoảng trắng editorial, reveal mượt phải toát lên sự tự tin, không rối.
• Đội ngũ tự cập nhật. Dự án mới, người mới, thí nghiệm lab mới — studio ship liên tục, nên nội dung phải chạy trên headless CMS, không phải một ticket gửi developer.

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

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

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

Một trang agency thiên về motion sẽ sụp đổ nếu mỗi animation được tinh chỉnh riêng lẻ — nhịp điệu mất mạch lạc và tổng thể thành ồn ào. 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 giữ chất editorial từ trên xuống dưới.

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

gsap.registerPlugin(ScrollTrigger)

// Một "ngữ pháp" reveal, tái dùng toàn site — đây là thứ khiến nhịp điệu có tính 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ứ chỉ animate transform và opacity, nên reveal luôn chạy trên GPU compositor và không bao giờ đụng layout — đó là ranh giới giữa mượt như lụa và giật cục trên một trang dày media. Các cơ chế sâu hơn phía sau — pin, scrub, parallax — chính là những gì tôi mổ xẻ trong bài hướng dẫn GSAP ScrollTrigger.

WebGL ở nơi nó xứng với chi phí

Không phải hiệu ứng nào cũng đáng để mở một WebGL context — nó tốn bộ nhớ và pin, nên tôi dành riêng cho những khoảnh khắc gánh lời hứa "immersive": chuyển cảnh hình ảnh cinematic và displacement giữa các tác phẩm. Quy tắc tôi theo là WebGL cho các khoảnh khắc hero, DOM cho phần còn lại, và canvas chỉ được mount khi thực sự nằm trong màn hình.

// Chỉ mount scene WebGL khi section gần viewport — không bao giờ mount lúc load.
const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) mountGL()      // dựng renderer đúng lúc cần
  else disposeGL()                          // giải phóng context khi scroll qua
}, { rootMargin: '200px' })

io.observe(canvasSection)

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

Prismic: để agency làm chủ trang của mình

Chọn Prismic làm headless CMS nghĩa là mỗi dự án, vai trò, thí nghiệm lab đề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 đội ngũ thêm tác phẩm mới qua editor Prismic mà không cần deploy. Với một agency có portfolio thay đổi liên tục, đó là ranh giới giữa một trang "sống" và một trang lặng lẽ cũ đi — và là lý do tôi mặc định chọn headless stack cho khách hàng studio và agency.

Kết quả: các giải thưởng thực sự nói lên điều gì

Ba hội đồng — FWA, và Awwwards hai lần (thiết kế và development) — độc lập đánh giá đây là một trang agency thuộc nhóm dẫn đầu. Với fromanother, đó là lúc portfolio làm đúng nhiệm vụ đen của nó: trang web của chính studio giờ là bằng chứng mạnh nhất trong bài pitch. Với khách hàng tiềm năng đang lướt tìm "họ có làm được thứ immersive không?", câu trả lời đã nằm ngay trên homepage trước cả khi họ đọc một case study.

Bài học vượt ra ngoài một dự án: một website creative agency sống hay chết là ở phần engineering, không phải ở mockup. Một hệ thống motion bằng GSAP, WebGL dùng có chọn lọc, một headless CMS do đội ngũ kiểm soát, và kỷ luật hiệu năng khắt khe — đó là playbook giúp ship một trang xứng tầm giải thưởng thay vì một trang đẹp nhưng sa lầy. Bạn có thể thấy cùng cách tiếp cận ở case study Uncommon Studio, bài website đoạt giải By-Kin, và trang sự kiện Iventions.

FAQ

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

Next.js và React ở front-end, Prismic làm headless CMS, GSAP cho hệ thống motion, và WebGL có chủ đích cho các transition cinematic — một stack được chọn để một trang agency immersive, dày media vẫn nhanh và đội ngũ tự cập nhật được.

Ai thiết kế và phát triển fromanother.love?

Đây là sản phẩm hợp tác: fromanother dẫn dắt creative direction và identity, Huy Phan (thành viên ban giám khảo Awwwards) thiết kế giao diện, và Hon Tran dựng nó với vai trò creative developer phụ trách front-end, motion GSAP, WebGL và tích hợp Prismic.

fromanother.love đã đoạt những giải nào?

FWA of the Day, cùng Awwwards Site of the Day (14/5/2026) và Awwwards Developer Award cho phần engineering front-end.

Website creative agency đoạt giải tốn bao nhiêu?

Tùy phạm vi, nhưng một trang agency bespoke, thiên về motion là một hợp tác cao cấp, không phải template. Tôi phân tích các mức giá thực tế trong bài chi phí làm website chuyển động.

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

Nếu bạn là agency, studio hay thương hiệu cần một website vượt mặt chính portfolio của mình — nhịp điệu editorial, WebGL, motion đọc lên như gu thẩm mỹ — đó 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.