TP009

Thảo Mộc Spa

Spa thảo mộc Đà Lạt với mô phỏng chất lỏng thời gian thực: rê chuột khuấy mực thảo mộc loang như màu nước, làn khói nhang bốc lên từ chân trang.

Điểm nổi bật

Mô phỏng Navier–Stokes trên GPU: advection, xoáy, áp suất Jacobi
Mực thảo mộc hiển thị theo định luật hấp thụ ánh sáng — loang như màu nước
Làn khói nhang tự bốc lên, rê chuột để khuấy nước
Liệu trình, ảnh AI parallax, đặt lịch bằng chip ngày/giờ, song ngữ VI/EN

Three.js
Motion
Vite
GPT Image
Fluid simulation
Interactive
Zen
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 song ngữ (VI/EN) cho spa: mô phỏng chất lỏng GPU — rê chuột khuấy mực thảo mộc loang như màu nước, khói nhang bốc lên từ chân trang.

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/fluid.js          Bộ giải chất lỏng GPU (stable fluids)
src/scene.js          Hiển thị mực (hấp thụ ánh sáng), khói nhang, khuấy theo chuột
public/images/        Ảnh nghi thức + phòng trị liệu (webp)
asset-prompts.json    Prompt tạo lại ảnh 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`
Màu các loại mực	mảng `INKS` trong `src/scene.js` (hệ số hấp thụ r/g/b)
Độ loang / độ lâu tan	`createFluid(..., { curl, velocityDissipation, dyeDissipation })`
Vị trí que nhang	`.incense` trong CSS + toạ độ `x` của splat khói trong `src/scene.js`
Liệu trình, giá	`src/locales.js` + `index.html`
Đặt lịch	sự kiện submit trong `src/main.js` — nối Zalo / Google Calendar / API

Ghi chú

Bộ giải chất lỏng dựa trên kỹ thuật "Stable Fluids" (Jos Stam) và bản WebGL của Pavel Dobryakov (MIT).
Ảnh tạo bằng AI (prompt trong asset-prompts.json). "Thảo Mộc Spa" là thương hiệu minh hoạ.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).