content.conan.school

Landing page của khoá Content Agent (hệ thống học viên dựng ra gọi là Content Factory). Vite + React + Tailwind v4 (token chung) + shadcn/ui + Motion. Deploy qua deploy-content.yml vào Pages project content-conan-school.

Ảnh minh hoạ: vẽ bằng thuật toán

25 ảnh SVG ở public/art/, nhiều khổ (2400×1200, 1600×900, 1200×900, 2400×800, 2400×400, 512×512).

Thứ	Ở đâu
Danh sách cảnh, khổ, motif, chỗ dùng, prompt	content.conan.school/art/scenes.json (nguồn sự thật, trong git)
Bộ vẽ	content.conan.school/scripts/gen-art.mjs
Ảnh đầu ra	content.conan.school/public/art/*.svg (commit vào git)

cd content.conan.school
npm run art                          # vẽ lại sau khi sửa scenes.json hay bộ vẽ
node scripts/gen-art.mjs --check     # build chạy bước này: ảnh lệch bản vẽ lại thì build đỏ

Luật nhà giống skill course-art: bốn màu token đọc thẳng từ theme.css (không gõ hex), đậm nhạt bằng opacity, không chữ (<text, font- bị chặn), không <image>, mọi số đo tính từ khổ khung, ngẫu nhiên gieo bằng SHA-256 của id nên vẽ lại bao nhiêu lần cũng ra đúng một ảnh. Mọi cảnh dùng chung một khung (nền giấy, quầng sáng, lưới chấm), đó là thứ làm 25 ảnh nhìn ra cùng một nhà.

Prompt nằm trong JSON chứ không trong D1: site là trang tĩnh không có binding D1, và nội dung do agent viết phải vào repo trước.

Hiệu ứng theo cuộn

Mọi hiệu ứng nằm ở src/motion/scroll.tsx: Parallax, ZoomIn, WordReveal, Reveal, ScrollProgress.

• Hero ghim 220vh: chữ lùi lên, ảnh nhà máy tiến lại gần.
• Cảnh ghim 300vh: ảnh trật tự quét qua mớ rối bằng clip-path, ba câu chữ thay nhau.
• Hành trình 8 bước ghim 320vh: cuộn dọc, dải thẻ trôi ngang (đo bề rộng thật, không đoán số).
• Năm nỗi đau là thẻ chồng (StackCards): thẻ sau trượt lên che thẻ trước, thẻ trước lùi nhỏ và tối đi.
• Con số anh hùng (BigNumber): số 28 co từ 7 lần về đúng cỡ và đếm từ 1 lên theo nhịp cuộn.
• DrawLine vẽ dần một đường cam giữa các phần; Tilt lật thẻ dựng đứng lên; FlyIn cho ba thẻ giá bay vào từ trái, dưới, phải; Marquee hai dải chữ trôi ngược chiều; ảnh một buổi học mở ra từ một vòng tròn (clip-path: circle).

Bẫy tràn ngang: thẻ bay vào từ bên phải nằm ngoài khung lúc bắt đầu, làm cả trang cuộn ngang được. Sửa bằng overflow-x: clip trên main, không dùng overflow: hidden: hidden biến main thành khung cuộn và mọi khối sticky bên trong thôi ghim, không báo lỗi gì.

Bẫy: MotionConfig reducedMotion="user" chỉ tắt animation, không tắt style gắn vào scroll. Mọi giá trị theo cuộn phải đi qua useRange, hàm này trả trạng thái cuối khi người dùng bật giảm chuyển động. Các cảnh ghim cũng bỏ chiều cao 220/300/320vh lúc đó, nếu không sẽ còn lại một khoảng cuộn trống.

Trang chủ www dẫn sang

www.conan.school/app/components/home/ContentAgentPromo.tsx, đặt ngay dưới hero. Chữ song ngữ ở object COPY trong file đó. Ảnh lấy thẳng từ https://content.conan.school/art/hero-factory.svg.