애니메이션 역설계 → 프로덕션 이식

무엇을 해주나

• 트위터(X), Dribbble, 화면 녹화, GIF 등 모션 레퍼런스를 프레임 단위로 분해해 눈대중이 아닌 측정값으로 분석합니다.
• yt-dlp로 영상을 받고 ffprobe로 fps·해상도를 확인한 뒤, ffmpeg로 컨택트 시트(2fps 타일)와 크롭 밴드 프레임 스택을 만들어 전환 구간을 정확히 찾습니다.
• 타임라인형(등장, 텍스트 스윕, 스태거)과 인터랙션형(스크러버, 슬라이더, 드래그)을 구분해 각각 전용 분석 체크리스트(속성 변화, 스태거 순서, 이징, 비대칭 타이밍, 진행도 매핑 등)를 적용합니다.
• 필요 시 의존성 없는 단일 HTML '모션 랩'으로 타이밍을 먼저 확정하고, React/TypeScript + framer-motion 코드로 이식합니다.
• 마지막에 Playwright 등으로 구현 결과를 스크린샷해 3단계 프레임 스택과 대조 검증하고, 튜닝 상수·ffmpeg 명령까지 문서화합니다.
• 레퍼런스가 없다면 60fps.design, Mobbin, Dribbble, Awwwards 등 탐색처와 추천 X 계정을 먼저 안내합니다.

이런 분께 추천

• 디자이너가 준 영상이나 마음에 든 앱 모션을 똑같은 느낌으로 구현해야 하는 프론트엔드 개발자
• framer-motion / CSS 애니메이션의 이징·스태거를 감으로 맞추다 지친 분
• 인터랙션(드래그·스크롤) 기반 모션의 진행도 아키텍처를 정리하고 싶은 분
• 모션 레퍼런스를 수집·연구하는 습관을 만들고 싶은 UI 엔지니어

활용 예시

1. "이 트윗 영상의 텍스트 스윕 애니메이션 구현해줘" → 영상 다운로드 → 컨택트 시트 → 크롭 스택으로 역순 인덱스 스태거와 블러 페더 측정 → framer-motion 컴포넌트 산출.
2. "날씨 앱 타임랩스 슬라이더처럼 만들어줘" → 인터랙션형으로 분류 → 0~1 진행도 도메인, 시간대별 크로스페이드, 낮/밤 테마 전환 시점을 분석해 MotionValue 하나로 구동하는 구조 설계.
3. "좋은 마이크로 인터랙션 레퍼런스 어디서 찾지?" → 큐레이션 사이트·X 계정 목록 제시 후, 가져온 링크를 그대로 역설계.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/sendaifun/skills/HEAD/skills/animation-reverse-engineering/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 sendaifun/skills 의 skills/animation-reverse-engineering 폴더를 내 ~/.claude/skills/animation-reverse-engineering/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.