Brief 5 dòng
Sản phẩm, người xem, cảm xúc cần có, thông số có nguồn, câu chuyện 4 tới 6 nhịp cuộn. Số nào thiếu nguồn thì ghi "cần xác nhận", không tự điền.
WebMotion · Plugin cho Claude Code
Một sản phẩm.Hai mươi cáchkể chuyện.
Dựng trang giới thiệu sản phẩm có khối 3D xoay được, cuộn mượt và hình minh họa AI. Chọn hướng thẩm mỹ từ thư viện 20 style theo ngành, rồi biến tấu cho đúng chất của sản phẩm.
20style gợi ý
6bước quy trình
3kiểu khối 3D
0website tham khảo
Cách làm
Từ tên sản phẩm tới trang hoàn chỉnh trong 6 bước
Skill dẫn Claude đi đúng trình tự, có bước tự chấm ở cuối. Mỗi trang phải có một chi tiết riêng của sản phẩm làm họa tiết xuyên suốt, để không trang nào giống trang mẫu.
Chọn style
Chọn 2 tới 3 thẻ gần nhất trong thư viện, có thể pha hai style. Sau đó tìm một chi tiết riêng của sản phẩm để biến tấu.
Sinh hình minh họa
4 tới 6 ảnh theo khuôn prompt của style: hero, cảnh dùng sản phẩm, họa tiết, không khí. Ảnh đầu làm ảnh mẫu cho các ảnh sau để cả trang đồng bộ.
Dựng khối 3D
Tách nền ảnh sản phẩm, rồi chọn khối theo dáng: tròn xoay cho lon, chai; thổi phồng cho đồ ăn, vật dẹt; hộp cho bao bì, thiết bị.
Dựng trang
Khung kỹ thuật có sẵn: cuộn mượt, sản phẩm đi qua nhiều chặng, đổi phiên bản, chống tràn trên điện thoại. Phần thẩm mỹ đổi hết theo style.
Tự chấm
Checklist thẩm mỹ, chữ tiếng Việt, kỹ thuật và số liệu, chấm ở cả khổ máy tính lẫn 375px. Mục nào trượt thì sửa rồi chấm lại.
Thư viện style
20 hướng thẩm mỹ, trải khắp các ngành
Mỗi thẻ gồm bảng màu đã kiểm tương phản, cặp font có tiếng Việt, gợi ý bố cục, chuyển động, cách đưa 3D vào, khuôn prompt ảnh và những lỗi nên tránh. Đây là điểm xuất phát để biến tấu, không phải khuôn cố định.
Chép lệnh: câu lệnh dán thẳng vào Claude Code đã cài WebMotion, thay tên sản phẩm là xong.
Chép thẻ: nguyên thẻ style kèm lời dặn, dán vào AI nào cũng được, kể cả chưa cài plugin.
Thẻ ↗: đọc thẻ style trên GitHub. Bấm vào ảnh để xem chi tiết màu, font, điều nên tránh.
Chưa có style khớp từ khóa này. Thử một ngành gần nghĩa hoặc xóa ô tìm.
Demo
Xem tận mắt, cuộn thử luôn
Ba trang dựng bằng chính quy trình này. Mở ra, cuộn chậm và kéo chuột để xoay. Thương hiệu, giá và số liệu trong demo đều là giả định.
Đồ ăn · tách lớp
Bánh mì, tách từng lớp một
Ổ bánh phồng 3D dựng từ ảnh AI. Cuộn thì xoay một vòng, tách 7 lớp có nhãn tên, nghiêng khoe độ dày rồi ráp lại. Kéo chuột để xoay 360 độ.
khối puffytách nền rembgẨm thực ấm cúng + Điện ảnh tối Mở demo ↗
Nghệ thuật · khối dựng bằng code
Ánh sáng cũng có hình khối
Khối nút thắt bóng như thủy tinh, dựng hoàn toàn bằng code, không cần ảnh. Di chuột để uốn khối sáng, cuộn để xem tác phẩm và quy trình.
Three.jsvật liệu kínhTạp chí sang + Điện ảnh tối Mở demo ↗
Đồng hồ · video 3D tua theo cuộn
Đeo một tuần trăng trên cổ tay
Nền là video 3D tua theo thanh cuộn kiểu Apple: cảnh đồng hồ dựng bằng Three.js, xuất thành chuỗi ảnh rồi vẽ lên canvas. Cuộn để xoay, tách mười lớp có chú thích bám theo, soi ô tuần trăng, lật xem bộ máy. Bản điện thoại dùng chuỗi ảnh dọc riêng.
chuỗi ảnh WebPcanvas scrubTạp chí sang, bảng Đen ngọc trai Mở demo ↗
Bên trong plugin
Đủ đồ nghề để trang đẹp ngay lần dựng đầu
Khối 3D
Kéo để xoay
Dựng từ một tấm ảnh
Đo dáng sản phẩm từ ảnh chính diện rồi quay thành khối tròn xoay. Khối bên cạnh dựng theo cùng cách.
Khung trang
Cuộn mượt, không giật
Lenis kết hợp GSAP ScrollTrigger, scrub có độ trễ, vòng render chung một nhịp. Thư viện ghim phiên bản: three 0.170.0, gsap 3.13.0, lenis 1.3.11.
Khối dùng lại
Lon, đồ ăn, hộp và hơn thế
lathe cho vật tròn xoay, puffy thổi phồng ảnh phẳng, box cho hộp, kèm tô toon, viền đen, bóng mềm và kéo để xoay.
Script Python
Tách nền tự động
rembg cắt sát vật thể, loang màu mép để không viền đen khi xoay, đo dáng và tạo bản đồ độ phồng.
Checklist
Tự chấm 4 nhóm
Thẩm mỹ, chữ tiếng Việt (dấu không bị cắt), kỹ thuật (không tràn ở 375px, không lỗi console), số liệu có nguồn.
Khung kiểm
Chụp đúng khổ
Nhúng trang vào khung 1280x720 hoặc 375x812 để chấm khi cửa sổ trình duyệt nhỏ, ép được chế độ giảm chuyển động.
Cài đặt
Ba lệnh là dùng được
Cài qua marketplace của Claude Code, rồi cài các gói Python cho bước tách nền. Sau đó chỉ cần nói với Claude: "Làm web giới thiệu sản phẩm X", kèm ảnh nếu có.
Đang trong phiên Claude Code thì gõ /plugin marketplace add andyluu98/WebMotion rồi /plugin install webmotion@webmotion. Chưa muốn cài? Bấm "Chép thẻ" ở thư viện, dán vào AI bất kỳ.
1. Thêm marketplace
claude plugin marketplace add andyluu98/WebMotion
2. Cài plugin
claude plugin install webmotion@webmotion
3. Gói Python (3.10 trở lên)
pip install rembg numpy opencv-python-headless Pillow
4. Dùng trong Claude Code
Dùng skill webmotion làm web giới thiệu sản phẩm [tên sản phẩm], style tùy chọn