Snowiki
로그인회원가입

azosi · 2026.7.29 01:47 · 조회 1

Remotion Snippets

Remotion 프로젝트에서 자주 쓰는 코드 스니펫 모음. 복사·붙여넣기만 하면 바로 동작한다.

🎬 애니메이션 패턴

1. 페이드 인

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
return <div style={{ opacity }}>Hello</div>;

2. 슬라이드 인 (왼쪽에서)

const x = interpolate(frame, [0, 30], [-100, 0], { extrapolateRight: "clamp" });
return <div style={{ transform: `translateX(${x}%)` }}>Hello</div>;

3. 스케일 업 (스프링)

const scale = spring({ fps, frame, config: { damping: 200 } });
return <div style={{ transform: `scale(${scale})` }}>Hello</div>;

4. 회전

const rotate = interpolate(frame, [0, 90], [0, 360]);
return <div style={{ transform: `rotate(${rotate}deg)` }}>Hello</div>;

5. 흔들기 (Shake)

const shakeX = Math.sin(frame * 0.5) * 10;
return <div style={{ transform: `translateX(${shakeX}px)` }}>Hello</div>;

6. 펄스 (Pulse)

const scale = 1 + Math.sin(frame * 0.2) * 0.1;
return <div style={{ transform: `scale(${scale})` }}>Hello</div>;

⏱️ 타이밍 패턴

1. 일부 구간만 표시 (Freeze portions)

<Sequence from={0} durationInFrames={60}>
  <Intro />
</Sequence>
<Sequence from={60} durationInFrames={120}>
  <Body />
</Sequence>

2. 마지막 N 프레임 강조

const frame = useCurrentFrame();
const { durationInFrames } = useVideoConfig();
const isLast = frame >= durationInFrames - 30;

return <div style={{ opacity: isLast ? 1 : 0.7 }}>...</div>;

3. 시간 기반 카운터

const { fps } = useVideoConfig();
const seconds = Math.floor(frame / fps);
return <h1>{seconds}초</h1>;

🎨 비주얼 패턴

1. 카드뉴스 (반복)

const items = ["A", "B", "C", "D"];

<AbsoluteFill>
  {items.map((item, i) => (
    <Sequence key={i} from={i * 30} durationInFrames={30}>
      <Card text={item} />
    </Sequence>
  ))}
</AbsoluteFill>

2. 자막 (캡션)

import { Caption } from "@remotion/captions";

<AbsoluteFill>
  {captions.map((caption, i) => (
    <Caption key={i} caption={caption} />
  ))}
</AbsoluteFill>

3. 워터마크 (항상 보이게)

<AbsoluteFill>
  <YourVideo />
  <div style={{
    position: "absolute", bottom: 20, right: 20, opacity: 0.7
  }}>
    © My Brand
  </div>
</AbsoluteFill>

4. 그라데이션 배경

<AbsoluteFill style={{
  background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
}} />

5. 그리드 (여러 컴포지션)

<AbsoluteFill style={{
  display: "grid",
  gridTemplateColumns: "1fr 1fr",
  gridTemplateRows: "1fr 1fr",
  gap: 20,
}}>
  <Item /><Item /><Item /><Item />
</AbsoluteFill>

🖼️ 미디어 처리

1. 비디오 부분 재생

<Video
  src={staticFile("clip.mp4")}
  startFrom={30}     // 1초부터
  endAt={90}         // 3초까지
  volume={0.5}
/>

2. 비디오 속도

<Video src={staticFile("clip.mp4")} playbackRate={2} />  // 2배속
<Video src={staticFile("clip.mp4")} playbackRate={-1} /> // 역재생

3. 오디오 페이드

<Audio
  src={staticFile("bgm.mp3")}
  volume={(f) => interpolate(f, [0, 30, 270, 300], [0, 0.6, 0.6, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })}
/>

4. 이미지 lazy load

import { Img, staticFile, delayRender, continueRender } from "remotion";
import { useEffect, useState } from "react";

const [handle] = useState(() => delayRender());
const [loaded, setLoaded] = useState(false);

useEffect(() => {
  const img = new Image();
  img.src = staticFile("big.png");
  img.onload = () => { continueRender(handle); setLoaded(true); };
}, []);

return loaded ? <Img src={staticFile("big.png")} /> : null;

🔧 유틸 패턴

1. 두 컴포지션 결합

import { Composition } from "remotion";

<>
  <Composition id="Main" component={Main} {...mainMeta} />
  <Composition id="Stinger" component={Stinger} {...stingerMeta} />
</>

2. props 동적 변경 감지

useEffect(() => {
  // props 변경 시 처리
}, [inputProps.title]);

3. 데이터 검증 (Zod)

import { z } from "zod";

const schema = z.object({
  title: z.string().min(1).max(100),
  color: z.string().regex(/^#[0-9a-f]{6}$/),
});

<Composition schema={schema} defaultProps={{...}} />

📚 영역 구분

상위 문서: ← Remotion 트러블슈팅 & 운영 출처: Remotion 공식 문서 — Snippets 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜변경
2026-07-29초판 작성 (공식 Snippets 가이드 한글화)
2026-07-29메타데이터 블록을 본문 하단으로 이동

댓글

아직 댓글이 없습니다.

댓글을 작성하려면 로그인이 필요합니다.