HyperFrames에서 Remotion으로의 마이그레이션 워크플로우
레거시 또는 기존 HyperFrames HTML 구성을 순수 React Remotion 코드로 마이그레이션합니다.
매핑 테이블
| HyperFrames 개념 | Remotion 대응 요소 |
|---|---|
GSAP Timeline .to() / .from() | useCurrentFrame() + spring() / interpolate() |
<div class="clip" data-start data-end> | <Sequence from={start} durationInFrames={duration}> |
<video> 요소 | <OffthreadVideo src={staticFile('...')} /> |
<audio> 요소 | <Audio src={staticFile('...')} /> |
npx hyperframes render | npx remotion render src/index.ts MyComp out/video.mp4 |
마이그레이션 단계
- HyperFrames HTML 구조와 타임라인 값을 파싱합니다.
- 장면 레이아웃을 React
<AbsoluteFill>컴포넌트로 재구성합니다. - GSAP 보간을 프레임 결정적 Remotion
spring()및interpolate()프리미티브로 대체합니다. - Remotion Studio에서 출력을 확인합니다.