TP004

Sen Pay

Ví điện tử với hoa sen bằng kính khúc xạ ánh xà cừ nở theo từng nhịp cuộn, thẻ kim loại 3D bay vào và mockup app có số dư chạy.

Điểm nổi bật

Hoa sen 24 cánh dựng hoàn toàn bằng code, chất liệu kính khúc xạ ánh cầu vồng
Hoa nở theo cuộn trang, khúc xạ nền aurora chuyển động
Thẻ kim loại 3D in thông tin bằng Canvas, bay vào khi cuộn
Bento kính có hiệu ứng nghiêng & ánh sáng theo chuột, mockup app đếm số dư

Three.js
Motion
Vite
Glass
Procedural
Bento
App showcase

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 ví điện tử: hoa sen kính khúc xạ ánh cầu vồng nở theo cuộn, thẻ kim loại 3D, bento kính và mockup app.

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          Hoa sen procedural, thẻ 3D, nền aurora, bloom
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`
Số cánh, độ nở của hoa	`RINGS` trong `src/scene.js`
Màu kính / ánh xà cừ	`glass` (MeshPhysicalMaterial) trong `src/scene.js`
Chữ in trên thẻ	hàm `cardTexture()` trong `src/scene.js`
Số dư mockup	`BALANCE` trong `src/main.js`
Thời điểm hoa nở / thẻ bay vào	các `smoothstep(p, ...)` trong vòng lặp `start()`

Ghi chú

Không dùng ảnh: mọi hình 3D dựng bằng code.
"Sen Pay" là thương hiệu minh hoạ — thay bằng thương hiệu của bạn.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).