TP001

Lụa Atelier

Dải lụa thêu treo trên thanh đồng — kéo, thả, bay trong gió và tự nhuộm màu theo từng bộ sưu tập.

Điểm nổi bật

Lụa mô phỏng vật lý: kéo thả bằng chuột/cảm ứng, đổ bóng thật
Hiệu ứng nhuộm vải từ trên xuống khi đổi bộ sưu tập
Màu nhấn của cả trang đổi theo màu lụa
Bố cục tạp chí, form đặt lịch, song ngữ VI/EN

Three.js
Motion
Vite
GPT Image
Cloth physics
Interactive
Editorial
AI textures

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 thương hiệu áo dài / thời trang lụa, với dải lụa mô phỏng vật lý kéo-thả đượ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ỳ

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 + form
src/scene.js          Cảnh Three.js: thanh treo, ánh sáng, bóng đổ, nhuộm vải
src/cloth.js          Bộ mô phỏng vải Verlet
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
src/stage.js          Khởi tạo renderer/camera dùng chung
public/textures/      3 texture lụa (webp)
public/images/        Ảnh editorial
asset-prompts.json    Prompt tạo lại ảnh/texture bằng AI
PROMPT.md             Prompt dựng lại toàn bộ trang bằng AI builder

Tuỳ biến nhanh

Muốn đổi	Sửa ở
Chữ, giá, địa chỉ	`src/locales.js`
Texture lụa	thay file trong `public/textures/` (ảnh vuông, lặp liền mạch, ~1024px)
Màu nhấn từng bộ sưu tập	`ACCENTS` trong `src/main.js`
Màu nền / chữ / font	biến `:root` trong `src/style.css`
Độ mềm, gió, nếp vải	`cloth.gather(...)` và hàm `wind` trong `src/scene.js`
Kích thước dải lụa	`CLOTH_W`, `CLOTH_H` trong `src/scene.js`
Form đặt lịch	sự kiện `submit` trong `src/main.js` — nối API / Google Form / Zalo

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

Ghi chú

Ảnh và texture được tạo bằng AI (prompt trong asset-prompts.json).
Font Google: Cormorant Garamond, Be Vietnam Pro (giấy phép OFL).
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT).