Remotion エフェクトガイド

🎨

基本アニメーション (Scene 1-5)

Fade

フェードイン / フェードアウト

要素の透明度を時間経過に応じて変化させる最も基本的なアニメーション。 interpolate関数で複数のキーフレームを設定し、滑らかな出現・消失を実現。

interpolate useCurrentFrame opacity

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

Scale

スプリングスケール

spring関数を使用した物理ベースのスケールアニメーション。 damping（減衰）とstiffness（硬さ）を調整して自然な動きを演出。

spring useVideoConfig transform: scale

                            const scale = spring({
  fps,
  frame,
  config: { damping: 10, stiffness: 100 }
});
                        

Rotate

回転アニメーション

interpolate関数で回転角度を時間に応じて変化。 360度回転でシームレスなループアニメーションも作成可能。

interpolate transform: rotate

                            const rotation = interpolate(
  frame, [0, 90], [0, 360]
);
// transform: rotate(${rotation}deg)
                        

Translate

移動アニメーション

X軸とY軸の両方を同時にアニメーションさせて曲線的な移動パスを実現。複数のキーフレームでより複雑な軌道も設定可能。

interpolate transform: translate

                            const translateX = interpolate(
  frame, [0, 45, 90], [-500, 0, 500]
);
const translateY = interpolate(
  frame, [0, 45, 90], [200, 0, -200]
);
                        

Color Change

色変化アニメーション

interpolateColors関数で色同士を滑らかに補間。背景色やテキスト色を動的に変化させてムードを演出。

interpolateColors background color

                            const color = interpolateColors(
  frame,
  [0, 30, 60, 90],
  ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4"]
);
                        

✨

高度なアニメーション (Scene 6-10)

Bounce

バウンスエフェクト

spring関数のdampingを低く設定してバウンス効果を実現。要素が跳ねるような動きでインパクトのある登場演出に。

spring damping: 5 stiffness: 200

                            const bounce = spring({
  fps, frame,
  config: { damping: 5, stiffness: 200, mass: 0.5 }
});
const translateY = (1 - bounce) * -300;
                        

Spring

スプリング物理演算

スケールと回転を組み合わせた複合アニメーション。物理演算による自然な動きで高級感のある演出を実現。

spring scale + rotate mass: 1

                            const scale = 0.5 + springValue * 0.5;
const rotation = springValue * 10 - 5;
// 複数プロパティを同時にアニメーション
                        

Ripple

波紋エフェクト

複数の円をディレイ付きでアニメーションさせて波紋効果を表現。配列のmapを使って効率的に複数要素を管理。

Array.map delay offset border-radius

                            const ripples = [0, 1, 2].map((i) => {
  const delay = i * 15;
  const rippleFrame = Math.max(0, frame - delay);
  // 各円に異なるタイミングを適用
});
                        

Glow

グローエフェクト

text-shadowの強度を周期的に変化させて発光効果を演出。モジュロ演算でループアニメーションを作成。

text-shadow modulo (%) interpolate

                            const glowIntensity = interpolate(
  frame % 45,  // ループ用のモジュロ
  [0, 22, 45],
  [20, 60, 20]
);
                        

Shadow

ドロップシャドウ

影のオフセットとブラーを動的に変化させて立体感を演出。光源が移動するような効果を表現可能。

text-shadow offset + blur interpolate

                            const shadowOffset = interpolate(
  frame, [0, 45, 90], [0, 30, 0]
);
const shadowBlur = interpolate(
  frame, [0, 45, 90], [10, 50, 10]
);
                        

📝

テキストエフェクト (Scene 11-15)

Typewriter

タイプライターエフェクト

substring()でフレームに応じて表示文字数を制御。点滅カーソルでタイピング中の演出を再現。

substring Math.floor cursor blink

                            const visibleChars = Math.floor(frame / 4);
const displayText = text.substring(0, visibleChars);
const showCursor = frame % 20 < 10;
                        

Glitch

グリッチエフェクト

