Website Perxel 2026

Website Perxel 2026 là phiên bản mới của website Perxel, được làm lại toàn bộ bằng Next.js, GSAP và Cloudflare Workers. Trang chủ có nước dâng lên che màn hình, một con cá voi bơi đi mất, và một chiếc máy bay giấy tự gấp lại ở cuối trang. Cả site xoay quanh ba thứ: nước, bay và một nhân vật làm con trỏ. Bài viết này chia sẻ cách Perxel làm từng phần, những ý tưởng đã thử rồi bỏ, cách đo tốc độ, và ghi nguồn những tài nguyên không do Perxel tạo ra.

Đề bài

Perxel làm website cho designer và agency, nên website của Perxel cũng là sản phẩm đầu tiên khách hàng nhìn vào. Nguyên tắc đặt ra từ đầu là toàn bộ site giữ phong cách gọn: nền trắng, chữ nhẹ, nút bấm đơn giản. Riêng trang chủ có nhiều hiệu ứng hơn, vì đây là nơi thể hiện rõ nhất khả năng làm animation của Perxel.

Ý tưởng xuyên suốt của site là nước, bay và một nhân vật có tính cách. Nước là chất liệu: mép nước, bình nước, biển và con cá voi. Bay là chuyển động: chiếc máy bay giấy lượn vòng rồi hạ cánh, con cá voi lướt đi xa dần, các card bơi qua màn hình như một đàn cá. Nhân vật là con trỏ, một giọt nước có hai mắt đi theo bạn qua mọi trang. Ba thứ này nối các phần của trang chủ thành một câu chuyện liền mạch, thay vì một chuỗi hiệu ứng rời nhau.

Một yêu cầu khác là animation không được làm chậm tốc độ tải trang. Trang chủ đẹp nhưng phải chờ vài giây mới hiện chữ đầu tiên thì người xem cũng khó đánh giá cao. Bản đầu tiên của trang chủ mắc đúng lỗi này. Phần "Giữ tốc độ" bên dưới kể lại cách sửa.

Stack

• Next.js 16 (App Router) và React 19 cho toàn bộ site, các bài viết được soạn bằng MDX.
• Tailwind CSS 4 cho giao diện.
• GSAP (ScrollTrigger) và Lenis cho scroll: pin màn hình, scrub theo cuộn, cuộn mượt.
• Canvas cho các hiệu ứng nặng hình ảnh (nước, cá voi, máy bay giấy, con trỏ). Vẽ bằng code nên hình luôn nét ở mọi kích thước và kiểm soát được từng frame.
• Cloudflare Workers để chạy site, build bằng OpenNext và deploy tự động qua GitHub Actions mỗi lần push lên main.

Cách làm các hiệu ứng

Nước dâng

Bên dưới tiêu đề trang chủ là một dải màu xanh brand. Các logo công nghệ rơi xuống như những viên bi và nằm trên một mép nước được vẽ bằng canvas. Khi con trỏ chạm vào, mép nước gợn sóng. Khi người dùng cuộn trang, nước dâng lên che kín màn hình, các logo nổi lên như bọt khí rồi phủ trắng toàn bộ dải màu. Màn hình trắng này cũng là nền của phần tiếp theo, nên hai phần nối liền nhau mà không có khoảng trống.

Nước dâng lên khi cuộn trang, các logo nổi lên rồi phủ trắng dải màu xanh.

Bình nước và con cá voi

Ba dòng chữ lớn "With great design comes great engineering" là ba cái bình. Khi người dùng cuộn trang, từng dòng chữ lần lượt được rót đầy nước xanh. Nước có quán tính: cuộn nhanh thì mặt nước sóng sánh hơn rồi từ từ lặng lại, và khi một dòng đầy thì có vài giọt bắn lên ở đầu chữ. Khi đã đầy, dòng chữ đung đưa nhẹ như cây thủy sinh.

Ba dòng chữ lần lượt được rót đầy khi cuộn trang.

