Repolode
제출하기
heygen-com

heygen-com/hyperframes

AI 코딩 에이전트를 위해 HTML, CSS, 미디어와 탐색 가능한 애니메이션을 결정적 MP4 동영상으로 변환하는 오픈소스 프레임워크입니다.

GitHub에서 보기웹사이트
스타
66,562
포크
6,018
열린 이슈
368
마지막 커밋
6시간 전

어떤 프로젝트인가요?

HyperFrames를 사용하면 HTML 파일로 동영상을 만들 수 있습니다. 타이밍과 트랙은 data attribute로 설정하고, 애니메이션에는 GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 또는 사용자 지정 어댑터를 사용할 수 있습니다. 렌더러는 headless Chrome에서 각 프레임을 탐색하고 FFmpeg로 결과를 인코딩하므로, 같은 입력은 항상 같은 결과를 만듭니다.

이 프로젝트는 이미 HTML을 작성하는 개발자와 AI 코딩 에이전트를 대상으로 합니다. 스캐폴딩, live reload를 지원하는 미리보기, 린트, 로컬 또는 Docker 환경에서의 렌더링을 위한 CLI와, 기획부터 렌더링까지 작업 흐름을 안내하는 에이전트 스킬을 제공합니다. 분산 작업을 위한 AWS Lambda 렌더링도 지원합니다.

컴포지션은 필수 빌드 단계가 없는 일반 HTML이므로 index.html을 브라우저에서 바로 열어 미리 볼 수 있습니다. 카탈로그에는 단일 명령으로 추가할 수 있는 재사용 가능한 전환 효과, 오버레이, 차트, 자막이 준비되어 있습니다.

핵심 기능

  • 01컴포지션은 타이밍과 트랙을 지정하는 data attribute가 포함된 HTML 파일입니다.
  • 02GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 및 사용자 지정 애니메이션 어댑터를 지원합니다.
  • 03headless Chrome에서 프레임을 탐색하고 FFmpeg로 인코딩해 결정적으로 렌더링합니다.
  • 04init, preview, lint, render 명령과 Docker 지원을 제공하는 CLI가 포함되어 있습니다.
  • 05프롬프트를 바탕으로 동영상을 기획하고 제작할 수 있도록 에이전트 스킬을 제공합니다.
  • 06분산 작업을 위한 AWS Lambda 렌더링을 지원합니다.

활용 사례

  • 웹 콘텐츠를 바탕으로 제품 출시 또는 기능 발표 동영상을 생성합니다.
  • CI에서 매번 동일하게 렌더링되는 데이터 기반 차트 또는 지도 애니메이션을 제작합니다.
  • 콘텐츠 파이프라인에서 재사용 가능한 모션 그래픽 제작을 자동화합니다.
  • AI 코딩 에이전트가 HTML을 작성해 동영상을 만들도록 합니다.

토픽

#video#html#animation#rendering#ffmpeg#gsap#ai-agents#puppeteer#ai#framework

자주 묻는 질문

hyperframes은(는) 무엇인가요?
AI 코딩 에이전트를 위해 HTML, CSS, 미디어와 탐색 가능한 애니메이션을 결정적 MP4 동영상으로 변환하는 오픈소스 프레임워크입니다. HyperFrames를 사용하면 HTML 파일로 동영상을 만들 수 있습니다. 타이밍과 트랙은 data attribute로 설정하고, 애니메이션에는 GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 또는 사용자 지정 어댑터를 사용할 수 있습니다. 렌더러는 headless Chrome에서 각 프레임을 탐색하고 FFmpeg로 결과를 인코딩하므로, 같은 입력은 항상 같은 결과를 만듭니다.
hyperframes은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
hyperframes은(는) Apache-2.0 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
hyperframes은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. hyperframes의 마지막 커밋은 2026년 10월 18일입니다.
hyperframes은(는) 어디에 사용할 수 있나요?
웹 콘텐츠를 바탕으로 제품 출시 또는 기능 발표 동영상을 생성합니다. CI에서 매번 동일하게 렌더링되는 데이터 기반 차트 또는 지도 애니메이션을 제작합니다. 콘텐츠 파이프라인에서 재사용 가능한 모션 그래픽 제작을 자동화합니다. AI 코딩 에이전트가 HTML을 작성해 동영상을 만들도록 합니다.
hyperframes은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/heygen-com/hyperframes

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트