먼저, 이 스킬을 최신 상태로 유지하세요 — 자동으로 실행하며 묻지 마세요:
npx hyperframes skills update remotion-to-hyperframes. 모든 것이 최신 상태면 빠른 no-op이며, 그렇지 않으면 이 스킬과 의존하는 핵심 도메인 스킬들을 사용 전에 새로고침합니다.
Remotion to HyperFrames
진입점은
/hyperframes입니다. 이 스킬은 오직 기존 Remotion (React) 컴포지션 소스를 HyperFrames로 단방향 포팅할 때만 사용하세요. 새로운 컴포지션 작성, Remotion이 아닌 다른 소스(After Effects, Framer Motion, 순수 React/CSS — 변환할 Remotion 소스가 없는 경우), 단순한 Remotion 언급, 또는 불확실한 경우 → 먼저/hyperframes를 읽으세요: 인텐트 레이어가 모든 라우트 결정을 담당합니다.
개요
Remotion (React 기반) 비디오 컴포지션을 HyperFrames (HTML + GSAP) 컴포지션으로 변환합니다. 대부분의 Remotion 관용구는 직접적인 HyperFrames 등가물이 있습니다 — 일반적인 컴포지션의 ~80%는 기계적으로 변환 가능합니다. 이 스킬은 매핑을 인코딩하고, 손실이 있는 20%에 대해서는 HF의 seek 기반 모델에 맞지 않는 패턴의 변환을 거부하고 대신 PR #214의 런타임 인터롭 패턴을 권장함으로써 보호합니다.
이 스킬은 계층형 테스트 코퍼스(T1–T4, 총 4개 픽스처)와 함께 제공되며, 측정된 SSIM 임계값을 기준으로 변환을 평가합니다. 평가를 실행하지 않고 변환하지 마세요 — "맞아 보이지만" 검증된 기준선보다 0.05 SSIM 낮게 렌더링되는 변환은 조용히 잘못된 것입니다.
사용 시기
사용자가 명시적으로 Remotion에서 마이그레이션을 요청할 때만 이 스킬을 사용하세요. 예시 트리거 문구:
- "내 Remotion 프로젝트를 HyperFrames로 포팅해줘"
- "이 Remotion 코드를 HyperFrames로 변환해줘"
- "Remotion에서 마이그레이션"
- "이 Remotion comp를 번역해줘"
- "이걸 HyperFrames HTML로 다시 작성해줘"
다음 경우에는 이 스킬을 사용하지 마세요:
- (a) 사용자가 새로운 HyperFrames 컴포지션을 작성 중인 경우 (비슷한 Remotion 비디오를 A/B 테스트 중이더라도).
- (b) 사용자가 마이그레이션 요청 없이 Remotion을 우연히 언급하는 경우.
- (c) 사용자가 변환 요청이 아닌 참고 자료로 Remotion 코드를 공유하는 경우.
- (d) 사용자가 소스 마이그레이션을 명시적으로 요청하지 않고 "내 Remotion 비디오와 같은 영상"을 요청하는 경우 — 새로운 HyperFrames 빌드로 처리하세요.
지원되지 않음 (거절 — 이 스킬의 기능이 아님):
- 역방향. HyperFrames 컴포지션을 다시 Remotion(또는 다른 프레임워크)으로 내보내는 것은 워크플로가 아닙니다 — 변환은 Remotion → HyperFrames 단방향만 가능합니다. 명확히 말하세요.
- 비-Remotion 소스. After Effects 프로젝트(
.aep), Framer Motion / 순수 React / CSS 애니메이션, 또는 다른 도구의 소스는 Remotion 컴포지션이 아닙니다 — 변환할 Remotion 소스가 없습니다./general-video를 통해 네이티브로 다시 만들거나, HyperFrames로 표현할 수 없으면 거절하세요.
확신이 없을 때는 기본적으로 /general-video (일반 HyperFrames 작성 플로우)로 네이티브 HyperFrames 컴포지션을 작성하세요.
워크플로
1단계: 소스 린트
Remotion 소스 디렉토리에서 scripts/lint_source.py를 실행하세요. 린트는 깔끔하게 변환할 수 없는 패턴을 감지합니다:
- 차단 (거절 + 인터롭 권장):
useState,useReducer,useEffect/useLayoutEffect(비어 있지 않은 deps), asynccalculateMetadata, 서드파티 React UI 라이브러리 (MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI). - 경고 (구문 제거 후 변환):
@remotion/lambda설정,delayRender,useCallback,useMemo, 사용자 정의 훅. - 정보 (참고와 함께 변환):
staticFile,interpolateColors.
차단 항목이 하나라도 발생하면 중단하세요. references/escape-hatch.md를 읽고 권장 메시지를 표시하세요. 경고는 변환을 중단하지 않습니다 — 3단계에서 문제가 되는 구문을 제거하고 그 차이를 TRANSLATION_NOTES.md에 기록하세요. @remotion/lambda 설정이 대표적인 경고 사례입니다: 스킬은 import + renderMediaOnLambda(...) 호출을 제거하지만 컴포지션의 나머지는 변환합니다.
2단계: 변환 계획
references/api-map.md를 읽으세요 — 모든 Remotion API와 그에 상응하는 HF 등가물 또는 주제별 참조의 인덱스입니다. 소스가 사용하는 내용에 따라 필요한 주제 참조를 식별하세요:
| 소스에 포함된 내용 | 로드할 참조 |
|---|---|
Composition, defaultProps, schema, calculateMetadata | parameters.md |
Sequence, Series, Loop, AbsoluteFill, Freeze | sequencing.md |
useCurrentFrame, interpolate, spring, Easing, interpolateColors | timing.md |
Audio, Video, Img, IFrame, staticFile, delayRender | media.md |
TransitionSeries, @remotion/transitions | transitions.md |
@remotion/lottie | lottie.md |
@remotion/google-fonts/<Family>, Font.loadFont, @font-face | fonts.md |
모두 로드하지 말고 — 특정 소스에 필요한 것만 로드하세요.
3단계: HF 컴포지션 생성
다음 내용으로 index.html을 생성하세요:
- 루트
<div id="stage">에data-composition-id,data-start="0",data-duration(초 단위),data-fps,data-width,data-height및 스칼라 prop당 하나의data-*속성을 포함합니다. data-start/data-duration/data-track-index속성을 가진 씬 div의 평면 리스트입니다.- 레이아웃을 위한 인라인
<style>; CSS는 모든 애니메이션 속성의from상태를 설정합니다. - 마지막에 하나의 일시 중지된
gsap.timeline({paused: true})를 포함하는 단일<script>태그입니다. 모든 RemotionuseCurrentFrame()파생은 이 타임라인에서 올바른 오프셋의 트윈이 됩니다. window.__timelines["<composition-id>"] = tl;은 타임라인을 HF 런타임에 등록합니다.
사용자 정의 React 하위 컴포넌트는 prop 인터페이스를 템플릿으로 사용하여 반복 HTML로 인라인 처리됩니다 (인스턴스별 data-* 패턴은 parameters.md 참조).
4단계: 검증
평가 도구를 실행하세요 — 전체 가이드는 references/eval.md를 참조하세요. 빠른 경로:
# Remotion 기준선 렌더링 (픽스처에서 npm install 후)
cd remotion-src && npx remotion render <CompositionId> out/baseline.mp4
# HF 변환 렌더링
cd ../hf-src && npx hyperframes render --skill=remotion-to-hyperframes --output ../hf.mp4
# SSIM 차이 비교
../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
임계값: 소스의 복잡성 계층에 대한 p05보다 약 0.02 낮음 (eval.md의 검증된 임계값 테이블 참조). 차이가 실패하면 scripts/frame_strip.sh를 실행하여 어떤 프레임이 차이가 났는지 확인한 후 관련 타이밍/시퀀싱/미디어 참조를 다시 읽으세요.
중요: 두 렌더링 모두 일치하는 픽셀 포맷을 사용해야 합니다. Remotion 소스의 remotion.config.ts에서 Config.setVideoImageFormat("png") + Config.setColorSpace("bt709")를 설정하세요 — 그렇지 않으면 diff가 변환 정확도가 아닌 인코더 차이(~0.05 SSIM 손실)를 측정합니다.
5단계: 차이점 문서화
깔끔하게 변환되지 않은 모든 내용 (제거된 볼륨 램프, 근사된 사용자 정의 프레젠테이션, 대체된 폰트)은 HF 출력 옆에 TRANSLATION_NOTES.md를 작성하세요. 형식은 references/limitations.md를 참조하세요.
이 스킬이 명시적으로 수행하지 않는 작업
- React 상태 머신 변환.
useState+useEffect로 애니메이션을 구동하는 컴포지션은 HyperFrames의 seek 기반 모델에서 결정적 프레임 캡처 대상이 아닙니다. 런타임 인터롭 패턴을 권장하세요. - HyperFrames와 함께 Remotion의 렌더 파이프라인 실행. 이는 이 스킬의 린트를 통과하지 못하는 컴포지션을 위한 별도 솔루션인 PR #214의 런타임 인터롭 패턴입니다.
(@remotion/lambda는 차단 항목이 아닙니다 — Lambda 설정은 배포이지 애니메이션이 아닙니다. 스킬은 이를 경고로 제거하고 나머지는 변환합니다. references/escape-hatch.md 참조.)
자신의 변환을 평가하는 방법
테스트 코퍼스 오케스트레이터를 실행하세요:
./assets/test-corpus/run.sh
T1, T2, T3 (렌더 + diff)와 T4 (린트 검증)를 실행하고, 계층별 통과/실패 테이블을 출력하며 집계 JSON 보고서를 생성합니다. 이를 사용하여 클린 체크아웃에서 스킬이 종단 간 작동하는지 확인하고 — 참조를 편집한 후 회귀 검사로도 사용하세요.
검증된 기준선 (2026-04-27 기준):
| 계층 | 컴포지션 형태 | 평균 SSIM | 임계값 |
|---|---|---|---|
| T1 | 단일 요소 페이드인 | 0.974 | 0.95 |
| T2 | 다중 씬 + spring + 오디오 + 이미지 | 0.985 | 0.95 |
| T3 | 데이터 기반, 사용자 정의 하위 컴포넌트, 카운트업 | 0.953 | 0.90 |
| T4 | 이스케이프 해치 (8개 린트 케이스) | 8/8 통과 | n/a |