TP008

Cửu Long Data

Nền tảng dữ liệu khí hậu: 64.000 hạt chảy theo chín nhánh sông Cửu Long như dòng dữ liệu, trạm cảm biến hover xem số liệu trực tiếp, đổi lớp độ mặn / lượng mưa.

Điểm nổi bật

64.000 hạt chảy theo 9 nhánh sông, gói dữ liệu sáng chạy xuôi dòng
Trạm cảm biến nhấp nháy, rê chuột xem độ mặn / mực nước cập nhật liên tục
3 lớp dữ liệu đổi màu dòng chảy: lưu lượng, độ mặn, lượng mưa
KPI đếm số + sparkline tự vẽ, khối code API sống, song ngữ VI/EN

Three.js
Motion
Vite
Data viz
Particles
Dashboard
Procedural

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 nền tảng dữ liệu: 64.000 hạt chảy theo chín nhánh sông Cửu Long, trạm cảm biến số liệu sống, đổi lớp dữ liệu.

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          Hệ hạt chảy theo đường cong (DataTexture), trạm cảm biến, camera
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`
Hình dạng các nhánh sông	hàm `buildPaths()` trong `src/scene.js`
Số hạt	`COUNT` trong `src/scene.js`
Vị trí trạm cảm biến	`STATIONS` trong `src/scene.js`, tên trạm `STATION_IDS` trong `src/main.js`
Màu các chế độ dữ liệu	phần `mode` trong `vertexShader`
Nối dữ liệu thật	thay vòng `setInterval` trong `src/main.js` bằng API/WebSocket của bạn

Ghi chú

Không dùng ảnh. "Cửu Long Data" là thương hiệu minh hoạ, số liệu là mẫu.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).