Có một cảnh khá quen: bạn gửi cho agent một link web và bảo “làm lại cái animation này cho tôi”. Nó viết xong một lượt, bảo xong rồi, mở lên xem thì thiếu hẳn cái độ nảy, con trỏ rê vào không giống, thời điểm chạy sai. Agent không thấy được chuyển động nên cũng không biết mình sai bao nhiêu.
NiazMorshed2007/reanimate là một skill cho Claude Code, làm đúng việc mà agent đang thiếu: quay lại cái gốc, dựng bản copy trong code của bạn, quay bản copy theo cùng một cách, rồi so hai bên với nhau. Mỗi vòng lặp chỉ ra cái gì còn lệch, agent sửa, quay lại. Lặp đến khi số liệu khớp.
Nó làm gì, cụ thể
Đầu vào có thể là một site đang chạy, một file quay màn hình, mp4, gif, hoặc file Lottie. Skill chạy 5 bước theo README:
- Record. Quay bản gốc trong headless browser với viewport và frame rate cố định: video, các frame được đánh số, mọi animation CSS và Web Animations API tìm được, vị trí của các element được chọn trên từng frame. Với canvas và WebGL thì nó trace luôn các lệnh gọi GPU (shader, uniform, draw call, scene three.js) trên một virtual clock để mỗi lần capture giống hệt nhau.
- Spec. Mỗi dòng là một element với một property: start, duration, from → to, easing, stagger. Dòng nào còn dấu “?” nghĩa là chưa đọc ra được từ frame.
- Build. Viết animation bằng thứ project bạn đang dùng: CSS, Framer Motion, GSAP, three.js.
- Verify. Quay bản copy y như cách đã quay bản gốc, so timing, easing và pixel, xuất ra ảnh đặt cạnh nhau.
- Repeat. Sửa chỗ lệch lớn nhất rồi quay lại, thường 2 đến 5 vòng. Cái gì sau 5 vòng vẫn chưa khớp thì ghi vào report kèm lý do.
Mặc định nó khớp phần chuyển động, còn phần nhìn thì để bạn tự lo. Muốn chặt hơn thì nói rõ: “clone this animation” là mức mặc định (trigger, thứ tự, stagger, timing trong 80 ms, họ easing, khoảng cách); “match it exactly” hoặc “pixel-perfect” thì khớp thêm font, size, màu, spacing, asset, sai lệch pixel trung bình ≤ 2%; “clone X and add Y” thì phần clone giữ ở một trong hai mức trên, phần bạn thêm tách riêng.
Vì sao đang được chú ý
Repo mới tạo ngày 29/10/2026, cập nhật 31/10/2026, đã 669 sao. Hai ngày. Con số đó nói lên nhu cầu: dev frontend có rất nhiều animation đẹp muốn “học theo”, nhưng đọc keyframe với easing từ một site đã build thì mất thời gian, còn nhờ agent làm một phát thì ra kết quả hời hợt.
Điểm khác biệt nằm ở chỗ nó không dừng ở “viết code trông giống”. Nó đo. Trong bảng ví dụ của README có mấy dòng đáng để ý: clone Fluid ocean trên vercel.com/fluid (WebGPU, Web Workers) lệch 0 px trong 12 giây ở cả light lẫn dark; Speedometer của turborepo.com lệch 0 px khi hover; Vercel Toolbar khớp 417/417 frame; Drop to deploy lệch 785/803 frame byte-identical, phần còn lại trong 1 level. Đây là số do tác giả công bố, chưa có bên thứ ba kiểm chứng, nhưng cách đo thì rõ ràng và lặp lại được.
Cài và thử
Cần Bun 1.1 trở lên, trên macOS hoặc Linux. Windows chưa được test.
npx skills add NiazMorshed2007/reanimate -gCLI sẽ hỏi bạn muốn set up cho agent nào; thêm -a claude-code để bỏ qua câu hỏi. Sau đó trong Claude Code, nói bạn muốn gì, ở đâu, và đặt vào đâu:
/reanimate the hero entrance on https://example.com, into components/Hero.tsx
/reanimate this loader, 0:03 to 0:05 of ~/Downloads/loader.mov
/reanimate the card hover in this gif, match it exactly
/reanimate the logo marquee from https://example.com, with our logos and pause on hoverLần chạy đầu nó tải một bản ffmpeg static vào thư mục của skill và Chromium của Playwright vào cache quen thuộc, tổng khoảng 250 MB. Không cần API key. Agent khác đọc được SKILL.md cũng cài được, nhưng README ghi rõ mới test với Claude Code.
Dùng thật thì hợp với ai
Dev frontend cần bám một interaction cụ thể từ site tham chiếu: hover state của card, hiệu ứng load, marquee logo, hero entrance. Người làm landing page muốn có điểm khởi đầu gần đúng thay vì ngồi đoán cubic-bezier bằng mắt. Team đang port một component animation từ site cũ sang codebase mới và cần biết mình lệch bao nhiêu ms, bao nhiêu pixel.
Nó không thay được gu thẩm mỹ. README nói thẳng: mặc định khớp chuyển động, phần nhìn để bạn. Nếu bạn cần một cái animation “na ná” để tự chỉnh tiếp thì đây là công cụ đúng chỗ; nếu bạn cần một cái design system animation tự viết từ đầu thì nó hơi thừa.
Cũng đừng quên khía cạnh bản quyền. Skill này reverse-engineer animation của người khác, còn việc bạn dùng bản copy đó thế nào là chuyện của bạn. Tác giả không nhắc gì trong README, nhưng copy nguyên một hero animation của Stripe hay Vercel lên production là chuyện khác với việc học cách họ làm easing.
So với lựa chọn khác
Hướng tiếp cận gần nhất mà tôi biết là các tool đọc computed style và animation từ DevTools, hoặc mấy extension xuất keyframe CSS. Chúng cho bạn số liệu, bạn tự dựng. reanimate đẩy thêm một bước: dựng, quay, so, sửa, và lặp tự động trong agent. Còn so với việc thuê người làm hay tự mò thì tùy độ phức tạp: một cái card hover 200 ms thì tự làm nhanh hơn, một cái WebGL scene với shader thì để nó trace GPU calls có lý hơn.
Ưu, nhược, và mấy điều cần biết
Được: cách làm có vòng đo khách quan, không phải “agent bảo xong là xong”. Hỗ trợ nhiều nguồn vào (site, video, gif, Lottie), nhiều thư viện ra (CSS, Framer Motion, GSAP, three.js). Không cần API key. MIT license, dùng thoải mái.
Chưa được: mới hai ngày tuổi, API và hành vi còn có thể đổi. Chỉ test trên macOS và Linux, Windows chưa đụng tới. Lần chạy đầu tải 250 MB, không nhẹ nếu bạn sống trong môi trường mạng chậm. Chỉ test với Claude Code. Và cái bảng ví dụ trong README toàn site lớn (vercel, stripe, clerk, resend, liveblocks), chưa thấy ai chạy trên một app nội bộ lộn xộn với animation viết tay bằng jQuery.
Cần lưu ý: con số “0 px differ” là do tác giả đo trên máy tác giả, với cùng một pipeline. Đừng đọc thành bảo đảm cho mọi trường hợp. Cứ coi nó là mức trần của phương pháp, không phải mức sàn của kết quả bạn sẽ nhận.
Kết
669 sao sau hai ngày là tín hiệu đủ rõ để thử. Nhưng thứ làm tôi để ý hơn cả con số đó là câu trong README: “Each round shows what’s still off, so the agent keeps going until the numbers match.” Đây là lần đầu tôi thấy một skill agent tự đặt ra tiêu chí đo được rồi tự kiểm tra mình có đạt không, thay vì tin vào lời tự báo cáo của chính nó. Nếu bạn đang cần dựng lại một animation cụ thể từ web, cài thử rồi chạy một case nhỏ trước, xem report của nó ghi gì. Repo ở đây: NiazMorshed2007/reanimate.
Câu hỏi thường gặp
reanimate cài thế nào và cần gì để chạy?
Bạn chạy npx skills add NiazMorshed2007/reanimate -g, thêm -a claude-code nếu muốn bỏ qua câu hỏi chọn agent. Máy cần Bun 1.1 trở lên trên macOS hoặc Linux, Windows chưa được test. Lần chạy đầu nó tải khoảng 250 MB gồm ffmpeg static và Chromium của Playwright, và không cần API key.
reanimate có khớp pixel-perfect hay chỉ giống chuyển động?
Mặc định nó chỉ khớp phần chuyển động: trigger, thứ tự, stagger, timing trong 80 ms, họ easing và khoảng cách, còn phần nhìn thì để bạn tự lo. Nếu muốn chặt hơn, bạn nói “match it exactly” hoặc “pixel-perfect” thì nó khớp thêm font, size, màu, spacing, asset với sai lệch pixel trung bình ≤ 2%.
reanimate lặp bao nhiêu vòng và xử lý trường hợp chưa khớp ra sao?
Nó thường lặp 2 đến 5 vòng, mỗi vòng sửa chỗ lệch lớn nhất rồi quay lại so sánh. Cái gì sau 5 vòng vẫn chưa khớp thì được ghi vào report kèm lý do, thay vì agent tự báo là xong.
