TP002

Bánh Mì Bé Mập

Ổ bánh mì “nổ tung” thành từng lớp nguyên liệu 3D lơ lửng, cuộn để ráp lại — kèm trình tự chọn nhân cập nhật ổ bánh và giá theo thời gian thực.

Điểm nổi bật

6 lớp nguyên liệu AI đặt trong không gian 3D, bóng đổ mềm, parallax theo chuột
Cuộn trang để ráp ổ bánh từ trạng thái “nổ tung”
Tự chọn nhân: tắt nguyên liệu → lớp đó bay ra, tổng tiền tự cập nhật
Rê chuột lên từng lớp để xem tên, giao diện neo-brutalism pastel

Three.js
Motion
Vite
GPT Image
Exploded view
Product builder
Neo-brutalism
AI images

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)

Landing page song ngữ (VI/EN) cho quán ăn: ổ bánh mì nổ tung thành các lớp nguyên liệu 3D, cuộn để ráp lại, kèm trình tự chọn nhân cập nhật giá.

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
src/locales.js        TOÀN BỘ nội dung chữ (vi + en) — sửa ở đây
src/main.js           Ghép giao diện + hiệu ứng Motion
src/scene.js          Các lớp ảnh trong không gian 3D, bóng đổ, hover, bay ra/vào
public/layers/        6 lớp nguyên liệu (webp nền trong suốt)
asset-prompts.json    Prompt tạo lại ảnh nguyên liệu bằng AI
src/style.css         Giao diện (màu, font, bố cục)
src/i18n.js           Bộ chuyển ngôn ngữ (data-i18n)
src/ui-motion.js      Hiệu ứng chữ & cuộn dùng chung
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`
Ảnh nguyên liệu	thay file trong `public/layers/` (PNG/WebP nền trong suốt, đã cắt sát viền)
Vị trí / độ rộng từng lớp	mảng `LAYERS` trong `src/scene.js`
Giá bánh và từng topping	`BASE_PRICE` trong `src/main.js` + `data-price` trong `index.html`
Thêm nguyên liệu mới	thêm lớp vào `LAYERS`, ảnh vào `public/layers/`, một dòng `data-ingredient`
Nút đặt hàng	sự kiện click `[data-order]` trong `src/main.js` — nối giỏ hàng / API

Ghi chú

Ảnh nguyên liệu được tạo bằng AI (prompt trong asset-prompts.json).
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).