Khi dòng cuối đầy, nền chuyển sang biển. Một con cá voi lưng gù, nhìn từ phía sau, bơi đi xa dần. Con cá voi này được vẽ hoàn toàn bằng code, không dùng ảnh hay video. Trong suốt phần này, cá voi chỉ vẫy đuôi đúng một lần, từ lúc xuất hiện cho đến khi biến mất. Vì vậy dù người dùng cuộn nhanh hay chậm, nó vẫn bơi hết quãng đường.

Chữ mờ dần, rồi con cá voi bơi đi xa.

Đây là phần Perxel làm lại nhiều lần nhất. Trước con cá voi, nền biển từng có cá và bong bóng kiểu hoạt hình, rồi những vệt sáng dưới nước, rồi mực loang theo con trỏ. Bản mực loang trông giống một cơn bão hơn là mặt biển, nên bị bỏ. Cách các dòng chữ rời màn hình cũng được thử nhiều kiểu: thu nhỏ, chìm xuống, tan thành bong bóng, xé ra như giấy ướt. Kiểu nào cũng trông giả, và kiểu cuối còn làm site chậm đi. Bản hiện tại đơn giản hơn: chữ mờ dần, rồi cá voi bơi đi.

Con cá bơi qua các dự án

Ở phần dự án nổi bật, các card không trượt thẳng mà uốn theo một làn sóng chạy từ đầu đến đuôi hàng, như một con cá đang bơi. Bản đầu dùng card phẳng xoay trong CSS 3D, nhưng card phẳng không uốn cong được nên trông không giống cá bơi. Vì vậy Perxel chuyển sang canvas: mỗi card được vẽ thành những lát dọc, lát nào cũng lệch và nghiêng theo sóng, nên ảnh, video và cả dòng tên dự án đều cong theo. Người dùng cuộn càng nhanh, hàng card uốn càng mạnh, sau đó chậm dần lại.

Hàng card uốn theo sóng khi cuộn trang.

Máy bay giấy

Cuối trang chủ, một tờ giấy vuông lật vào giữa màn hình, tự gấp thành máy bay giấy, bay một vòng rồi thu nhỏ dần về đúng vị trí. Cuộn lùi thì máy bay mở ra lại. Sau khi đã gấp xong, máy bay chỉ chạy tiếp về phía trước, không mở ra nữa. Hình dạng chiếc máy bay dựa trên mô hình 3D của Trockk (xem phần Credits). Perxel dùng hình đó làm mẫu rồi vẽ lại từng nếp gấp trên canvas.

Tờ giấy tự gấp thành máy bay, bay một vòng rồi hạ cánh.

Giọt nước làm con trỏ

Con trỏ là một giọt nước có hai mắt. Trên nền xanh, nó chuyển sang màu trắng và đổi hình theo cảnh: thợ lặn, cá vàng, sứa hoặc cá nóc. Ở trang chủ, khi đứng yên một lúc nó sẽ chạy, nhảy, chơi cầu lông hoặc nhảy xuống hồ bơi. Ở các trang khác, nó không có những hành động này để người đọc không bị mất tập trung.

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

Perxel đo bằng Lighthouse và PageSpeed Insights, rồi sửa theo số đo chứ không đoán. Trên trang chủ bản mobile, LCP giảm từ 8,7 giây xuống khoảng 1,8 giây và CLS từ 0,9 về 0. Các thay đổi chia thành bốn nhóm:

• Giao diện: tiêu đề hiện bằng CSS thay vì chờ GSAP, trạng thái ban đầu của layout nằm sẵn trong CSS, và điện thoại nhận phiên bản nhẹ hơn của các hiệu ứng nặng.
• Code: mỗi trang chỉ tải JavaScript nó cần. JavaScript của trang chủ giảm từ 313 KB xuống 261 KB (brotli).
• Tài nguyên: font được tự host và cắt theo bảng chữ tiếng Việt, ảnh và video có kích thước gần với khung hiển thị.
• Máy chủ: một Worker nhỏ đứng trước ứng dụng Next.js trả về các trang đã prerender, để request đầu tiên không phải chờ ứng dụng khởi động.

