reanimate의 개요
reanimate는 움직임을 복제하는 에이전트 스킬입니다. Claude Code에 라이브 페이지, 화면 녹화, mp4, gif 또는 Lottie 파일을 가리키고 대상 요소와 출력 파일을 지정하면, 스킬은 고정된 뷰포트와 프레임 레이트로 헤드리스 Chromium에서 참조를 녹화하고, 요소와 속성마다 한 줄(시작, 길이, 시작값과 끝값, 이징, 시차)로 된 명세를 작성하며, 프로젝트가 이미 쓰는 도구(CSS, Framer Motion, GSAP 또는 three.js)로 애니메이션을 만든 뒤, 복제본을 같은 방식으로 녹화해 타이밍, 이징, 픽셀을 비교합니다. 보통 2~5회 반복하며, 5회 후에도 맞지 않는 부분은 목록으로 보고합니다.
canvas, WebGL, WebGPU의 경우 픽셀을 읽는 대신 GPU 호출을 추적합니다. 셰이더 소스, uniform, 렌더 패스, 텍스처, 그리고 three.js, Pixi, PlayCanvas, Babylon 또는 OGL 씬 그래프를 Math.random에 시드를 준 가상 시계 위에서 기록하므로 두 번의 캡처 결과가 똑같이 나옵니다. 기본 충실도는 움직임만(타이밍 80 ms 이내, 같은 이징 계열과 순서)이며, 픽셀 단위 일치를 요청하면 글꼴, 색상, 간격, 그리고 평균 픽셀 차이 2 % 이하가 추가됩니다.
저장소는 Niaz Morshed가 만들었고 MIT 라이선스이며, 2026년 10월 29일에 생성되어 10월 31일에 마지막으로 변경되었습니다. 스타는 약 1,570개, 포크는 137개, 기여자는 1명이고 태그된 릴리스는 없으며, 사이트에는 Vercel, Stripe, Clerk, Resend 등에서 복제한 예제 14개가 각각 원본과 비교한 측정값과 함께 올라 있습니다.
reanimate, 쓸 만한 가치가 있습니까?
reanimate의 기여는 프롬프트가 아니라 피드백 루프입니다. 링크를 보고 애니메이션을 다시 만들라는 요청을 받은 에이전트는 타이밍을 볼 방법이 없으니 한 번 만들고 끝났다고 선언합니다. 이 스킬은 에이전트에게 눈을 줍니다. 프레임, 선언된 CSS 및 Web Animations 키프레임, 계산된 스타일, 프레임별 요소 위치를 기록하는 캡처 스크립트와, 참조와 복제본 모두에 대해 타이밍 오차, 픽셀 차이, 차이 시트를 보고하는 비교 스크립트입니다. SKILL.md는 Claude에게 모든 콘택트 시트를 읽고 "그럴듯해 보인다"에서 멈추지 말고 고정된 합격 기준에 맞춰 계속 반복하라고 지시합니다. 원본이 자체 키프레임을 선언한 경우, 스킬은 추정하지 않고 거기서 정확한 길이와 이징을 가져옵니다.
공개된 근거는 이례적으로 구체적입니다. Vercel 툴바 복제본은 417개 프레임 중 417개가 일치하고, Resend 히어로의 큐브 회전은 25 s 동안 정확하며 픽셀 차이는 0.11 %입니다. Stripe의 기울어지는 카드는 0.4 px 이내로 안착하고, WebGL 기울기 곡선은 33 ms 이내로 일치합니다. 이는 작성자 본인이 예제 14개로 실행한 결과로, 대부분 30~90분이 걸렸고 독립적인 벤치마크는 아닙니다. 그래도 방법은 재현 가능하며, 매 회차의 산출물이 증거로 프로젝트의 .reanimate/에 남습니다.
주변의 모션 스킬보다 범위가 좁고 더 엄격한 도구입니다. motionmaxxing과 bang-motion은 에이전트가 좋은 감각으로 새로운 움직임을 설계하도록 돕습니다. reanimate는 기존 움직임을 복제할 뿐이며, 복제본이 얼마나 가까운지 보여 줄 수 있 다는 점이 가치입니다.
주의할 점: 나온 지 2주밖에 안 되었고, 기여자는 1명, 릴리스는 없으며, 용도 자체가 문제를 부르기 쉽습니다. 캡처한다는 것은 임의의 제3자 페이지를 로컬 헤드리스 브라우저에서 실행한다는 뜻이며, 2026년 11월 10일에 열린 이슈는 페이지가 트레이스 파일 이름에 ../를 넣어 캡처 폴더 밖에 파일을 쓸 수 있음을 보여 줍니다. 제안된 패치는 아직 병합되지 않았습니다. 로그인이 필요한 페이지, YouTube, Loom은 직접 캡처할 수 없고, Windows는 테스트되지 않았으며, 첫 실행에서 약 250 MB를 내려받고, 기본 소프트웨어 GPU는 느립니다. README는 다른 사이트에서 복사한 글꼴, 이미지, 코드가 여전히 원래 소유자의 것이라는 점도 상기시킵니다.
결론: reanimate는 새 히어로를 참조와 똑같은 느낌으로 만들라는 요청을 받은 프런트엔드 개발자에게는 맞는 도구이고, 움직임을 처음부터 설계하는 데는 맞지 않는 도구입니다. 신뢰할 수 있는 사이트에만 실행하고, 스킬이 작성한 diff를 검토하며, 애니메이션 하나에 에이전트 시간 1시간을 잡아 두십시오.
제 역할을 하는 곳
마케팅 사이트를 새로 디자인하는 스타트업의 프런트엔드 개발자
디자인 참조의 카드 호버를 우리 Framer Motion 컴포넌트로 다시 만들기
참조 URL과 대상 파일을 지정해 /reanimate를 실행합니다. 스킬은 선언된 키프레임을 읽고 Framer Motion으로 움직임을 작성하며, 타이밍이 80 ms 이내가 되면 멈춥니다. 캡처는 2~5회를 예상하십시오.
재사용 허가를 받은 WebGL 히어로를 이식하는 크리에이티브 개발자
three.js 씬의 셰이더, uniform, 타이밍 복원하기
--clock virtual --gl --assets로 캡처해 셰이더 소스, 상수 uniform, 애니메이션 채널을 추출한 뒤, gl.ts compare로 복제본을 채널별로 비교합니다.
모션 디자이너의 화면 녹화를 코드로 옮기는 디자인 시스템 엔지니어
mp4에 있는 2초짜리 로더를 프레임 단위로 맞추기
파일과 시간 범위를 넘기면 frames.ts가 프레임을 추출하고 잘라 내며, 스킬은 CSS로 로더를 만들고 차이가 목표 아래로 내려갈 때까지 복제본 녹화를 동영상과 비교합니다.
도입 전 확인할 점
- 설정
- npx skills add NiazMorshed2007/reanimate -g(-a claude-code를 붙이면 에이전트 선택 질문을 건너뜀)를 실행한 뒤 /reanimate <대상> from <위치>, into <파일>로 지시합니다. macOS 또는 Linux에서 Bun 1.1 이상이 필요하며, 첫 실행 시 정적 ffmpeg와 Playwright의 Chromium, 합쳐 약 250 MB가 설치됩니다.
- 연동
- Claude Code용으로 만들어지고 테스트되었습니다. SKILL.md를 읽는 다른 에이전트도 불러올 수 있으나 검증되지 않았습니다. 캡처, 프레임, 비교, 이징 피팅, 콘택트 시트, GPU 트레이스용 Bun 스크립트가 있으며 three.js, Pixi, PlayCanvas, Babylon, OGL에 연결됩니다.
- 데이터와 개인정보
- 로컬에서 실행되며 API 키가 필요 없고 텔레메트리에 대한 설명도 없습니다. 캡처, 프레임, 차이 시트는 프로젝트의 .reanimate/<name>/에 저장됩니다. 제3자 페이지를 헤드리스 Chromium에서 불러오며, 열린 이슈는 페이지가 제어하는 트레이스 id로 캡처 폴더 밖에 파일이 쓰일 수 있다고 보고합니다. MIT. 복사한 글꼴, 이미지, 코드의 권리는 소유자에게 있습니다.
- 대규모 사용 시 비용
- 무료입니다. 실제 비용은 에이전트 시간입니다. 작성자의 예제는 대부분 Claude Code에서 하나당 30~90분이 걸렸으므로, 정기적으로 쓰려면 넉넉한 Claude 요금제나 API 예산이 필요합니다. 하드웨어 GPU 모드는 기본값인 SwiftShader보다 빠릅니다.
- 제한
- 화면 녹화 없이는 로그인 페이지, YouTube, Loom을 다룰 수 없습니다. 스프링은 소스에서 읽지 않고 피팅으로 구합니다. 워커의 시계는 실시간으로 흐릅니다. iframe 안의 canvas는 iframe URL이 필요합니다. Windows 수정 사항은 열린 풀 리퀘스트에 있습니다.
좋은 점
- 추측하지 않고 매 회차 복제본을 원본과 비교해 측정
- 페이지가 선언한 경우 정확한 키프레임과 이징을 읽음
- 결정적 가상 시계로 WebGL, WebGPU, three.js 씬을 추적
- 프로젝트의 기존 스택(CSS, Framer Motion, GSAP, three.js)으로 구현
- API 키 불필요, MIT 라이선스
아쉬운 점
- 기여자 1명, 릴리스 없음, 나온 지 2주
- 신뢰할 수 없는 페이지 캡처 시 경로 탐색 이슈가 열려 있음
- 로그인 페이지, YouTube, Loom은 직접 캡처 불가
- Windows 미검증, 첫 실행 시 약 250 MB 다운로드
- 30~90분의 긴 실행으로 에이전트 토큰 소모
추천 대상
특정 호버, 등장 효과 또는 WebGL 효과를 정밀하게 재현해야 하고 복제본이 얼마나 가까운지 증거도 원하는, Claude Code를 쓰는 프런트엔드 개발자.
reanimate 대안
reanimate: 자주 묻는 질문
- reanimate, 쓸 만한 가치가 있습니까?
- reanimate는 에이전트가 애니메이션 복제에 실패하는 진짜 이유(움직임을 보지 못한다는 점)를, 수치가 맞을 때까지 에이전트가 복제본을 원본과 비교해 측정하게 함으로써 해결합니다. 평점은 5점 만점에 3.8점입니다.
- reanimate의 가격은 얼마입니까?
- 무료(MIT)입니다. API 키는 필요 없으며, 비용은 흔히 30~90분 걸리는 실행 동안의 Claude Code 사용량입니다.
- reanimate의 단점은 무엇입니까?
- 기여자 1명, 릴리스 없음, 나온 지 2주; 신뢰할 수 없는 페이지 캡처 시 경로 탐색 이슈가 열려 있음; 로그인 페이지, YouTube, Loom은 직접 캡처 불가; Windows 미검증, 첫 실행 시 약 250 MB 다운로드; 30~90분의 긴 실행으로 에이전트 토큰 소모.
- reanimate에 적합한 사람은 누구입니까?
- 특정 호버, 등장 효과 또는 WebGL 효과를 정밀하게 재현해야 하고 복제본이 얼마나 가까운지 증거도 원하는, Claude Code를 쓰는 프런트엔드 개발자.
- 팀이나 프로덕션 환경에서 reanimate의 비용은 얼마입니까?
- 무료입니다. 실제 비용은 에이전트 시간입니다. 작성자의 예제는 대부분 Claude Code에서 하나당 30~90분이 걸렸으므로, 정기적으로 쓰려면 넉넉한 Claude 요금제나 API 예산 이 필요합니다. 하드웨어 GPU 모드는 기본값인 SwiftShader보다 빠릅니다.
- reanimate에 회사 데이터를 맡겨도 안전합니까?
- 로컬에서 실행되며 API 키가 필요 없고 텔레메트리에 대한 설명도 없습니다. 캡처, 프레임, 차이 시트는 프로젝트의 .reanimate/<name>/에 저장됩니다. 제3자 페이지를 헤드리스 Chromium에서 불러오며, 열린 이슈는 페이지가 제어하는 트레이스 id로 캡처 폴더 밖에 파일이 쓰일 수 있다고 보고합니다. MIT. 복사한 글꼴, 이미지, 코드의 권리는 소유자에게 있습니다.
- reanimate의 가장 좋은 대안은 무엇입니까?
- 저희가 리뷰한 것 중 가장 가까운 대안은 motionmaxxing, Bang Motion 및 Playwright Test Agents입니다.
답변 확인일: 2026년 11월 11일.