Remotion LabRemotion Lab
›視覺設計›星爆視覺效果

星爆視覺效果

使用 @remotion/starburst 套件的 <Starburst> 元件在 Remotion 中渲染基於 WebGL 的復古星爆放射線圖案，可自訂射線數、顏色和旋轉角度。

星爆視覺效果

自 v4.0.435 起可用

@remotion/starburst 套件提供 <Starburst> 元件，可渲染基於 WebGL 的靜態復古星爆放射線圖案。

什麼是星爆效果

星爆效果（Starburst）是一種從中心點向外放射的射線圖案，常見於：

  • 復古海報和廣告設計
  • 強調某個重點時的背景裝飾
  • 動態展示場景的背景元素
  • 促銷活動或公告的視覺效果

安裝

npm install @remotion/starburst

基本用法

// MyComp.tsx
import { Starburst } from "@remotion/starburst";
import { AbsoluteFill } from "remotion";
 
const MyComp = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      <Starburst
        durationInFrames={60}
        rays={16}
        colors={["#ffdd00", "#ff8800"]}
      />
    </AbsoluteFill>
  );
};

屬性一覽

屬性類型預設值說明
raysnumber必填射線數量
colorsreadonly string[]必填顏色陣列（交替顯示）
durationInFramesnumber可選動畫持續幀數
rotationnumber0旋轉角度（度數）
smoothnessnumber0射線邊緣平滑度
vignettenumber1暗角強度
originOffsetXnumber0原點水平偏移
originOffsetYnumber0原點垂直偏移

射線數量

使用 rays 屬性控制放射線的數量：

// 少量射線（12 條）：簡潔風格
<Starburst
  rays={12}
  colors={["#ffdd00", "#ff8800"]}
  durationInFrames={60}
/>
 
// 中等射線（24 條）：標準風格
<Starburst
  rays={24}
  colors={["#ffdd00", "#ff8800"]}
  durationInFrames={60}
/>
 
// 多量射線（48 條）：密集光芒風格
<Starburst
  rays={48}
  colors={["#ffdd00", "#ff8800"]}
  durationInFrames={60}
/>

顏色設定

colors 屬性接受顏色陣列，射線會依序交替使用這些顏色：

// 黃色和橘色（復古風格）
<Starburst
  rays={16}
  colors={["#ffdd00", "#ff8800"]}
  durationInFrames={60}
/>
 
// 三色交替（彩虹效果）
<Starburst
  rays={18}
  colors={["#ff4444", "#44ff44", "#4444ff"]}
  durationInFrames={60}
/>
 
// 黑白（對比強烈）
<Starburst
  rays={20}
  colors={["#ffffff", "#222222"]}
  durationInFrames={60}
/>
 
// 柔和漸層感（相近色系）
<Starburst
  rays={24}
  colors={["#ffd700", "#ffa500", "#ff6347", "#ff4500"]}
  durationInFrames={60}
/>

旋轉效果

使用 rotation 屬性偏移射線的角度（度數）：

// Rotated.tsx
const MyComp = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "black" }}>
      <Starburst
        rays={12}
        colors={["#ffdd00", "#ff8800"]}
        rotation={45}
        durationInFrames={30}
      />
    </AbsoluteFill>
  );
};

結合 useCurrentFrame() 可以創造旋轉動畫：

import { Starburst } from "@remotion/starburst";
import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const RotatingStarburst = () => {
  const frame = useCurrentFrame();
 
  // 每幀旋轉 1 度
  const rotation = frame;
 
  return (
    <AbsoluteFill style={{ backgroundColor: "#1a1a2e" }}>
      <Starburst
        rays={16}
        colors={["#ffdd00", "#ff8800"]}
        rotation={rotation}
        durationInFrames={360} // 完整旋轉一圈
      />
    </AbsoluteFill>
  );
};

平滑度設定

smoothness 屬性控制射線邊緣的平滑程度：

// 銳利邊緣（預設）
<Starburst rays={16} colors={["#fff", "#000"]} smoothness={0} />
 
