KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #cli #claude-code #codex #developer-tools #ai #dsh-plugin #ai-agent #mcp #deepseek-harness #windows

hyperframes

★ 41,213 Open GitHub ↗

HTML을 작성하세요. 비디오를 렌더링하세요. 에이전트를 위해 만들어졌습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center"><b>Write HTML. Render video. Built for agents.</b></p>

<p align="center">
  <a href="https://hyperframes.heygen.com/quickstart">Quickstart</a> |
  <a href="https://hyperframes.heygen.com/showcase">Showcase</a> |
  <a href="https://www.hyperframes.dev/">Playground</a> |
  <a href="https://hyperframes.heygen.com/catalog/blocks/data-chart">Catalog</a> |
  <a href="https://hyperframes.heygen.com/introduction">Docs</a> |
  <a href="https://discord.gg/EbK98HBPdk">Discord</a>
</p>

HyperFrames은 HTML, CSS, 미디어, 탐색 가능한(seekable) 애니메이션을 결정론적인 MP4 비디오로 변환하기 위한 오픈소스 프레임워크입니다. CLI를 통해 로컬에서 사용하거나, 스킬을 갖춘 AI 코딩 에이전트에서 사용하거나, 호스팅된 제작 워크플로우 뒤의 렌더링 코어로 사용할 수 있습니다.

## 빠른 시작 (Quick Start)

### AI 코딩 에이전트와 함께 사용하기

HyperFrames 스킬을 설치한 다음, 원하는 비디오를 설명하세요:

```bash
npx skills add heygen-com/hyperframes --full-depth
```

> 아무것도 선택되지 않은 상태로 선택기가 열립니다. **Core Skills** 그룹만 있으면 충분합니다. `/hyperframes` 라우터가 각 생성 워크플로우를 필요에 따라 온디맨드로 설치합니다. 에이전트와 비대호식(non-interactive) 실행의 경우 대신 `npx hyperframes skills update`를 사용해야 합니다. 이는 코어 세트만 정확하게 설치하는 반면, `--skill` 없이 수행하는 비대화식 `skills add`는 19개 모두를 설치합니다.
>
> `--full-depth`는 저장소의 현재 `main` 브랜치를 전체 클론합니다. 이 옵션이 없으면 `skills add`는 skills.sh 레지스트리 블롭을 가져오는데, 이는 `main`보다 몇 시간 뒤쳐져 있어 이전 버전의 스킬을 가져오게 됩니다. (`hyperframes skills update`는 이미 전체 깊이로 설치합니다.)

다음과 같은 프롬프트를 시도해 보세요:

> Using `/hyperframes`, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

스킬은 에이전트에게 HyperFrames 제작 루프를 가르쳐 줍니다: 비디오 계획, 유효한 HTML 작성, 탐색 가능한 애니메이션 연결, 미디어 추가, 린트, 미리보기, 렌더링. 이 기능들은 Claude Code, Cursor, Gemini CLI, Codex 및 스킬을 지원하는 기타 코딩 에이전트와 함께 작동합니다.

## 스킬 (Skills)

HyperFrames는 에이전트가 필요에 따라 로드하는 19개의 스킬을 제공합니다. 먼저 `/hyperframes`를 읽어보세요. 이는 라우터이자 기능 맵이며, 비디오, 덱, 컴포지션 포트 등 모든 "만들어 줘" 요청에 맞는 워크플로우를 선택하고 아래의 도메인 스킬을 가리킵니다.

**코어 세트(core set)**를 기본으로 사용하세요. 라우터가 각 생성 워크플로우를 필요에 따라 온디맨드로 설치합니다. `npx hyperframes skills update`는 어디서나 정확히 해당 세트를 설치합니다. 대화형 선택기(`npx skills add heygen-com/hyperframes --full-depth`)에는 미리 선택된 것 없이 "Core Skills" 그룹으로 나열됩니다. 선택기는 대화형 전용이며, `--skill`이 없는 비대화식 또는 에이전트 실행은 19개 모두를 설치합니다. 19개 모두를 의도적으로 설치하려면(선택기 건너뜀) `npx skills add heygen-com/hyperframes --all --full-depth`를 사용하고, 단 하나만 설치하려면(앞의 `/` 없이 순수 이름만) `npx skills add heygen-com/hyperframes --skill <name> --full-depth`를 사용하세요. `--full-depth`를 유지하세요. 현재 `main` 브랜치를 설치하며, 없으면 `skills add`가 수 시간 뒤쳐진 skills.sh 블롭을 가져옵니다.

설치 후에는 유지 관리가 간소화됩니다. `npx hyperframes init`은 **코어 세트**(라우터, `hyperframes-*` 도메인 스킬, 그리고 `media-use`와 이미 설치된 기타 항목들. `/figma`는 온디맨드로 유지됨)를 최신 상태로 유지하고 부분 설치를 확장하지 않습니다. 생성 워크플로우는 **온디맨드**로 설치되며, 라우터는 진입하기 전에 `npx hyperframes skills update <workflow>`를 실행합니다. 몰래 전체 세트를 다시 가져오지 않습니다.

### Codex에 업로드

커밋된 `HEAD` 버전의 매니페스트, 브랜드 자산, 스킬로부터 업로드 준비가 된 Codex 플러그인 아카이브를 빌드합니다:

```bash
bun run package:codex-plugin
```

이 명령은 `hyperframes/` 루트 폴더가 포함된 `dist/hyperframes-plugin.zip`을 생성하며, 아카이브가 Codex의 100MB 업로드 제한을 초과하면 실패합니다.

### 라우터 (Router)

| 스킬 | 사용 시기 |
| --- | --- |
| `/hyperframes` | 비디오, 애니메이션, 모션 그래픽을 제작/생성/편집/애니메이션화/렌더링하라는 모든 요청에 대해 **가장 먼저 읽어야 합니다**. 도메인 스킬에 대한 기능 맵, 모든 제작 브리프를 사전에 확인하는 의도 레이어, 그리고 아래의 제작 워크플로우를 위한 의도 라우터입니다. |

### 제작 워크플로우 (Creation workflows)

| 스킬 | 사용 시기 |
| --- | --- |
| `/product-launch-video` | 모든 **웹사이트** — 마케팅 / 런칭 / 제품 홍보(URL, 브리프 또는 스크립트 기반), 또는 사이트 자체의 시각적 요소를 특징으로 하는 사이트 투어 / 쇼케이스 / 소셜 클립. 최대 약 3분 (가장 적절한 시간 30~90초). |
| `/faceless-explainer` | 임의의 텍스트로부터 **주제 / 개념 설명** — 제품, URL, 웹사이트 캡처 없음; 모든 시각적 요소는 LLM이 발명함 (타이포그래피 / 추상 / 다이어그램 / 데이터 시각화). |
| `/pr-to-video` | **GitHub 풀 리퀘스트**(PR URL, `owner/repo#N` 참조, 또는 "this PR") → `gh` CLI를 통해 읽어온 변경 로그 / 기능 공개 / 수정 / 리팩터링 설명기. |
| `/embedded-captions` | 기존 토킹 헤드 비디오에 **캡션 / 자막** 추가(영상은 그대로 유지) — 대사 레일, 피사체 뒤에 내장된 클라이맥스, 또는 순수 시네마틱 임베드. |
| `/talking-head-recut` | 기존 토킹 헤드 / 인터뷰 / 팟캐스트 비디오를 **디자인된 그래픽 오버레이**(하단 바, 데이터 콜아웃, 키네틱 타이틀, 인용구, 사이드 패널, PiP)와 함께 패키징. |
| `/motion-graphics` | 짧고 **내레이션이 없는 디자인 중심의 모션 그래픽**(약 10초 미만) — 키네틱 타입, 통계/차트 히트, 로고 스팅, 하단 바, 애니메이션 트윗/헤드라인. MP4 또는 투명 오버레이. |
| `/music-to-video` | **음악 트랙**(오디오 파일, 오디오를 추출할 비디오, 또는 무드 브리프에서 생성된 트랙) → **비트 동기화**된 비디오 — 가사, 슬라이드쇼, 또는 키네틱 프로모; 음악이 페이싱을 주도함. |
| `/slideshow` | **프레젠테이션 / 피치 덱 / 대화형 덱** — 개별 슬라이드, 프래그먼트 공개, 분기, 핫스팟 탐색, 발표자 모드. 렌더링된 비디오가 아닌 탐색 가능한 덱 출력. |
| `/general-video` | **기타 모든 것** — 더 길거나 다중 씬의 조각, 브랜드/시즐 릴, 타이틀 카드, 정적 루프, 자유 형식 컴포지션. 입력 및 길이에 구애받지 않는 폴백이자 컴패니언 모드(전체 툴박스와 함께 공동 제작)의 본거지. |
| `/remotion-to-hyperframes` | **기존 Remotion**(React) 컴포지션의 소스를 HyperFrames HTML로 **포팅**. 생성이 아닌 단방향 마이그레이션. |

### 도메인 스킬 (온디맨드로 로드됨)

제작 워크플로우가 조합하는 원자적 기능들 — 특정 레이어가 필요할 때 하나씩 가져옵니다.

| 스킬 | 다루는 내용 |
| --- | --- |
| `/hyperframes-core` | 컴포지션 계약 — `data-*` 타이밍 속성, `class="clip"`, 트랙, 하위 컴포지션, 변수, 프레임워크 소유의 미디어 재생, 결정론 규칙. |
| `/hyperframes-animation` | 모든 애니메이션 지식 — 원자적 모션 규칙, 씬 청사진, 전환, 런타임 어댑터 (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
| `/hyperframes-keyframes` | 런타임 전반의 탐색 안전(seek-safe) 키프레임 제작 — GSAP 타임라인, CSS 키프레임, Anime.js, WAAPI, FLIP, 경로, 마스크, SVG 모프/드로우, 3D 심도 — 플러스 렌더링된 모션을 위한 `hyperframes keyframes` 진단. |
| `/hyperframes-creative` | 애니메이션 외의 크리에이티브 디렉션 — `frame.md` / `design.md`, 팔레트, 타이포그래피, 내레이션, 비트 계획, 오디오 반응형 시각 자료, 컴포지션 패턴. |
| `/media-use` | 미디어 OS — 모든 미디어 요구 사항(BGM, SFX, 이미지, 아이콘, 로고, 보이스, 컬러 그레이드, LUT)을 고정된 로컬 파일 또는 바로 붙여넣기 가능한 블록 + 원장 기록으로 해결하며, 카탈로그에 없는 경우 TTS/음악/이미지 모델을 통해 생성하고, 전사, 캡션, 배경 제거, 프로젝트 간 자산 재사용을 수행합니다. 하나의 공유 오디오 엔진 + 매니페스트 추적. |
| `/hyperframes-cli` | CLI 개발 루프 — `init`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor` 및 HeyGen 호스팅 클라우드 렌더링(`cloud render`)과 AWS Lambda 렌더링(`lambda deploy / render / progress`). |
| `/hyperframes-registry` | `hyperframes add`를 통해 레지스트리 블록과 컴포넌트를 설치하고 컴포지션에 연결. 업스트림에 기여할 새로운 블록 또는 컴포넌트 제작. |
| `/figma` | Figma 자산, 토큰, 컴포넌트, 스토리보드 섹션 가져오기 → 재구성된 모션(슬라이드가 아닌 상태로 읽힌 프레임) (REST/CLI) 플러스 모션 애니메이션(MCP) 및 셰이더(MCP 소스 / 네이티브 내보내기)를 컴포지션에 통합. |

시각적 디자인 핸드오프 워크플로우에 대해서는 [Claude Design 가이드](https://hyperframes.heygen.com/guides/claude-design) 및 [Open Design 가이드](https://hyperframes.heygen.com/guides/open-design)를 참조하세요.

### CLI를 통한 수동 사용

```bash
npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 라이브 리로드와 함께 브라우저에서 미리보기
npx hyperframes render       # MP4로 렌더링
```

**요구 사항:** Node.js 22+, FFmpeg

## 빌드할 수 있는 것 (What You Can Build)

아이디어가 필요하신가요? [쇼케이스(Showcase)](https://hyperframes.heygen.com/showcase)를 통해 시청, 읽기, 실행 및 리믹스할 수 있는 완성된 비디오들을 둘러보세요.

- 제품 런칭 비디오 및 기능 발표
- 애니메이션화된 코드 diff, 내레이션, 캡션이 포함된 PR 워크스루
- 데이터 시각화, 차트 레이스, 지도 애니메이션
- 키네틱 캡션, 오버레이, 음악이 포함된 소셜 비디오
- 문서-투-비디오, PDF-투-비디오, 사이트 투어 설명기
- 자동화된 콘텐츠 파이프라인을 위한 재사용 가능한 모션 그래픽

## Frame.md

**frame.md — 비디오를 위해 준비된 디자인 시스템.**

모든 브랜드에는 `design.md`가 있습니다. 하지만 그중 카메라를 위해 작성된 것은 없습니다. `frame.md`는 누락된 변환 레이어입니다. 웹 컨텍스트 디자인 사양을 가져와 프레임에 맞게 반전시킵니다. 동일한 토큰, 동일한 규칙을 따르지만, AI 에이전트가 규모를 추측하거나 웹 크롬을 찾지 않고도 프로모션 비디오를 구성할 수 있도록 다시 작성되었습니다.

출력 결과물은 전체 툴체인이 읽을 수 있는 `DESIGN.md` 슈퍼셋입니다. 원자는 신성하게 유지됩니다. 컴포지션은 자유롭게 유지됩니다. 숫자는 스크립트에서 가져옵니다.

<table>
  <tr>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/biennale-yellow"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/biennale-yellow.png" alt="Biennale Yellow" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/biennale-yellow">Biennale Yellow</a></b>
    </td>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/blockframe"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blockframe.png" alt="BlockFrame" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/blockframe">BlockFrame</a></b>
    </td>
  </tr>
  <tr>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/blue-professional"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blue-professional.png" alt="Blue Professional" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/blue-professional">Blue Professional</a></b>
    </td>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/bold-poster"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/bold-poster.png" alt="Bold Poster" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/bold-poster">Bold Poster</a></b>
    </td>
  </tr>
  <tr>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/broadside"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/broadside.png" alt="Broadside" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/broadside">Broadside</a></b>
    </td>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/capsule"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/capsule.png" alt="Capsule" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/capsule">Capsule</a></b>
    </td>
  </tr>
  <tr>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/cartesian"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cartesian.png" alt="Cartesian" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/cartesian">Cartesian</a></b>
    </td>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/cobalt-grid"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cobalt-grid.png" alt="Cobalt Grid" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/cobalt-grid">Cobalt Grid</a></b>
    </td>
  </tr>
  <tr>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/coral"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/coral.png" alt="Coral" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/coral">Coral</a></b>
    </td>
    <td width="50%" align="center">
      <a href="https://www.hyperframes.dev/design/creative-mode"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/creative-mode.png" alt="Creative Mode" width="100%"></a>
      <br><b><a href="https://www.hyperframes.dev/design/creative-mode">Creative Mode</a></b>
    </td>
  </tr>
</table>

[hyperframes.dev/design](https://www.hyperframes.dev/design)에서 모든 템플릿을 살펴보고 리믹스하세요.

## 작동 방식 (How It Works)

비디오를 HTML로 정의합니다. 타이밍과 트랙을 위해 데이터 속성을 추가합니다. 탐색 가능한 애니메이션을 위해 GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI 또는 자신만의 프레임 어댑터를 사용하세요.

```html
<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video
    class="clip"
    data-start="0"
    data-duration="6"
    data-track-index="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>

<h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

브라우저에서 즉시 미리보기를 확인하세요. 로컬 또는 Docker에서 렌더링하세요. 렌더러는 헤드리스 크롬(headless Chrome)에서 각 프레임을 탐색하고 결과를 FFmpeg로 인코딩하므로, 동일한 입력은 동일한 비디오를 생성합니다.

## HyperFrames 스택 (HyperFrames Stack)

HyperFrames는 오픈소스 렌더링 엔진이며, HTML 네이티브 비디오 제작을 위한 도구들이 점점 늘어나고 있습니다.

| 구성 요소 | 상태 | 수행 역할 |
| --- | --- | --- |
| CLI | 사용 가능 | 로컬 비디오 프로젝트 스캐폴드, 미리보기, 린트, 검사 및 렌더링 |
| Core / Engine / Producer | 사용 가능 | 컴포지션 구문 분석, 헤드리스 크롬 구동, 비디오 인코딩 및 오디오 믹싱 |
| Catalog | 사용 가능 | 전환, 오버레이, 자막, 차트, 지도, 효과를 위한 재사용 가능한 블록 및 컴포넌트 |
| Agent skills | 사용 가능 | 일반 웹 문서가 놓치는 비디오 제작 패턴을 코딩 에이전트에 교육 |
| Studio | 사용 가능, 진화 중 | 컴포지션 미리보기 및 편집을 위한 브라우저 기반 표면 |
| AWS Lambda rendering | 사용 가능 | 분산 렌더링 스택 배포 및 노트북 또는 CI에서의 렌더링 구동 |
| [hyperframes.dev](https://www.hyperframes.dev/) | 사용 가능 | HTML 네이티브 비디오 프로젝트 미리보기, 반복 작업, 공유 및 렌더링을 위한 커뮤니티 플레이그라운드 |
| [frame.md](https://www.hyperframes.dev/design) | 사용 가능 | 카메라를 위해 디자인 시스템 반전 — 에이전트가 비디오를 구성할 수 있는 DESIGN.md 슈퍼셋 |

## 카탈로그 (Catalog)

바로 사용할 수 있는 블록과 컴포넌트를 설치하세요:

```bash
npx hyperframes add flash-through-white   # 셰이더 전환
npx hyperframes add instagram-follow      # 소셜 오버레이
npx hyperframes add data-chart            # 애니메이션 차트
```

[hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart)에서 카탈로그를 살펴보세요.

## 왜 HyperFrames인가요? (Why HyperFrames?)

- **HTML 네이티브:** 컴포지션은 데이터 속성이 포함된 HTML 파일입니다. React 요구사항이 없고, 독점적인 타임라인 형식도 없습니다.
- **에이전트 친화적:** 에이전트는 이미 HTML을 작성할 수 있으며, CLI는 기본적으로 비대화형(non-interactive)입니다.
- **결정론적(Deterministic):** 동일한 입력, 동일한 프레임, 동일한 출력. CI, 회귀 테스트, 자동화된 렌더링을 위해 제작되었습니다.
- **빌드 단계 없음:** `index.html` 컴포지션은 있는 그대로 재생되며 브라우저에서 직접 미리 볼 수 있습니다.
- **어댑터 기반 애니메이션:** GSAP, CSS 애니메이션, Lottie, Three.js, Anime.js, WAAPI 또는 커스텀 런타임을 가져와 사용하세요.
- **오픈 소스:** Apache 2.0 라이선스, 렌더링당 수수료나 상업적 사용 임계값이 없습니다.

## HyperFrames 대 Remotion

HyperFrames은 [Remotion](https://www.remotion.dev)에서 영감을 받았습니다. 두 도구 모두 헤드리스 크롬과 FFmpeg로 비디오를 렌더링합니다. 주요 차이점은 저작 모델에 있습니다. Remotion은 React 컴포넌트에 베팅하고, HyperFrames은 인간과 에이전트 모두 쉽게 작성할 수 있는 순수 HTML에 베팅합니다.

| | **HyperFrames** | **Remotion** |
| --- | --- | --- |
| 저작 (Authoring) | HTML + CSS + 탐색 가능한 애니메이션 | React 컴포넌트 |
| 빌드 단계 | 없음; `index.html`이 그대로 재생됨 | 번들러 필요 |
| 에이전트 핸드오프 | 순수 HTML 파일 | JSX / React 프로젝트 |
| 라이브러리 시계 애니메이션 | 어댑터를 통해 탐색 가능, 프레임 단위 정확도 | 벽시계(Wall-clock) 애니메이션 패턴은 주의 필요 |
| 분산 렌더링 | 로컬 및 AWS Lambda 렌더링 경로 | Remotion Lambda, 성숙한 클라우드 렌더러 |
| 라이선스 | Apache 2.0 | 소스 가용 Remotion 라이선스 |

[HyperFrames 대 Remotion 가이드](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion)에서 전체 비교 내용을 읽어보세요.

## 문서 (Documentation)

전체 문서: [hyperframes.heygen.com/introduction](https://hyperframes.heygen.com/introduction)

- [빠른 시작](https://hyperframes.heygen.com/quickstart)
- [쇼케이스](https://hyperframes.heygen.com/showcase)
- [가이드](https://hyperframes.heygen.com/guides/gsap-animation)
- [API 레퍼런스](https://hyperframes.heygen.com/packages/core)
- [카탈로그](https://hyperframes.heygen.com/catalog/blocks/data-chart)
- [예제](https://hyperframes.heygen.com/examples)
- [AWS Lambda 렌더링](https://hyperframes.heygen.com/deploy/aws-lambda)

## 패키지 (Packages)

| 패키지 | 설명 |
| --- | --- |
| [`hyperframes`](packages/cli) | 컴포지션 생성, 미리보기, 린트, 검사 및 렌더링을 위한 CLI |
| [`@hyperframes/core`](packages/core) | 타입, 파서, 제너레이터, 린터, 런타임 및 프레임 어댑터 |
| [`@hyperframes/engine`](packages/engine) | Puppeteer와 FFmpeg를 사용하는 탐색 가능한 페이지-투-비디오 캡처 엔진 |
| [`@hyperframes/producer`](packages/producer) | 캡처, 인코딩, 오디오 믹스를 위한 전체 렌더링 파이프라인 |
| [`@hyperframes/studio`](packages/studio) | 브라우저 기반 컴포지션 편집기 UI |
| [`@hyperframes/player`](packages/player) | 임베드 가능한 `<hyperframes-player>` 웹 컴포넌트 |
| [`@hyperframes/shader-transitions`](packages/shader-transitions) | 컴포지션을 위한 WebGL 셰이더 전환 |
| [`@hyperframes/aws-lambda`](packages/aws-lambda) | 분산 렌더링을 위한 AWS Lambda SDK 및 배포 표면 |

## 커뮤니티 (Community)

HyperFrames은 [HeyGen](https://www.heygen.com)의 프로덕션 환경에서 사용되고 있으며, [tldraw](https://tldraw.com), [TanStack](https://tanstack.com) 등의 팀에서 제공하는 커뮤니티 예제들이 [ADOPTERS.md](ADOPTERS.md)에 있습니다. 팀에서 HyperFrames을 사용하고 있다면 PR을 열어주세요.

- 질문 및 아이디어: [Discord](https://discord.gg/EbK98HBPdk)
- 버그 및 기능 요청: [GitHub Issues](https://github.com/heygen-com/hyperframes/issues)
- 보안 보고: [SECURITY.md](SECURITY.md)
- 기여: [CONTRIBUTING.md](CONTRIBUTING.md)

## 개발 노트 (Development Note)

이 저장소는 `packages/producer/tests/**/output.mp4` 아래의 골든 회귀 테스트 베이스라인(약 240MB의 `.mp4` 파일)을 위해 [Git LFS](https://git-lfs.com)를 사용합니다. 개발을 위해 전체 저장소를 복제하는 경우, 먼저 Git LFS를 설치하세요:

```bash
# macOS
brew install git-lfs

# Ubuntu / Debian
sudo apt install git-lfs

# Windows
winget install GitHub.GitLFS

# 그 후, 머신당 한 번 실행
git lfs install
```

소스 파일만 필요한 경우 LFS 컨텐츠를 건너뛸 수 있습니다:

```bash
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git
```

## 라이선스 (License)

[Apache 2.0](LICENSE)

hyperframes

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README