- Remotion과 비슷하게 HTML + CSS + GSAP만으로 영상을 제작하고 MP4로 렌더링
- React나 독자적 DSL 없이 순수 HTML 파일이 곧 비디오 컴포지션이며, 빌드 단계 없이 index.html이 그대로 재생됨
- Claude Code, Codex 등의 AI 코딩 에이전트가 HTML을 직접 작성하는 워크플로우에 최적화
- npx skills add heygen-com/hyperframes로 에이전트에 프레임워크 패턴 학습 가능
- Claude Code에서는 /hyperframes, /hyperframes-cli, /gsap 슬래시 명령으로 직접 호출 가능
- OpenAI Codex 플러그인, Cursor 플러그인 도 별도 제공
- 사용 방식
- 원하는 걸 설명: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
- 기존 콘텐츠를 비디오로:
- "Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes."
- "Summarize the attached PDF into a 45-second pitch video using /hyperframes."
- "Turn this CSV into an animated bar chart race using /hyperframes."
- 특정 포맷: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
- 반복 - 에이전트를 비디오 에디터 처럼:
- "Make the title 2x bigger, swap to dark mode, and add a fade-out at the end."
- "Add a lower third at 0:03 with my name and title."
- 수동 시작 방법
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser (live reload)
npx hyperframes render # render to MP4
- hyperframes init 이 스킬을 자동 설치하므로, 그 다음엔 아무때나 사용 가능
- Frame Adapter 패턴으로 GSAP, Lottie, CSS, Three.js 등 원하는 애니메이션 런타임을 자유롭게 연결
- 동일 입력 = 동일 출력을 보장하는 결정적(Deterministic) 렌더링으로 자동화 파이프라인에 적합
- 50개 이상의 사전 제작 블록·컴포넌트 카탈로그 제공(셰이더 트랜지션, 소셜 오버레이, 데이터 차트 등), npx hyperframes add <블록명>으로 설치 가능 npx hyperframes add flash-through-white # shader transition npx hyperframes add instagram-follow # social overlay npx hyperframes add data-chart # animated chart
- hyperframes capture <url> 명령으로 웹사이트를 캡처하여 비디오로 변환하는 전체 파이프라인 지원
- Remotion과 비교시 핵심 차이는 작업물(HTML vs React)과 라이선스
- HyperFrames: Apache 2.0(OSI 인증) — 완전히 상업적 사용 가능하며, 렌더링당 비용이나 좌석 상한, 회사 규모 제한 없음
- Remotion: 소스 공개(source-available) 커스텀 라이선스 - 3인 초과 회사에서는 유료 회사 라이선스 필요
- Hyperframe은 빌드 단계없이 index.html 을 직접 재생, Remotion은 bundler 필요
- GSAP·Anime.js·Motion One 같은 라이브러리 클럭 애니메이션은 HyperFrames에서 seekable하고 프레임 정확도를 유지하지만, Remotion에서는 렌더링 시 wall-clock으로 재생
- Remotion은 Lambda 분산 렌더링이 프로덕션 레디, HyperFrames는 현재 단일 머신 렌더링만 지원
- 패키지 구성: CLI, core(타입·파서·린터), engine(Puppeteer + FFmpeg 캡처), producer(전체 렌더링), studio(브라우저 에디터), player(웹 컴포넌트), shader-transitions
- Apache 2.0 라이선스, TypeScript 기반
HyperFrames - HTML로 비디오를 만드는 AI 에이전트 전용 오픈소스 프레임워크
2 weeks ago
24
Related
하늘, 일몰, 행성 렌더링
1 hour ago
1
새로운 Mac 스틸러가 Claude에서 Apple 지원으로 위장하고 있습니다
2 hours ago
0
Anthropic, Claude에게 "왜"를 가르치다 - 정렬 훈련(Alignment Tr...
3 hours ago
0
Canvas 운영사 Instructure, 해킹범에게 몸값 지불
3 hours ago
1
EU, 아동을 겨냥한 TikTok·Instagram의 ‘중독적 설계’ 단속 추진
4 hours ago
1
소프트웨어 아키텍처 배우기
4 hours ago
1
Redis와 야망의 대가
4 hours ago
1
They Live Adblocker - 영화 They Live(1988)에서 영감을 받은 광고 차단기
4 hours ago
1
Popular
젠큐릭스, AACR서 소세포폐암 액체생검 성과 발표… “일치율 80% 입증”
3 weeks ago
58
!["아아 팔아 갖고는"…치킨·볶음밥까지 내놓은 커피전문점 '속사정' [트렌드+]](https://img.hankyung.com/photo/202604/01.43949627.1.jpg)
"아아 팔아 갖고는"…치킨·볶음밥까지 내놓은 커피전문점 '속사정' [트렌드+]
4 weeks ago
52
Thoughtworks Technology Radar, Volume 34 공개
3 weeks ago
46
韓으로 몰려오는 의료 관광객…'미용의료' 휴젤·클래시스 반등
3 weeks ago
46
SAP to Announce Results for First Quarter of 2026
3 weeks ago
46
Bring it at SAP Sapphire in 2026
3 weeks ago
42
English (US) · © Clint's Theme Park 2026. All rights are reserved
