Motion Canvas
2026-10 확인: @motion-canvas/core, /2d, /ffmpeg 3.17. Node 16+ 필요.
Remotion과 Motion Canvas 비교: Remotion = React, 프레임 → UI, 데이터 기반/템플릿 영상 및 서버 렌더링에 적합. Motion Canvas = 명령형 타임라인(yield*로 한 단계씩 진행)과 보이스오버 타이밍을 위한 에디터. 영상당 하나를 선택하고 혼용하지 마세요.
설정
npm init @motion-canvas@latest # 이름, TypeScript, "Video (FFmpeg)" 내보내기 선택
npm install
npm run serve # http://localhost:9000 에서 에디터 실행
src/project.ts # makeProject({ scenes: [...] })
src/scenes/*.tsx # 장면당 하나의 파일
// src/project.ts
import {makeProject} from '@motion-canvas/core';
import intro from './scenes/intro?scene'; // ?scene 접미사 필수
export default makeProject({scenes: [intro]});
장면(Scene)
import {Circle, Rect, Txt, makeScene2D} from '@motion-canvas/2d';
import {all, chain, createRef, easeInOutCubic, sequence, waitFor, waitUntil} from '@motion-canvas/core';
export default makeScene2D(function* (view) {
const circle = createRef<Circle>();
view.add(<Circle ref={circle} x={-300} size={240} fill="#e13238" />);
yield* all( // 병렬 실행, 모두 완료될 때까지 대기
circle().position.x(300, 1).to(-300, 1), // 트윈: 속성(값, 초), .to()로 연결
circle().fill('#e6a700', 1).to('#e13238', 1),
);
yield* waitUntil('title'); // 명명된 시간 이벤트, 에디터 타임라인에서 드래그 가능
yield* circle().scale(2, 0.6, easeInOutCubic);
});
- 좌표: 뷰 중앙이 원점;
x,y,size,width,height,rotation,scale,opacity,fill,stroke,lineWidth. - 컴포넌트:
Rect(radius로 둥근 모서리),Circle,Line/Spline(points,end로 그리기 효과),Txt,Img,Video,Layout(flexbox:layout direction gap),Code,Latex. - 값을 넣어 호출하면 속성이 설정됨;
(값, 초[, 이징])으로 호출하면 트윈 처리되며yield*해야 함; 인수 없이 호출하면 값을 읽음.
흐름 제어
| 호출 | 효과 |
|---|---|
all(...t) | 함께 실행, 모두 완료될 때까지 기다림 |
any(...t) | 함께 실행, 첫 번째 완료 시까지 기다림 |
chain(...t) | 순차적으로 실행 |
sequence(0.2, ...t) | 각각 이전 것보다 0.2초 후에 시작 (대기하지 않음) |
delay(0.5, t) | 0.5초 후에 시작 |
loop(3, () => t) | 반복 |
waitFor(1.5) | 1.5초 동안 일시 정지 |
waitUntil('event') | 에디터의 명명된 이벤트까지 일시 정지 — 보이스오버 동기화에 사용 |
useDuration('event') | 명명된 이벤트의 길이를 트윈 지속 시간으로 사용 |
렌더링
- 에디터 → 렌더링 패널: 해상도, 프레임 레이트(24/30/60), 범위, 내보내기 유형 선택. RENDER 클릭.
- 출력은
/output폴더에 저장. 기본 내보내기는 이미지 시퀀스를 생성하며, 오디오가 포함된 MP4를 원하면 FFmpeg 내보내기를 추가:
npm install --save @motion-canvas/ffmpeg
// vite.config.ts
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';
import ffmpeg from '@motion-canvas/ffmpeg';
export default defineConfig({plugins: [motionCanvas(), ffmpeg()]});
그런 다음 비디오 설정에서 Video (FFmpeg) 을 선택하세요.
- 해상도를 변경해도 레이아웃이 자동으로 조정되지 않습니다. 레이아웃을 시작하기 전에 최종 크기(예: 1920×1080 또는 1080×1920)를 결정하세요.