TP019

LAM — Website ca sĩ, nhạc sĩ

Website cá nhân cho nghệ sĩ: chân dung dựng từ 95.000 hạt sáng trong không gian 3D, tan thành bụi rồi kết lại thành từng bìa album khi cuộn; trình phát nhạc ngũ cung khiến hạt nhịp theo từng nốt.

Điểm nổi bật

Chân dung 3D bằng hạt (ảnh + bản đồ độ sâu), xoay theo chuột
Đĩa nhạc ghim theo cuộn: chân dung → bụi → 3 bìa album, nền đổi màu theo từng album
Trình phát “đĩa đơn” tạo nhạc ngũ cung bằng Web Audio, hạt rung theo nốt
Lịch diễn hover hiện ảnh, câu chuyện sáng chữ theo cuộn, gallery 3 cột lệch tốc độ, đĩa than đặt trước, booking; song ngữ

Three.js
Web Audio
Motion
Lenis
Vite
GPT Image
Depth Anything V2
Particles
Personal site
Web Audio
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 cá nhân cho ca sĩ, nhạc sĩ, DJ: chân dung dựng từ 95.000 hạt sáng 3D, tan thành bụi rồi kết lại thành từng bìa album khi cuộn; trình phát nhạc ngũ cung Web Audio làm hạt nhịp theo nốt.

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/cloud.js          Đám mây hạt từ ảnh + độ sâu, biến hình qua bụi
src/player.js         Nhạc ngũ cung tạo bằng Web Audio (không cần file nhạc)
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
scripts/depth-map.mjs  Tạo bản đồ độ sâu cho ảnh mới (chạy local)

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`
Ảnh chân dung / bìa album	mảng `SHAPES` trong `src/main.js` (mỗi ảnh cần `-depth.webp`)
Số hạt / cỡ hạt	`COUNT` và `uSize` trong `src/cloud.js`
Màu nền theo album	mảng `TINTS` trong `src/main.js`
Dùng bài hát thật	thay `createPlayer` bằng thẻ `<audio>`; gọi `cloud.pulse()` theo `AnalyserNode`
Lịch diễn	danh sách `.dates` trong `index.html`

Ảnh & bản đồ độ sâu

Ả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.
File *-depth.webp là bản đồ độ sâu (trắng = gần). Tạo cho ảnh mới — miễn phí, chạy ngay trên máy:

npm i -D @huggingface/transformers sharp
node scripts/depth-map.mjs anh-moi.png public/images/anh-moi-depth.webp

(Depth Anything V2 — chạy offline sau lần tải model đầu tiên.)

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).