html-video

# html-video **HTML이 영상으로 변합니다 — 내 노트북에서.** html-video는 프로그래밍 방식의 영상 도구로, 코딩 에이전트(Open Design, Windsurf CLI, Trae CLI, Claude Code, Cursor, Codex, Gemini, Grok, Qwen, OpenCode, Copilot, Aider, Hermes 또는 Anthropic API)가 HTML, CSS 및 데이터를 실제 MP4 파일로 변환할 수 있게 합니다. 영상을 설명하거나 기사 링크 혹은 GitHub 저장소를 붙여넣으면 에이전트가 다중 프레임 애니메이션 영상을 생성하고, 플러그인 가능한 엔진으로 로컬에서 렌더링합니다. Apache-2.0 라이선스를 따르며, 렌더링별 요금이나 벤더 종속성이 없습니다. ## 주요 기능 - **14개 에이전트 백엔드**: Open Design(Vela), Windsurf CLI, Trae CLI, Claude Code, Cursor Agent, Codex CLI, Gemini CLI, Grok Build, Qwen Code, OpenCode, GitHub Copilot CLI, Aider, Hermes 및 Anthropic Messages API를 자동 감지하고 지원합니다. - **21개의 큐레이션된 템플릿**: 데이터 시각화(NYT 스타일 차트, 스위스/Vignelli 그리드), 타이틀 & VFX(글리치, 키네틱 타입, 타자기 커서), 히어로 & 시네마틱(액체 그라디언트, 라이트 리크, 웜 그레인), 제품 프로모션(15초/30초 멀티 씬), 그리고 해설 스캐폴드(결정 트리)를 포함한 라이선스가 명확한 애니메이션 HTML 템플릿들. - **실제 MP4 렌더링**: 헤드리스 Chromium이 애니메이션 HTML을 기록하고, ffmpeg(libx264)이 로컬에서 MP4로 인코딩합니다. 클라우드 렌더링이나 클립당 요금이 없습니다. - **링크 투 비디오**: 웹 기사(WeChat 공식 계정 포함)나 GitHub 저장소를 서버 측에서 가져와 Markdown으로 평탄화하고, 실제 콘텐츠를 생성 프롬프트에 입력합니다. - **AI 사운드트랙**: MiniMax를 통한 선택적 배경 음악 및 나레이션을 내보내기 시 MP4에 믹싱합니다(음성 아래에서 음악 덕킹, 페이드 인/아웃). - **스튜디오 + CLI**: 로컬 브라우저 스튜디오(채팅, 템플릿 갤러리, 프레임, 사운드트랙, 내보내기)와 스크립트 가능한 `html-video` CLI를 제공합니다. - **플러그인 가능한 엔진 아키텍처**: 하나의 `render(input, ctx)` 어댑터 인터페이스; 엔진 교체(예: Remotion, Motion Canvas)는 렌더링 단계만 대체하며 스토리보드와 에이전트 루프는 그대로 둡니다. - **구성상 라이선스 클린**: 템플릿에는 원본 라이선스가 포함되어 있으며, 출처와 SPDX를 기록하는 `NOTICE.md`가 제공됩니다. 불분명한 퍼미티브 라이선스는 배포되지 않습니다. ## 작동 방식 1. **소스 가져오기**: Studio가 URL이나 저장소를 서버 측에서 가져와 Markdown으로 평탄화합니다. 2. **에이전트 루프**: 에이전트가 자료와 템플릿 스타일을 읽고 콘텐츠 그래프(스토리보드)와 각 프레임용 HTML 블록 하나씩을 출력합니다. 3. **콘텐츠 그래프**: 노드(엔티티/데이터/텍스트)와 엣지(순서/전환)를 가진 다중 프레임 IR입니다. 4. **프레임별 HTML**: 각 노드는 디스크상의 독립적인 애니메이션 HTML 프레임이 됩니다. 5. **렌더링**: 각 프레임을 webm으로 만든 후(headless Chromium 사용), ffmpeg이 이를 MP4(libx264)로 인코딩하고 연결합니다. 6. **사운드트랙**: 선택적으로 MiniMax 음악과 나레이션을 ffmpeg을 통해 믹싱합니다. 단일 프레임 영상은 콘텐츠 그래프를 건너뛰는 빠른 경로를 사용합니다. ## 시작하기 Node.js 20 이상과 ffmpeg이 필요합니다. Playwright의 Chromium이 없다면 설치하세요. `pnpm -r build`로 빌드합니다. CLI 유틸리티: - `node packages/cli/dist/bin.js doctor` — 설치된 에이전트 및 엔진 감지 - `node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3` 스튜디오에서는 템플릿을 선택하거나(또는 영상을 설명하거나 링크를 붙여넣고), 에이전트와 채팅하며, 프레임별 텍스트를 편집하고, 사운드트랙을 추가한 뒤 MP4로 내보냅니다. ## 프로젝트 구조 - `runtime/` — 모든 14개 백엔드를 위한 에이전트 런타임(감지/생성/스트리밍) - `cli/` — `html-video` 명령어, 스튜디오 HTTP 서버, 소스 가져오기 - `project-studio/` — 브라우저 스튜디오 UI(채팅, 템플릿 갤러리, 프레임, 사운드트랙, 내보내기) - `templates/` — 21개의 큐레이션되고 라이선스가 명확한 영상 템플릿 ## 관련 프로젝트 - [Open Design](https://github.com/nexu-io/open-design) — 자매 프로젝트, 디자인 에이전트 메타 레이어 - [HTML Anything](https://github.com/nexu-io/html-anything) — 정적 HTML 산출물을 위한 자매 프로젝트 ## 라이선스 Apache-2.0 — 렌더링별 요금 없음, 좌석 제한 없음, 기여자 계약 없음. Open Design 팀(nexu-io)의 공식 프로젝트입니다.