Cách làm chi tiết và số đo của từng nhóm nằm trong bài Tối ưu tốc độ website Next.js.

Tiêu đề hiện ngay khi tải trang, nhân vật Lottie vào sau.

PageSpeed Insights trên mobile, lần đo ngày 10/10/2026 (Moto G Power giả lập, mạng Slow 4G).

Cùng lần đo, bản desktop.

Hai con số trên là kết quả của một lần đo giả lập (lab data), nên đo lại có thể lệch nhiều: cùng phiên bản code này, một lần đo tối hôm trước chỉ được 68 điểm bản mobile. Con số gần với trải nghiệm thật hơn là phần "Discover what your real users are experiencing" ở đầu báo cáo, lấy từ dữ liệu người dùng Chrome thật trong 28 ngày. Website Perxel hiện vẫn ở trạng thái "No Data" vì chưa đủ lượt truy cập. Hai loại dữ liệu này khác nhau thế nào được giải thích kỹ hơn trong bài PageSpeed Insights & Core Web Vitals.

Perxel không hứa điểm số cho website nào, kể cả website của chính mình, vì điểm phụ thuộc vào nội dung đăng lên sau đó, hosting và các bên thứ ba như analytics.

Hạ tầng

Site chạy trên Cloudflare Workers, gói miễn phí. Perxel cảm ơn Cloudflare vì hạ tầng edge ổn định mà không tốn phí cố định hàng tháng.

Deploy đi qua GitHub Actions: mỗi lần push lên main, workflow build bằng OpenNext rồi đưa lên Cloudflare. Có một chi tiết dễ vấp: Workers không có ổ đĩa, nên mọi nội dung phải được liệt kê sẵn lúc build chứ không đọc thư mục khi chạy.

Khác với Vercel, Cloudflare không tự trả trang đã prerender mà không khởi động ứng dụng Next.js. Với một website ít truy cập, request đầu tiên có thể phải chờ vài giây. Perxel viết thêm một Worker nhỏ đứng trước để trả các trang này, cách làm được ghi trong phần Máy chủ của bài Tối ưu tốc độ website Next.js.

Credits

Các tài nguyên dưới đây không do Perxel tạo ra. Xin cảm ơn các tác giả.

• Máy bay giấy ở cuối trang chủ. "Paper Plane Asset" của Trockk, dùng theo giấy phép Creative Commons Attribution 4.0. Mô hình này được dùng để lấy hình dạng, các nếp gấp được vẽ lại trên canvas.
• Các animation minh hoạ (Lottie). Lấy từ LottieFiles, trong đó có artwork của Animoox. Từng file được đổi màu về bảng màu của Perxel. Cách làm xem ở bài Lottie animation.
• Cloudflare cho phần hosting, như đã nói ở trên.

Câu hỏi thường gặp

Perxel có làm được hiệu ứng như trang chủ cho website của khách hàng không?

Hiệu ứng như ở trang chủ này tốn nhiều công và chỉ phù hợp khi hiệu ứng là điểm nhấn chính của website. Perxel làm được, nhưng với đa số website marketing, vài chuyển động được chọn lọc và một codebase gọn sẽ phù hợp hơn với khách hàng. Điều này sẽ được trao đổi rõ khi bàn về dự án.

Có cần GSAP và canvas cho mọi animation không?

Phần lớn animation trên site này vẫn là CSS hoặc Reveal thông thường. Canvas và GSAP chỉ xuất hiện ở những chỗ CSS không làm được, như nước, cá voi hay các card uốn cong.

Người dùng tắt animation thì sao?

Trình duyệt có tuỳ chọn prefers-reduced-motion. Khi bật, trang chủ không pin và không chạy các hiệu ứng nặng: các dòng chữ hiện đầy, con cá voi đứng yên ở xa, con trỏ trở về dạng mặc định. Nội dung vẫn đọc được đầy đủ.

Khi tắt animation, dải công nghệ trở thành lưới logo kèm tên.

Footnotes

1. Paper Plane Asset, Trockk (Sketchfab)
2. Creative Commons Attribution 4.0 International
3. Animoox trên LottieFiles