remotion-api

Remotion API Reference

Core API

useCurrentFrame / useVideoConfig

import { useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();           // 현재 프레임 (Sequence 기준 로컬)
const { width, height, fps, durationInFrames } = useVideoConfig();

interpolate

The basics of frame-based animation.

import { interpolate, Easing } from "remotion";

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", });

const translateY = interpolate(frame, [0, 30], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.cubic), });

### spring

물리 기반 0→1 애니메이션. 바운스 효과에 적합.

```tsx
import { spring } from "remotion";

const scale = spring({
  frame: frame - delay,
  fps,
  config: { damping: 12, stiffness: 200 },
});

AbsoluteFill

Full-screen absolute positioning container.

import { AbsoluteFill } from "remotion";

<AbsoluteFill style={{ backgroundColor: "#000" }}>
  {/* 내용 */}
</AbsoluteFill>

Sequence

Scene placement and timing control. fromfor the start frame, durationInFramesfor the duration.

import { Sequence } from "remotion";

<Sequence from={0} durationInFrames={150}>
  <IntroScene />
</Sequence>

premountFor prop: Pre-render N frames before appearance (useful for heavy scenes).

Composition

Root.tsxRegister the render target in idis the composition identifier for the render command.

<Composition
  id="Slides-Markdown"
  component={MyComponent}
  durationInFrames={450}
  fps={30}
  width={1920}
  height={1080}
/>

Transitions (@remotion/transitions)

TransitionSeries

<Sequence> Replaces manual offset calculation. The total length is automatically reduced by the transition duration.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={150}>
    <SceneA />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />
  <TransitionSeries.Sequence durationInFrames={150}>
    <SceneB />
  </TransitionSeries.Sequence>
</TransitionSeries>

Provided Transitions

Transition	Description	Main Options
fade()	Fade in/out	shouldFadeOutExitingScene
slide({ direction })	Push	from-left, from-right, from-top, from-bottom
wipe({ direction })	Overwrite	Supports 8 directions
clockWipe({ width, height })	Clockwise circle	width, height required
flip({ direction })	3D flip	perspective (default 1000)

Timing: linearTiming() or springTiming().

Player (@remotion/player)

Play a Remotion composition in the browser. Real-time preview without file rendering.

import { Player } from "@remotion/player";

<Player
  component={MyComponent}
  inputProps={{ slides: data }}
  durationInFrames={450}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls={false}
  autoPlay={false}
  acknowledgeRemotionLicense
/>

PlayerRef로 seekTo(), play(), pause() controllable.

Rendering

CLI Commands

npx remotion studio                              # Studio 프리뷰
npx remotion render src/index.ts CompositionId out/video.mp4
npx remotion still src/index.ts CompositionId out/frame.png --frame=100
npx remotion benchmark                           # 최적 동시성 측정

Main flags: --codec (h264/h265/vp8/vp9/av1), --concurrency, --scale

remotion.config.ts

import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("jpeg");     // PNG보다 빠름 (투명도 불필요 시)
Config.setOverwriteOutput(true);
Config.overrideWebpackConfig((config) => ({
  ...config,
  module: {
    ...config.module,
    rules: [...(config.module?.rules ?? []), { test: /\.md$/, type: "asset/source" }],
  },
}));

Performance Optimization

• --concurrency: npx remotion benchmarkMeasure the optimal value with
• JPEG > PNG: JPEG is faster when transparency is not needed
• useMemo(), useCallback()Cache expensive calculations with
• --log=verboseCheck slow frames with
• --scale Lower the resolution during testing with the
• GPU-accelerated CSS (box-shadow, filter: blur()) caution — bottleneck during cloud rendering

Easing Reference

import { Easing } from "remotion";

Easing.linear          // 선형
Easing.ease            // CSS ease
Easing.in(Easing.cubic)   // 가속
Easing.out(Easing.cubic)  // 감속 (등장 애니메이션 추천)
Easing.inOut(Easing.cubic) // 가감속
Easing.bezier(x1, y1, x2, y2) // 커스텀 베지어