AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Oil Motion — Pipeline hoạt ảnh web tương tác

Skill biến video hoặc chuỗi khung hình do AI tạo thành hoạt ảnh web phản hồi theo cuộn, con trỏ, kéo, chạm hay âm thanh.

Ảnh · VideoNâng cao★ 2,712⑂ 196Điểm AI 9/10Cập nhật lần cuối: 4 thg 10, 2026

Làm được gì

  • Chuẩn hoá ý định tương tác thành 4 nguồn sự thật: concept-contract.yaml, motion-brief.yaml, build/timeline.json, build/motion-budget.json.
  • Tạo keyframe và các đoạn video (mặc định qua ZenMux); nếu đã có sẵn video hoặc chuỗi frame thì bỏ qua bước sinh và bắt đầu từ phân tích.
  • Xử lý media bằng ffmpeg/Pillow: tách nền xanh, dựng alpha atlas (sprite sheet), nội suy khung hình, nén theo ngân sách dung lượng.
  • Tự chọn định dạng giao hàng (baked-video / chroma-video / alpha-atlas) và bộ điều khiển runtime (frame-scrub / segment-playback / autonomous), rồi nối vào trang bằng interactive-motion.ts.
  • Bắt buộc chạy Pilot một đoạn trước khi sản xuất hàng loạt, kiểm thử từng đoạn và nghiệm thu cuối ở kích thước CSS, DPR, cache lạnh, thiết bị di động.

Phù hợp với ai

  • Lập trình viên frontend và motion designer làm landing page, hero section có hoạt ảnh phức tạp.
  • Người cần đưa video AI vào web mà vẫn giữ hiệu năng và dung lượng hợp lý.
  • Không dành cho micro-interaction đơn giản có thể làm bằng CSS/JS/Lottie.

Ví dụ sử dụng

  1. Cuộn trang để sản phẩm xoay 360° và tách rời từng bộ phận, xuất thành alpha atlas tỷ lệ 16:9.
  2. Vuốt trên mobile để nhân vật chuyển sang trạng thái kế tiếp theo kiểu segment-playback, có hỗ trợ vuốt ngược.
  3. Làm sạch và nén một video phông xanh sẵn có thành tài nguyên hoạt ảnh nền trong suốt cho web.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/oil-oil/oil-motion/HEAD/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên AI Skill Mart.
Copy thư mục SKILL.m từ repo GitHub oil-oil/oil-motion vào ~/.claude/skills/oil-motion/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/oil-oil/oil-motion.git ~/.claude/skills/oil-motion

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  2. Tải mã nguồn: git clone https://github.com/oil-oil/oil-motion.git ~/.claude/skills/oil-motion
  3. Cài công cụ nền: Python 3.10+, Node.js và ffmpeg/ffprobe (macOS: brew install ffmpeg; Ubuntu: sudo apt install ffmpeg).
  4. Cài thư viện Python: python3 -m pip install -r ~/.claude/skills/oil-motion/scripts/requirements.txt
  5. Nếu cần sinh ảnh/video bằng AI, thiết lập khoá: node ~/.claude/skills/oil-motion/scripts/credential-ui/src/profile.ts setup default rồi mở link local hiện ra để tự nhập API key. Chỉ xử lý media cục bộ thì bỏ qua bước này.
  6. Khởi động lại Claude Code và yêu cầu ví dụ: "làm hoạt ảnh sản phẩm xoay theo cuộn trang".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT