Lab · Design study
Rubik Resend
design studyBài tập tự code lại landing Resend với điểm nhấn khối Rubik 3D Three.js - học pipeline material PBR, glassmorphism, hero cinematics.
TTBởi Trần Công ThắngXuất bản
Lập trình
Kiến trúc & công nghệ áp dụng
HTML5CSSThree.js
- Cube 3×3×3 tự build từ BoxGeometry, 4 material variant: glossy onyx / matte void / granite / micro-grain
- Sobel filter sinh normal map runtime cho granite tile - không asset đính kèm
- Original implementation từ quan sát hình ảnh public - không sao chép code/asset Resend
Thiết kế
UX/UI & design system
- Phong cách tối + gradient text + glassmorphism - học từ Resend, áp dụng cho client riêng
- Hero cinematics: cube xoay nhẹ, lighting clearcoat khoá vào palette đen
SEO
Tối ưu công cụ tìm kiếm
- Study artifact - không public deployment
Case study đang được biên soạn
Bài chi tiết về quá trình xây dựng dự án này - context kinh doanh, vấn đề kỹ thuật, lựa chọn công nghệ, kết quả đo được - sẽ được cập nhật sớm.
Dự án khác
Tất cả →MAXMIN
MAXMIN
Restream cloud cho seller livestream - 1 nguồn phát đồng thời Shopee, TikTok, Facebook. Không cần PC mạnh hay OBS.
VietnamID
VietnamID
Mạng xã hội thương mại - feed, shop seller, đơn hàng, chat realtime. PWA cài được từ homescreen.
OnThi365
OnThi365
Ôn thi THPT - khoá học video, ngân hàng đề, đấu trường real-time, livestream đa nền tảng.