Revideo 애니메이션 & 디자인

Revideo의 시각 디자인과 애니메이션 영역을 한 곳에 모았다. Motion Canvas의 scene-graph API, 컴포넌트 분리 패턴, 이모지, Rive 통합, Three.js 3D까지 다룬다. (Revideo는 Motion Canvas에서 포크됐기 때문에 모든 애니메이션 API는 Motion Canvas의 flow · signals · tweening을 그대로 따른다.)

---

📚 Revideo 애니메이션 & 디자인 가이드

#	페이지	영문	핵심 내용
1	Revideo Motion Canvas 기초	Motion Canvas	Scene graph, Node, Signal, Tween
2	Revideo Scene 컴포넌트 논리적 분리	Logical Separation	<Rect> <Txt> 분리, prop 패턴
3	Revideo 이모지 활용	Emojis	Twemoji 폰트로 이모지 렌더링
4	Revideo Rive 애니메이션	Rive Animations	Rive 파일 임포트 + 상태 머신
5	Revideo Three.js 3D 애니메이션	3D with Three.js	Three.js 통합, 3D scene

---

🎯 상황별 가이드

목표	먼저 볼 페이지
Scene graph · Signal · Tween 기본기	Revideo Motion Canvas 기초
큰 장면을 작은 컴포넌트로 쪼개기	Revideo Scene 컴포넌트 논리적 분리
이모지를 디자인 요소로 활용	Revideo 이모지 활용
디자이너가 만든 Rive 애니메이션 통합	Revideo Rive 애니메이션
3D 오브젝트 / WebGL 효과	Revideo Three.js 3D 애니메이션

---

⚡ 빠른 예시 (Scene에 <Txt> + signal로 fade-in)

import {Txt, makeScene2D} from '@revideo/2d';
import {createRef, waitFor} from '@revideo/core';

export default makeScene2D(function* (view) {
  const title = createRef<Txt>();
  yield view.add(
    <Txt ref={title} fontSize={80} fill={'#fff'} text={'Hello, Revideo!'} />,
  );
  // 1초간 페이드인 (opacity 0 → 1)
  yield* title().opacity(1, 1);
  yield* waitFor(2);
});

---

📚 영역 구분

• 이전 hub: Revideo 시작하기 → 이전 hub
• 렌더링으로 출력: Revideo 렌더링 → 다음 hub
• 웹앱 통합: Revideo 웹앱 & Player → 다음 hub
• 참고 — Animations 상세 API: https://midrender.com/revideo/docs/animations (flow · signals · tweening · layouts · shaders 등 20+ 항목)

상위 문서: ← Revideo 사용 가이드 출처: Revideo 공식 문서 — Designing Animations / Animations + Animations 한글화 (2026-07-29) 공급사: Revideo (현 Midrender)

변경 이력

날짜	변경
2026-07-29	초안 작성 — Revideo 애니메이션 & 디자인 5개 영역 한글화
2026-07-29	메타데이터 블록을 본문 하단으로 이동