RGBチャンネルをずらして表示することでデジタルノイズを表現。 random()関数でランダムな揺れを生成。

random RGB split mixBlendMode

                            const glitchActive = frame % 15 < 3;
const offsetX = glitchActive ? 
  (random(`x-${frame}`) - 0.5) * 20 : 0;
// Red/Cyan channelを別々に配置
                        

Neon

ネオンサインエフェクト

複数層のtext-shadowでネオン管の発光を再現。 sin関数で自然な明滅効果を追加。

text-shadow (multi) Math.sin interpolateColors

                            textShadow: `
  0 0 10px ${neonColor},
  0 0 20px ${neonColor},
  0 0 ${glowIntensity}px ${neonColor},
  0 0 ${glowIntensity * 1.5}px ${neonColor}
`
                        

3D Rotate

3D回転エフェクト

perspective と rotateY/rotateX を組み合わせて3D回転を実現。 CSSの3D変換機能をフル活用。

perspective rotateY/rotateX preserve-3d

                            style={{
  perspective: 1000,
}}
// 子要素
transform: `rotateY(${rotateY}deg) rotateX(${rotateX}deg)`
transformStyle: "preserve-3d"
                        

Particle

パーティクルエフェクト

多数の小さな円を生成し、個別にアニメーションさせてパーティクル効果を実現。 random()で初期位置と速度をランダム化。

Array.from random HSL colors

                            const particles = Array.from(
  { length: 50 }, (_, i) => ({
    x: random(`x-${i}`) * 1920,
    speed: random(`speed-${i}`) * 3 + 1,
    hue: random(`hue-${i}`) * 60 + 180
  })
);
                        

🔄

トランジション (Scene 16-20)

Wipe

ワイプトランジション

clip-pathを使って片側から徐々に別の映像を表示するワイプ効果。 polygon()関数で動的にクリップ領域を制御。

clip-path polygon interpolate

                            const wipeProgress = interpolate(
  frame, [0, 60], [0, 100]
);
clipPath: `polygon(0 0, ${wipeProgress}% 0, 
  ${wipeProgress}% 100%, 0 100%)`
                        

Slide

スライドイン / アウト

画面外からスライドして登場し、反対側へ退出するトランジション。条件分岐でイン・アウトを切り替え。

translateX conditional extrapolate

                            const slideIn = interpolate(
  frame, [0, 30], [-1920, 0]
);
const slideOut = interpolate(
  frame, [60, 90], [0, 1920]
);
const translateX = frame < 60 ? slideIn : slideOut;
                        

Zoom

ズームイン / アウト

springを使用したスケールベースのズームトランジション。イン時とアウト時で別々のspring設定を適用。

spring scale opacity

                            const zoomIn = spring({ fps, frame, ... });
const zoomOut = spring({ 
  fps, 
  frame: Math.max(0, frame - 60), 
  ... 
});
const scale = frame < 60 
  ? 0.1 + zoomIn * 0.9 
  : 1 + zoomOut * 2;
                        

Pixelate

ピクセル化エフェクト

SVGフィルターを使用してピクセル化効果を実現。ピクセルサイズを動的に変化させることで解像度の変化を表現。

SVG filter feMorphology imageRendering

                            <filter id="pixelate">
  <feFlood width={pixelSize} height={pixelSize} />
  <feTile result="a" />
  <feMorphology operator="dilate" 
    radius={pixelSize / 2} />
</filter>
                        

Mosaic

モザイクエフェクト

CSSグリッドで配置したタイルを順番にアニメーションさせてモザイク効果を実現。行と列に基づくディレイでウェーブ状の出現を演出。

CSS Grid staggered delay random colors

                            const tiles = Array.from(
  { length: GRID_SIZE * GRID_SIZE }, (_, i) => {
    const row = Math.floor(i / GRID_SIZE);
    const col = i % GRID_SIZE;
    const delay = (row + col) * 2;
    // 対角線上に順次アニメーション
  }
);
                        

🎬 Remotion エフェクトガイド

🎥 デモ動画を再生