Tôi vừa thử một repo khá lạ trên GitHub. Tên nó là rossark0/rossark-motion-skill, viết bằng Swift, mô tả nghe hơi to tát: “Turn any SVG into a professional 60 fps animation”. Đọc kỹ hơn thì nó không phải thư viện animation thông thường. Đây là một skill dành cho Claude Code, tức là tập chỉ dẫn cho AI agent cách làm chuyển động sao cho giống người thật vẽ.
Nó giải quyết đúng cái gì
Vấn đề gốc nằm ở chỗ: agent không animate như animator. README tự liệt kê lỗi rất thật. Bảo agent làm một nhân vật sống dậy, nó thường hoán đổi bản vẽ này sang bản vẽ khác, mặt “teleport” từ biểu cảm này sang biểu cảm kia. Mỗi tư thế lại có một tween riêng, nên cơ thể dừng khựng ở từng pose. Mọi thứ chạy đồng bộ như máy. Blink ngắn đến mức nháy giật. Và có những đường mảnh hiện lên đúng chỗ hai shape giao nhau.
Kết quả là slideshow chứ không phải thứ gì đó sống. Repo này là danh sách các lỗi đó kèm cách sửa: một clock duy nhất cho cả scene, các bộ phận xoay quanh pivot thật của nó, phần đuôi bám theo trễ một nhịp, chuyển động idle không bao giờ dừng, đường đi mượt qua các key pose, biên độ nhỏ với đường cong mạnh. Nghe đơn giản nhưng đây đúng là mấy thứ mà agent sinh ra thường bỏ qua.
Vì sao nó đáng để thử
Repo đang có 469 sao, tạo ngày 2026-10-22 và cập nhật cũng đúng ngày đó. Mới toanh. Con số 469 sao trong vòng một ngày nói lên nhu cầu thật của cộng đồng dev đang làm việc với AI agent và motion.
Điểm khác biệt là cách tiếp cận. Nhiều tool animation lo phần render hoặc lo easing curve. Repo này lo phần “dạy agent có gu”. Nó ghi rõ khi có reference video thì đo chuyển động theo từng frame trước khi dựng, vì cái làm reference sống thường nhỏ đến mức mắt không thấy. Có cả script track_edges.py để bắt mấy dao động 2%, và sample_colors.py đọc màu chính xác từ frame video.
Về motion trong interface, nó dẫn nguồn rõ ràng: theo luật của Emil Kowalski và Family values của Benji Taylor. Không phải tự phịa ra nguyên tắc.
Cài đặt và chạy thử
Cài bằng skills CLI, giữ nguyên lệnh trong README:
npx skills@latest add rossark0/rossark-motion-skill
Muốn render lại mấy demo trên macOS 14+ thì cần Swift compiler và ffmpeg. Lệnh build khá dài nhưng cứ copy nguyên:
swiftc -parse-as-library -target arm64-apple-macos14 \
templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo
/tmp/render-demo reveal /tmp/frames phone fps=60 # or: garden, chef, orbit
ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4
Bốn demo có sẵn: reveal (9 giây, nhân vật nhảy nhót và đá bóng trong phone frame), garden (10 giây, cô bé tưới cây và con bướm đậu), chef (9,6 giây, lật bánh pancake rồi bánh rơi lên mũ), và orbit (vòng card xoay quanh con chim). Tất cả đều 60 fps.
Cấu trúc file cần biết: SKILL.md là phần chỉ dẫn chính, MOTION.md là ghi chú cho project của bạn (copy kế bên art rồi điền vào), còn motion.ts và Motion.swift là engine cho React Native và SwiftUI.
Ai nên dùng
Nếu bạn đang làm app mobile và có illustration cần animate, đây là thứ đáng thử. Engine có sẵn cho cả React Native và SwiftUI, đúng hai framework mà phần lớn dev mobile Việt đang dùng.
Designer làm việc với AI agent cũng là đối tượng. Thay vì ngồi gõ prompt “làm cho nó sống động hơn” rồi nhận về slideshow, bạn đưa skill này cho agent và nó có checklist cụ thể để bám vào.
Trường hợp dùng thực tế tôi hình dung: app thiền cần icon thở đều, app tài chính cần chart có chuyển động mềm, game casual cần nhân vật idle, landing page cần logo tự vẽ ra. Có cả liveFace.tsx và LiveFace.swift cho mắt và miệng biết liếc, chớp, cười. Bạn đưa geometry và màu, nó lo phần chuyển động.
Vài điểm cần cân nhắc
Không phải cứ kéo thả là xong. Bạn vẫn cần hiểu cấu trúc art của mình: cái nào là pivot, cái nào là phần trailing. File MOTION.md tồn tại chính vì lý do đó, phải điền tay.
License MIT, thoải mái dùng thương mại. Nhưng repo mới một ngày tuổi, chưa ai kiểm chứng qua thời gian. Tài liệu trong README khá chi tiết và có demo chạy được, đó là điểm cộng. Mấy script Python phụ trợ (track_edges.py, sample_colors.py) cần cài Python, thêm một bước.
Tôi hơi nghi phần “any SVG” trong mô tả. README nói về template và method, không nói có converter SVG tự động nào. Bạn vẫn phải có sẵn geometry dưới dạng code để đưa vào engine. Nên đọc mô tả với sự thận trọng nhất định.
Nếu bạn đã quen với Framer Motion hay Reanimated thì đây không thay thế chúng. Nó là lớp nằm trên, dạy agent dùng mấy thứ đó cho đúng. Khác biệt ở chỗ Framer Motion cho bạn API, còn repo này cho bạn cách nghĩ về timing và weight.
Thử clone về, chạy lệnh render demo reveal xem nó ra cái gì trước khi quyết định gắn vào workflow. 469 sao và một bộ demo 60 fps là tín hiệu đủ tốt để bỏ 15 phút ra xem.
