TP022

Phin Sáng — Cà phê phin

Ra mắt sản phẩm cà phê: bộ phin 3D giữa chữ “PHIN” khổng lồ với giọt cà phê nhỏ xuống ly; cuộn để phin bung thành từng bộ phận kèm chú thích, đồng hồ pha tương tác và biểu đồ hương vị.

Điểm nổi bật

Phin 3D (ảnh + độ sâu) với giọt cà phê rơi, xoay theo chuột, chữ PHIN khổng lồ phía sau
Giải phẫu phin ghim theo cuộn: ảnh nguyên bộ tan đi, 4 bộ phận bay ra, đèn soi từng phần
Đồng hồ pha 5 bước có ly cà phê đầy dần, biểu đồ radar hương vị 3 dòng hạt
Câu chuyện nông trại, cửa hàng chọn kiểu xay + giỏ hàng, địa chỉ quán; song ngữ

Three.js
Motion
Lenis
Vite
GPT Image
Depth Anything V2
Product launch
Exploded view
E-commerce
AI product photos

Trong gói tải về

Toàn bộ source code template (chạy bằng Vite, build ra web tĩnh — host ở bất kỳ đâu)
PROMPT.md — prompt để dựng lại / mở rộng trang bằng AI builder
README.md — hướng dẫn chạy & tuỳ biến (chính là nội dung bên dưới)

Website ra mắt sản phẩm cà phê: bộ phin 3D giữa chữ “PHIN” khổng lồ với giọt cà phê rơi; cuộn để phin bung thành từng bộ phận kèm chú thích; đồng hồ pha tương tác, biểu đồ radar hương vị, cửa hàng.

Chạy thử

Cần Node.js 18+.

npm install
npm run dev       # mở http://localhost:5173
npm run build     # xuất bản tĩnh vào dist/ — upload lên hosting bất kỳ

Mặc định trang mở tiếng Việt; thêm ?lang=en để mở tiếng Anh.

Cấu trúc

index.html            Khung trang (mọi section)
src/phin-scene.js     Sản phẩm 3D, giọt cà phê, bung bộ phận theo cuộn
src/relief.js         Ảnh + độ sâu → bề mặt 3D có ánh sáng
src/locales.js        TOÀN BỘ nội dung chữ (vi + en) — sửa ở đây
src/main.js           Ghép trang: preloader, cuộn, tương tác, form
src/style.css         Giao diện: biến màu/font ở `:root`, bố cục, responsive
src/fx.js + fx.css    Bộ motion: preloader, tách chữ, con trỏ, nút từ tính, marquee, đếm số, parallax, mở ảnh
src/smooth-scroll.js  Cuộn mượt (Lenis)
src/i18n.js           Chuyển ngôn ngữ (data-i18n)
public/images/        Ảnh webp (+ `*-depth.webp` = bản đồ độ sâu)
asset-prompts.json    Prompt tạo lại từng ảnh bằng AI
PROMPT.md             Prompt dựng lại trang bằng AI builder
scripts/depth-map.mjs  Tạo bản đồ độ sâu cho ảnh mới (chạy local)

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Chữ, giá, địa chỉ	`src/locales.js`
Màu nền / chữ / font	biến `:root` trong `src/style.css` + link Google Fonts trong `index.html`
Bộ phận khi bung	mảng `PARTS` (ảnh, chiều cao, vị trí) trong `src/phin-scene.js`
Vị trí giọt cà phê	dòng `d.position.set(...)` trong `src/phin-scene.js`
Thời gian pha (demo nhanh)	`TOTAL` và `SPEED` trong `src/main.js`
Hồ sơ hương vị	mảng `BEANS` (5 trục 0–1) trong `src/main.js`

Ảnh & bản đồ độ sâu

Ảnh tạo bằng AI theo prompt trong asset-prompts.json. Thay bằng ảnh thật của bạn: giữ tên file, xuất .webp.
File *-depth.webp là bản đồ độ sâu (trắng = gần). Tạo cho ảnh mới — miễn phí, chạy ngay trên máy:

npm i -D @huggingface/transformers sharp
node scripts/depth-map.mjs anh-moi.png public/images/anh-moi-depth.webp

(Depth Anything V2 — chạy offline sau lần tải model đầu tiên.)

Ghi chú

Thương hiệu, số liệu và giá trong template là minh hoạ — hãy thay bằng nội dung của bạn.
Hiệu năng: WebGL tự giảm độ phân giải trên mobile và dừng render khi tab ẩn / khi khu vực 3D ra khỏi màn hình.
Thư viện: Three.js (MIT), Motion (MIT), Lenis (MIT), Vite (MIT). Font Google (OFL).