TP007

Hành Trình Việt

Website du lịch dạng phim: bốn chương phong cảnh AI chuyển cảnh bằng shader “mực loang”, sương mờ tan quanh con trỏ.

Điểm nổi bật

4 ảnh phong cảnh AI (Hạ Long, Sơn Đoòng, Mù Cang Chải, Hội An)
Chuyển cảnh mực loang theo cuộn: nhiễu fbm, méo hình, vệt sáng ấm, tách màu
Ken Burns, sương trôi tan quanh con trỏ, grain điện ảnh
Mục lục chương, thẻ tour, form nhận lịch trình, song ngữ VI/EN

Three.js
Motion
Vite
GPT Image
Shader transitions
Cinematic
Scroll story
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 du lịch song ngữ (VI/EN) dạng phim: các chương phong cảnh chuyển cảnh bằng shader mực loang, sương tan quanh con trỏ.

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          Shader chuyển cảnh mực loang + sương + grain
public/chapters/      Ảnh phong cảnh (webp) + ảnh thu nhỏ
asset-prompts.json    Prompt tạo lại ảnh bằng AI
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`
Ảnh từng chương	thay file trong `public/chapters/` và mảng `CHAPTERS` trong `src/main.js`
Thêm/bớt chương	thêm section `data-chapter` trong `index.html` + ảnh tương ứng
Kiểu chuyển cảnh	phần "Ink front" trong `fragmentShader` (`src/scene.js`)
Lượng sương, grain	phần "mist" / "grain" trong `fragmentShader`
Form nhận lịch trình	sự kiện submit trong `src/main.js` — nối email marketing / CRM

Ghi chú

Ảnh phong cảnh được tạo bằng AI (prompt trong asset-prompts.json). Nên thay bằng ảnh thật của tour khi dùng thương mại.
"Hành Trình Việt" là thương hiệu minh hoạ.
Thư viện: Three.js (MIT), Motion (MIT), Vite (MIT). Font Google (OFL).