Claude Design / Artifacts를 위한 4K/60 MP4 변환 도구 (오픈 소스, MIT, Claude Code로 제작)

안녕하세요 여러분 — 오늘 아침에 오픈 소스로 공개한 작은 도구를 공유합니다.

문제점: 저는 Claude Design / Claude Artifacts(React 기반의 <Stage> 타임라인 방식) 내부에서 애니메이션 비디오를 계속 만들고 있었는데, 이를 실제 비디오 파일로 내보내야 할 때마다 매번 화면 녹화를 해야 했습니다. 프레임 드랍(Dropped frames), 떨리는 커서, 잘못된 해상도, 깔끔하지 않은 오디오 믹싱(audio mux) 문제 등이 발생했습니다. 그래서 이 빠진 조각을 직접 만들었습니다.

기능
Stage 기반의 Claude 디자인 프로젝트 폴더를 넣으면 됩니다 (드래그 앤 드롭 웹 UI 또는 CLI 지원). 도구가 헤드리스 크로미움(headless Chromium)을 실행하고, <Stage> 타임라인을 2배 슈퍼샘플링된 4K로 프레임 단위로 탐색(scrub)하며, 모든 데이터를 번들링된 ffmpeg를 통해 60fps의 H.264 MP4로 파이프라인 처리합니다. 모든 프레임은 타임라인의 결정론적 탐색(deterministic seek) 방식(실시간 캡처가 아님)이기 때문에 프레임 드랍이 전혀 없으며, 동일한 입력은 항상 동일한 결과 바이트를 생성합니다.

주요 특징

• 기본 4K/60 지원, 1080p/30도 지원
• localhost:4747에서 사용 가능한 드래그 앤 드롭 UI 및 스크립팅을 위한 CLI 제공
• 배치 모드(Batch mode) — 상위 폴더를 넣으면 프로젝트당 하나의 MP4 생성
• 프로젝트 폴더 내의 voiceover.mp3 / narration.wav / *mix* 오디오를 자동 감지하여 인코딩 중에 믹싱(muxes) (별도의 비디오 패스 불필요). ElevenLabs, OpenAI TTS, Murf, Logic Pro 등 .mp3/.wav/.m4a/.aac/.ogg/.flac을 출력하는 모든 소스와 호환됩니다.
• 서비스 시점에 프로젝트의 animations.jsx를 내보내기 준비가 된 Stage로 자동 업그레이드하므로, 기존 Claude 애니메이션 프로젝트를 수정할 필요가 없습니다.

Claude가 어떻게 도움을 주었나
엔진 자체는 몇 차례의 집중적인 세션을 통해 Claude Code로 구축되었습니다. 가장 까다로운 부분은 결정론적 프레임 탐색 루프(모든 탐색 사이에 두 개의 애니메이션 프레임을 기다려 React 커밋이 캡처 전에 완료되도록 하는 작업)와 제자리(in-place) animations.jsx 자동 업그레이드였습니다. Claude Code는 60fps에서 누락이 없을 때까지 저와 함께 Playwright 루프를 반복하며 개선하는 데 강력한 성능을 보여주었습니다.

패키징 작업 — README, LICENSE, CONTRIBUTING, SECURITY 정책, 브랜치 보호 설정, npm 메타데이터 등 — 은 오늘 아침 공개하기 전 단 한 번의 Claude 세션으로 완료되었습니다.

무료, MIT 라이선스, 가입 불필요:
https://github.com/dawoodtrumboo/claude-video-export
README에는 Claude Design을 위한 바로 복사하여 사용할 수 있는(paste-ready) 두 가지 프롬프트가 포함되어 있습니다. 하나는 내보내기(exporter)와 호환 가능한 형태로 새로운 애니메이션을 시작하기 위한 것이고, 다른 하나는 기존 애니메이션 프로젝트를 개조(retrofitting)하기 위한 것입니다. PR(Pull Request)을 환영하며, 렌더링 파이프라인(rendering pipeline)에 대한 질문도 언제든 환영합니다.
제출자: /u/thedm4x
[link] [comments]