Remotion LabRemotion Lab
›視覺設計›光線洩漏效果

光線洩漏效果

使用 @remotion/light-leaks 套件的 <LightLeak> 元件為影片加入 WebGL 光線洩漏效果，支援種子控制、色調偏移和轉場用途。

光線洩漏效果

自 v4.0.415 起可用

@remotion/light-leaks 套件提供 <LightLeak> 元件，可渲染基於 WebGL 的光線洩漏效果。

什麼是光線洩漏

光線洩漏（Light Leaks）是一種電影效果，模擬膠片相機因光線進入相機機體而產生的光暈和色彩擴散效果。在現代影片製作中，這種效果常用於：

  • 場景轉場
  • 復古或電影感風格
  • 強調情感高潮時刻
  • 增加畫面層次和質感

安裝

npm install @remotion/light-leaks

基本用法

<LightLeak> 元件在持續時間的前半段逐漸顯現，在後半段逐漸收縮：

import { LightLeak } from "@remotion/light-leaks";
import { AbsoluteFill } from "remotion";
 
const MyComp = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      <LightLeak
        durationInFrames={60}
        seed={3}
        hueShift={30}
      />
    </AbsoluteFill>
  );
};

控制形狀：seed 屬性

seed 屬性控制光線洩漏的形狀模式。不同的值會產生不同的形狀：

// MyComp.tsx
const MyComp = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      {/* seed 3：預設形狀 */}
      <LightLeak seed={3} durationInFrames={60} />
    </AbsoluteFill>
  );
};
// DifferentSeed.tsx
const MyComp = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      {/* seed 5：不同形狀 */}
      <LightLeak seed={5} durationInFrames={30} />
    </AbsoluteFill>
  );
};

可以嘗試不同的 seed 值（如 0、1、2、5、10、42 等）來找到你喜歡的形狀。

控制顏色：hueShift 屬性

使用 hueShift 屬性以度數（0–360）旋轉光線洩漏的色調：

hueShift 值效果
0（預設）黃色到橘色
120偏向綠色
240偏向藍色
// 預設：黃色到橘色
const DefaultHue = () => (
  <AbsoluteFill style={{ backgroundColor: "black" }}>
    <LightLeak hueShift={0} durationInFrames={60} />
  </AbsoluteFill>
);
 
// 綠色系
const GreenHue = () => (
  <AbsoluteFill style={{ backgroundColor: "black" }}>
    <LightLeak hueShift={120} durationInFrames={60} />
  </AbsoluteFill>
);
 
// 藍色系
const BlueHue = () => (
  <AbsoluteFill style={{ backgroundColor: "black" }}>
    <LightLeak hueShift={240} durationInFrames={30} />
  </AbsoluteFill>
);
// BlueHue.tsx
const MyComp = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      <LightLeak hueShift={240} durationInFrames={30} />
    </AbsoluteFill>
  );
};

用作轉場效果

結合 <TransitionSeries.Overlay> 可以在兩個場景之間的切換點加入光線洩漏效果，而不需要縮短時間軸。

// LightLeakTransition.tsx
import { LightLeak } from "@remotion/light-leaks";
import { TransitionSeries } from "@remotion/transitions";
 
const LightLeakTransition = () => {
  return (
    <TransitionSeries>
      {/* 第一個場景：60 幀 */}
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#0b84f3" />
      </TransitionSeries.Sequence>
 
      {/* 覆疊效果：在切換點持續 20 幀 */}
      <TransitionSeries.Overlay durationInFrames={20}>
        <LightLeak />
      </TransitionSeries.Overlay>
 
      {/* 第二個場景：60 幀 */}
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="pink" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

在中間點，光線洩漏效果會覆蓋大部分畫面，遮蓋場景之間的切換。

安裝 @remotion/transitions

npm install @remotion/transitions

進階用法：同步到時間軸

你可以手動控制 <LightLeak> 的動畫進度，使其與你的時間軸同步：

import { LightLeak } from "@remotion/light-leaks";
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
 
const EFFECT_START = 30;  // 效果開始的幀
const EFFECT_DURATION = 60; // 效果持續的幀數
 
const SyncedLightLeak = () => {
  const frame = useCurrentFrame();
 
  // 計算效果的進度（0 到 1）
  const localFrame = Math.max(0, frame - EFFECT_START);
 
  return (
    <AbsoluteFill>
      {/* 主要內容 */}
      <div style={{ background: "url(background.jpg)", width: "100%", height: "100%" }} />
 
      {/* 光線洩漏效果 */}
      {localFrame <= EFFECT_DURATION && (
        <LightLeak
          durationInFrames={EFFECT_DURATION}
          seed={7}
          hueShift={15}
        />
      )}
    </AbsoluteFill>
  );
};

疊加多個效果

可以同時使用多個不同設定的光線洩漏效果：

import { LightLeak } from "@remotion/light-leaks";
import { AbsoluteFill } from "remotion";
 
const LayeredLightLeaks = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "#1a1a2e" }}>
      {/* 底層效果：暖色調 */}
      <LightLeak
        seed={2}
        hueShift={0}
        durationInFrames={90}
      />
      {/* 頂層效果：冷色調，增加層次 */}
      <LightLeak
        seed={8}
        hueShift={200}
        durationInFrames={90}
      />
    </AbsoluteFill>
  );
};

與影片內容結合

import { LightLeak } from "@remotion/light-leaks";
import { AbsoluteFill, Video, staticFile, useCurrentFrame } from "remotion";
 
export const VideoWithLightLeak = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill>
      {/* 背景影片 */}
      <Video src={staticFile("background.mp4")} />
 
      {/* 在特定時間點加入光線洩漏效果 */}
      {frame >= 60 && frame <= 120 && (
        <LightLeak
          durationInFrames={60}
          seed={4}
          hueShift={30}
        />
      )}
    </AbsoluteFill>
  );
};

屬性一覽

屬性類型預設值說明
durationInFramesnumber必填效果持續的幀數
seednumber0控制效果形狀（不同值有不同形狀）
hueShiftnumber0色調偏移（0–360 度）

注意事項

  • <LightLeak> 使用 WebGL 渲染，需要 WebGL 環境支援
  • 效果在持續時間的前半段顯現，後半段收縮
  • 建議將元件放在 <AbsoluteFill> 內，確保它覆蓋整個畫面
  • 與 <TransitionSeries.Overlay> 搭配使用時，效果最為流暢

參見