// 柔和邊緣
<Starburst rays={16} colors={["#fff", "#000"]} smoothness={0.5} />
 
// 極度平滑（幾乎看不出射線邊界）
<Starburst rays={16} colors={["#fff", "#000"]} smoothness={0.9} />

暗角效果

vignette 屬性控制四角的暗角（漸暗）強度：

// 無暗角
<Starburst rays={16} colors={["#ffdd00", "#ff8800"]} vignette={0} />
 
// 標準暗角（預設）
<Starburst rays={16} colors={["#ffdd00", "#ff8800"]} vignette={1} />
 
// 強暗角
<Starburst rays={16} colors={["#ffdd00", "#ff8800"]} vignette={2} />

偏移原點

使用 originOffsetX 和 originOffsetY 將放射中心點移離畫面中心：

// 中心點偏向右上角
<Starburst
  rays={16}
  colors={["#ffdd00", "#ff8800"]}
  originOffsetX={0.3}  // 向右偏移 30%
  originOffsetY={-0.2} // 向上偏移 20%
  durationInFrames={60}
/>

完整動畫範例

結合多個屬性創造動態的星爆效果：

import { Starburst } from "@remotion/starburst";
import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  interpolate,
} from "remotion";
 
export const AnimatedStarburst = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
 
  // 緩慢旋轉
  const rotation = frame * 0.5;
 
  // 動態平滑度（從銳利到柔和再到銳利）
  const smoothness = interpolate(
    frame,
    [0, durationInFrames / 2, durationInFrames],
    [0, 0.5, 0],
    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
  );
 
  return (
    <AbsoluteFill style={{ backgroundColor: "#1a0a2e" }}>
      <Starburst
        rays={20}
        colors={["#9b59b6", "#8e44ad", "#6c3483", "#4a235a"]}
        rotation={rotation}
        smoothness={smoothness}
        vignette={1.5}
        durationInFrames={durationInFrames}
      />
    </AbsoluteFill>
  );
};

作為背景元素

星爆效果非常適合用作主要內容的背景：

import { Starburst } from "@remotion/starburst";
import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const ProductShowcase = () => {
  const frame = useCurrentFrame();
  const rotation = frame * 0.3; // 緩慢旋轉
 
  return (
    <AbsoluteFill style={{ backgroundColor: "#ff6b35" }}>
      {/* 星爆背景 */}
      <Starburst
        rays={24}
        colors={["#ff8c55", "#ff6b35"]}
        rotation={rotation}
        vignette={0.5}
        durationInFrames={300}
      />
 
      {/* 前景內容 */}
      <AbsoluteFill
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <div
          style={{
            backgroundColor: "white",
            borderRadius: "50%",
            width: 300,
            height: 300,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: 48,
            fontWeight: "bold",
            color: "#ff6b35",
          }}
        >
          NEW!
        </div>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

與過場動畫結合

import { Starburst } from "@remotion/starburst";
import { AbsoluteFill, interpolate, useCurrentFrame, spring, useVideoConfig } from "remotion";
 
export const StarbustReveal = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  // 縮放入場動畫
  const scale = spring({
    frame,
    fps,
    config: { damping: 12, stiffness: 100 },
    from: 0,
    to: 1,
  });
 
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#2c3e50",
        transform: `scale(${scale})`,
      }}
    >
      <Starburst
        rays={16}
        colors={["#f1c40f", "#e67e22"]}
        rotation={frame * 0.2}
        vignette={1}
        durationInFrames={120}
      />
      <AbsoluteFill
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "white",
          fontSize: 72,
          fontWeight: "bold",
        }}
      >
        SALE!
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

注意事項

  • <Starburst> 使用 WebGL 渲染，需要 WebGL 環境支援
  • colors 陣列中至少需要 2 個顏色
  • rays 建議使用偶數值，以確保對稱的視覺效果
  • originOffsetX 和 originOffsetY 的值範圍是 -1 到 1（代表相對於畫面大小的比例）

參見