Chuyển tới nội dung
ThemeStack

Canvas — Studio sáng tạo

Portfolio tầm giải thưởng với hiệu ứng chuyển trang WebGL

4,7 trên 54,7(74 đánh giá)588 lượt bán
Hero WebGL với gradient dựng bằng shader

Hero WebGL với gradient dựng bằng shader

Canvas dành cho những studio mà chính website phải là tác phẩm trong portfolio. Hiệu ứng chuyển ảnh WebGL, thư viện phản hồi theo con trỏ, case study cuộn ngang — kèm chế độ giảm hiệu ứng vẫn giữ được vẻ đẹp.

Điểm khác biệt

  • Hero 3D — Một scene Three.js nhẹ, tải sau lần vẽ đầu tiên và chuyển về ảnh gradient tĩnh trên thiết bị cấu hình thấp.
  • Hiệu ứng tôn trọng người dùng — Hiệu ứng xuất hiện theo cuộn trang và chuyển trang dựng bằng Motion, tự động tắt khi người dùng bật giảm hiệu ứng.
  • Lớp nội dung sẵn sàng cho CMS — Nội dung được đọc qua một adapter duy nhất, nên việc thay MDX bằng Sanity, Payload hay API riêng chỉ ảnh hưởng một tệp.
  • Theme dựa trên token — Mọi màu sắc, độ bo góc và bóng đổ đều là biến CSS. Đổi toàn bộ thương hiệu chỉ bằng cách sửa một tệp.
  • Thiết kế cho mọi breakpoint — Không chỉ co giãn tự động — mobile, tablet và desktop đều có bố cục được thiết kế riêng có chủ đích.
  • Component dễ tiếp cận — Điều hướng bằng bàn phím, viền focus, nhãn ARIA và độ tương phản WCAG AA được kiểm tra trên mọi thành phần tương tác.

Phù hợp với ai

Các nhà thiết kế chuyển động, nhiếp ảnh gia và studio sáng tạo cạnh tranh bằng ấn tượng thị giác.

Công nghệ sử dụng

Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Three.js · Motion · GLSL

Trong tệp tải về

  • Toàn bộ mã nguồn Next.js (TypeScript)
  • Tệp thiết kế Figma
  • Design token Tailwind CSS
  • Tài liệu hướng dẫn dạng văn bản
  • Cấu hình triển khai một cú nhấp

Cập nhật và hỗ trợ

Nâng cấp framework và sửa lỗi miễn phí chừng nào sản phẩm này còn tồn tại. Bản quyền Thường kèm 6 tháng hỗ trợ, bản Mở rộng kèm 12 tháng, và có thể gia hạn bất cứ lúc nào.

Bạn có thể cũng thích

Thêm sản phẩm trong cùng danh mục.