TP021

Mướp — Thức ăn cho mèo

Thương hiệu pate cho mèo: chú mèo mướp ảnh thật là khối thạch mềm có vật lý — kéo giãn, buông ra rung nảy, chọc vào kêu “meo”; đồ ăn rơi vào tô theo vật lý thật, máy tính khẩu phần.

Điểm nổi bật

Mèo “thạch”: lưới 27×39 điểm lò xo, kéo giãn, rung nảy, thở nhẹ, chân bám sàn
Chọc vào là mèo kêu meo — âm thanh tổng hợp bằng Web Audio, không cần file
Tô đồ ăn vật lý: hộp pate, cá, tôm, bí rơi, lăn, kéo thả được; đổi vị đổi màu
Máy tính khẩu phần, gói định kỳ, giỏ hàng + toast, thẻ đánh giá vuốt kiểu Tinder, FAQ; song ngữ

Three.js
Canvas 2D
Web Audio
Motion
Lenis
Vite
GPT Image
Soft body
Physics
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 bán thức ăn cho mèo: chú mèo ảnh thật là khối thạch mềm có vật lý (kéo giãn, rung nảy, chọc vào kêu “meo” tổng hợp bằng Web Audio), đồ ăn rơi vào tô theo vật lý, máy tính khẩu phần, gói định kỳ.

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/squishy.js        Soft-body lưới lò xo trên ảnh cắt nền
src/pile.js           Vật lý Verlet 2D cho đồ ăn trong tô
src/meow.js           Tiếng “meo” tổng hợp bằng Web Audio
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`
Đổi “nhân vật” mềm	`image` trong `createSquishy` (ảnh nền trong suốt, chủ thể đứng)
Độ mềm / độ nảy	`stiff`, hệ số `anchor` và giảm chấn `0.985` trong `src/squishy.js`
Hương vị & dinh dưỡng	đối tượng `FLAVORS` trong `src/main.js`
Công thức khẩu phần	hàm `calc()` 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).