TP018

SƯƠNG Outdoor — Đồ leo núi

Thương hiệu đồ leo núi: kính mưa mô phỏng thật phủ lên ảnh hero (giọt nước khúc xạ, hơi sương, rê chuột để lau kính), bảng thử thời tiết và giọt nước đọng tròn lăn trên áo chống thấm.

Điểm nổi bật

Kính mưa thời gian thực: giọt tĩnh, giọt trượt có vệt, hơi sương; rê chuột để lau, sương tự phủ lại
Bảng “Thử thời tiết”: chỉnh lượng mưa, gió, hơi sương trực tiếp trên shader
Áo khoác thử nước: giọt tròn chỉ đọng trên vải rồi lăn xuống, có chú thích tính năng
Cấu trúc 4 lớp quét theo cuộn, giỏ hàng, cung đường có biểu đồ độ cao + thời tiết đỉnh, đếm ngược mở bán; song ngữ

Three.js
Motion
Lenis
Vite
GPT Image
Shader
Product launch
E-commerce
AI photography

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 thương hiệu đồ leo núi: kính mưa mô phỏng thật phủ ảnh hero (rê chuột để lau kính), bảng thử thời tiết điều khiển shader, giọt nước kỵ nước đọng tròn và lăn trên áo khoác.

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/rain-glass.js     Shader mưa trên kính: giọt tĩnh, giọt trượt, sương mờ, lau bằng chuột; chế độ giọt kỵ nước cho sản phẩm
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

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`
Lượng mưa / gió / sương mặc định	giá trị `value` của 3 thanh trượt trong `index.html` + `createRainGlass(...)` trong `src/main.js`
Ảnh nền kính mưa	`image` trong `createRainGlass` (bất kỳ ảnh dọc/ngang)
Cung đường & biểu đồ độ cao	đối tượng `TRAILS` (độ cao từng điểm `pts`) trong `src/main.js`
Ngày mở bán	hằng `DROP` trong `src/main.js`

Ảnh

Ả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.

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).