TP003

Trà Mộc · Xuân Sum Vầy

Cành mai AI tan thành 42.000 hạt vàng, xoáy thành chữ “Xuân 2027” rồi thành bao lì xì — kèm đếm ngược giao thừa và mini-game hái lộc.

Điểm nổi bật

42.000 hạt GPU morph giữa 3 hình: cành mai → chữ → bao lì xì
Chuột đẩy hạt, nút “Hái lộc” làm hạt bung tung toé
Đồng hồ đếm ngược giao thừa Tết Đinh Mùi 2027
3 hộp quà Phúc · Lộc · Thọ, song ngữ VI/EN

Three.js
Motion
Vite
GPT Image
Particles
Morphing
Seasonal
Mini-game

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 chiến dịch quà Tết: cành mai tan thành hạt vàng, morph thành chữ và bao lì xì, đếm ngược giao thừa, mini-game hái lộ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/

Cấu trúc

index.html              Khung trang + trạng thái 3D của từng section (data-scene)
src/locales.js          TOÀN BỘ nội dung chữ (vi + en), lời chúc hái lộc
src/main.js             Đếm ngược, hái lộc, nội suy trạng thái theo cuộn
src/scene.js            Hệ hạt Three.js + shader morph
src/sample-points.js    Lấy mẫu ảnh / chữ thành điểm
src/style.css           Giao diện đỏ – vàng
public/images/          Cành mai + bao lì xì (webp nền trong suốt)
asset-prompts.json      Prompt tạo lại ảnh 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á, lời chúc	`src/locales.js`
Ngày đếm ngược	`NEW_YEAR` trong `src/main.js`
Mã ưu đãi	`COUPONS` trong `src/main.js`
Chữ hạt "Xuân 2027"	`sampleText([...])` trong `src/scene.js`
Thay cành mai / bao lì xì	ảnh PNG/WebP nền trong suốt trong `public/images/`
Vị trí, độ lớn khối hạt mỗi section	thuộc tính `data-scene` trong `index.html`
Số lượng hạt	`COUNT` trong `src/scene.js`
Màu nền, vàng, font	biến `:root` trong `src/style.css`

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

Ghi chú

Ảnh được tạo bằng AI (prompt trong asset-prompts.json).
Font Google: Playfair Display, Dancing Script, Be Vietnam Pro (OFL).
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT).