OneWave-AI/Crest

HyperFrames

HyperFrames는 일반 HTML/CSS/JS로 영화 같은 구성을 만들고, 실시간으로 미리보기한 후 MP4 또는 GIF로 렌더링할 수 있는 비디오 합성 프레임워크입니다. Remotion과 유사하지만 더 가볍고 브라우저 네이티브입니다.

이 스킬을 사용해야 할 때

사용자가 다음을 원할 때 활성화하세요:

• 비디오, 애니메이션, 또는 모션 그래픽 만들기
• 타이틀 카드, 하단 썸네일, 인트로, 아웃트로, 또는 장면 전환 만들기
• 애니메이션 설명, 데모 릴, 또는 제품 워크스루 만들기
• 자막, 서브타이틀, 또는 음성 해설을 구성에 추가하기
• 웹사이트, 블로그 게시물, 팟캐스트, 또는 토크를 비디오로 변환하기
• 오디오 반응형 비주얼 만들기
• 애니메이션 로고 또는 소셜 미디어 짧은 동영상 렌더링하기

사용자가 "비디오", "애니메이션", "모션", "렌더", "MP4"라고 말하거나 시간 기반의 무언가를 설명한다면, 이 스킬이 적합한 선택입니다.

CLI

모든 것은 npx hyperframes를 통해 라우팅됩니다:

명령어	목적
npx hyperframes init	새 구성 스캐폴딩 (Tailwind, 빈 프로젝트, 또는 템플릿)
npx hyperframes preview	브라우저에서 핫 리로드로 실시간 미리보기
npx hyperframes lint	스키마에 대해 구성 유효성 검사
npx hyperframes inspect	디버깅을 위해 파싱된 장면 그래프 덤프
npx hyperframes render	MP4 / WebM / GIF 생성
npx hyperframes doctor	환경 문제 진단 (브라우저, ffmpeg)
npx hyperframes add <block>	레지스트리 블록 설치 (자막, 전환 등)

모든 새 프로젝트는 사용자가 선택한 작업 디렉토리에서 npx hyperframes init으로 시작하세요. 실행하기 전에 사용자와 스캐폴드 위치를 확인하세요.

핵심 개념 모델

HyperFrames 구성은 단일 HTML 파일(또는 소규모 프로젝트)로 다음을 선언합니다:

1. 지속 시간 — 구성이 실행되는 시간 (data-duration 또는 설정)
2. 레이어 — 시간이 지남에 따라 나타나고 사라지는 쌓인 요소
3. 타이밍 — 레이어별 data-start, data-end, 이징, 및 키프레임
4. 어댑터 — 자신이 선호하는 애니메이션 라이브러리 사용: GSAP, Anime.js, Web Animations API, CSS 애니메이션, Lottie, Three.js. HyperFrames는 방해하지 않고 시간만 조정합니다.

렌더러는 결정론적으로 구성을 재생합니다 — 동일한 입력, 항상 동일한 출력. 이것이 diff 친화적이고 AI 친화적인 이유입니다.

워크플로우

1. 스캐폴드 — npx hyperframes init 후 템플릿 선택
2. 구성 — HTML 편집; 레이어 추가, 타이밍 설정, 애니메이션 라이브러리 선택. 구성을 좁게 유지: 파일당 하나의 장면으로 충분합니다.
3. 미리보기 — npx hyperframes preview로 핫 리로드
4. 린트 + 검사 — 타이밍 중복 및 누락된 에셋을 조기에 발견
5. 렌더링 — npx hyperframes render --format mp4 (또는 gif, webm)

함께 사용하는 스킬

사용자의 요청이 더 특화된 워크플로우에 적합할 때는 해당 스킬을 활용하세요 — Claude Code가 관련 있을 때 자동 로드합니다:

• website-to-hyperframes — URL을 비디오로 변환 (스크린샷 → 장면)
• remotion-to-hyperframes — 기존 Remotion 프로젝트 이전
• hyperframes-media — TTS 내레이션 (Kokoro), Whisper 전사, 배경 제거를 통한 투명 오버레이
• hyperframes-registry — npx hyperframes add를 통해 커뮤니티 블록 설치 (하단 썸네일, VFX, 전환, 텍스트 효과)
• 어댑터 스킬: gsap, animejs, waapi, css-animations, lottie, three, tailwind — HyperFrames 내 각 애니메이션 라이브러리 패턴

삶을 편하게 만드는 기본값

• Tailwind 템플릿 선호 (npx hyperframes init --tailwind) — 대부분의 사용자가 스타일링된 구성을 원하며 Tailwind가 빠릅니다.
• 타임라인 기반 애니메이션에는 GSAP 기본; 간단한 요소 움직임에는 WAAPI; 디자이너가 제공한 JSON 애니메이션에는 Lottie.
• 사용자가 달리 요청하지 않으면 1920x1080 @ 30fps로 렌더링. TikTok / Reels / Shorts에는 세로 (1080x1920).
• render 전에 항상 npx hyperframes lint 실행 — 미리보기에서 볼 수 없는 버그의 90%를 잡아냅니다.

최소 예제

<!doctype html>
<html data-duration="6000">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.tailwindcss.com" />
  </head>
  <body class="bg-black text-white font-sans">
    <div class="absolute inset-0 grid place-items-center"
         data-start="0" data-end="3000">
      <h1 class="text-7xl font-bold tracking-tight">Crest</h1>
    </div>
    <div class="absolute inset-0 grid place-items-center"
         data-start="3000" data-end="6000">
      <p class="text-3xl text-emerald-400">Built for Claude Code</p>
    </div>
  </body>
</html>

6초짜리 두 장면 타이틀 시퀀스입니다. npx hyperframes preview로 보고, npx hyperframes render로 MP4를 내보냅니다.

사용자에게 미리 물어볼 내용

스캐폴딩 전에 다음에 대한 답변을 얻으세요:

1. 비디오의 용도는 무엇인가요? (타이틀 카드, 데모, 설명, 소셜 쇼트)
2. 길이는 얼마나 되나요? (소셜 15초 미만, 제품 30-60초, 설명 1-3분)
3. 화면 비율은? (16:9 데스크톱, 9:16 소셜, 1:1 피드)
4. 음성 해설이 있나요, 아니면 무음인가요? (음성 해설이면 hyperframes-media를 사용하여 TTS 생성)
5. 브랜드 에셋이 있나요? (로고, 색상, 폰트 — 브랜드 키트가 있다면 가져오기)

이것들을 확인한 후, 스캐폴드하고 구성을 시작하세요.