siyuanfeng636-cpu/agentic-motion-graphics

어떤 프로젝트인가요?

핵심 기능

• 01생성형 영상 대신 HTML, CSS, SVG와 GSAP 타임라인으로 각 프레임을 구성합니다.
• 02whisper.cpp 또는 faster-whisper로 내레이션을 단어 단위 타임스탬프에 맞춥니다.
• 03OpenAI TTS 또는 ElevenLabs로 보이스오버를 생성하고 ffmpeg로 무음을 다듬습니다.
• 04Python으로 120 BPM 배경 음악과 UI 효과음을 합성합니다.
• 05HyperFrames CLI를 통해 lint, 스냅샷, headless 렌더링 단계를 실행합니다.
• 06Claude Code가 자동으로 찾을 수 있는 스킬 디렉터리 형태로 패키징되어 있습니다.

활용 사례

• 웹사이트나 변경 로그를 바탕으로 제품 출시 또는 기능 발표 영상을 제작합니다.
• 긴 기술 문서나 논문을 내레이션이 포함된 애니메이션 설명 영상으로 만듭니다.
• 긴 영상을 단어별 자막이 포함된 세로형 클립으로 변환합니다.
• 발표용 정적 HTML 또는 Markdown 슬라이드에 애니메이션을 적용합니다.

빠른 시작

1. 1

   FFmpeg와 Node.js 22 이상을 설치합니다(Homebrew를 사용하는 macOS 예시).

   brew install ffmpeg node
2. 2

   TTS 스크립트로 음성 해설 오디오를 생성합니다.

   python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3
3. 3

   templates/boilerplate에서 HyperFrames를 사용해 프로젝트를 MP4로 렌더링합니다.

   npx hyperframes render --output dist/output.mp4 --fps 30

사용 전 알아둘 점

• !README의 설정 예시는 macOS(Homebrew)에 중점을 두고 있어, 다른 플랫폼에서는 별도로 설정해야 합니다.
• !TTS 단계에는 OpenAI 또는 ElevenLabs API 키가 필요하며, 둘 다 유료 서비스입니다.
• !이 파이프라인에는 Node.js 22 이상, FFmpeg, Whisper, Python 오디오 도구 등 여러 종속성이 필요합니다.

토픽

자주 묻는 질문

agentic-motion-graphics은(는) 무엇인가요?

HTML, GSAP 애니메이션, TTS 내레이션, Whisper 단어 단위 타이밍으로 모션 그래픽 영상을 만드는 Claude Code 스킬 및 Python 파이프라인입니다. Agentic Motion Graphics는 생성형 영상이 아닌 코드로 영상을 만드는 Claude Code 및 유사 AI 에이전트용 스킬입니다. 에이전트가 장면 스크립트를 작성하고 HTML, CSS, SVG와 GSAP 타임라인으로 각 프레임을 구성한 뒤, headless Chromium에서 HyperFrames CLI를 사용해 MP4로 렌더링합니다.

agentic-motion-graphics은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

agentic-motion-graphics은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

agentic-motion-graphics은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. agentic-motion-graphics의 마지막 커밋은 2026년 9월 25일입니다.

agentic-motion-graphics은(는) 어디에 사용할 수 있나요?

웹사이트나 변경 로그를 바탕으로 제품 출시 또는 기능 발표 영상을 제작합니다. 긴 기술 문서나 논문을 내레이션이 포함된 애니메이션 설명 영상으로 만듭니다. 긴 영상을 단어별 자막이 포함된 세로형 클립으로 변환합니다. 발표용 정적 HTML 또는 Markdown 슬라이드에 애니메이션을 적용합니다.

agentic-motion-graphics는 어떻게 설치하나요?

FFmpeg와 Node.js 22 이상을 설치합니다(Homebrew를 사용하는 macOS 예시).: brew install ffmpeg node TTS 스크립트로 음성 해설 오디오를 생성합니다.: python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3 templates/boilerplate에서 HyperFrames를 사용해 프로젝트를 MP4로 렌더링합니다.: npx hyperframes render --output dist/output.mp4 --fps 30

agentic-motion-graphics은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/siyuanfeng636-cpu/agentic-motion-graphics