視覺設計 - RemotionLab

用 CSS 打造影片視覺

Remotion 的影片就是 React 元件，所以你可以用所有你熟悉的 CSS 技巧來設計視覺效果。不同的是，這些樣式會根據 frame 動態變化。

Transform 變換

CSS transform 是製作動畫最常用的屬性。在 Remotion 中，你用 interpolate() 或 spring() 來驅動它：

import { useCurrentFrame, interpolate } from "remotion";
 
export const TransformDemo: React.FC = () => {
  const frame = useCurrentFrame();
 
  const rotate = interpolate(frame, [0, 60], [0, 360], {
    extrapolateRight: "clamp",
  });
 
  const scale = interpolate(frame, [0, 30], [0.5, 1], {
    extrapolateRight: "clamp",
  });
 
  return (
    <div
      style={{
        width: 200,
        height: 200,
        backgroundColor: "#6366f1",
        borderRadius: 16,
        transform: `rotate(${rotate}deg) scale(${scale})`,
      }}
    />
  );
};

常用的 Transform 屬性

屬性	語法	用途
`translateX` / `translateY`	`translateX(100px)`	水平 / 垂直移動
`scale`	`scale(1.5)`	放大縮小
`rotate`	`rotate(45deg)`	旋轉
`skew`	`skewX(10deg)`	傾斜

使用 opacity 做淡入淡出

最簡單也最常用的效果：

const frame = useCurrentFrame();
 
// 淡入（前 20 幀）
const fadeIn = interpolate(frame, [0, 20], [0, 1], {
  extrapolateRight: "clamp",
});
 
// 淡出（最後 20 幀，假設總共 90 幀）
const fadeOut = interpolate(frame, [70, 90], [1, 0], {
  extrapolateLeft: "clamp",
});
 
// 組合：淡入 → 停留 → 淡出
const opacity = fadeIn * fadeOut;

背景漸層動畫

用 interpolate() 驅動漸層角度或色彩：

const frame = useCurrentFrame();
const angle = interpolate(frame, [0, 90], [0, 180]);
 
return (
  <div
    style={{
      width: "100%",
      height: "100%",
      background: `linear-gradient(${angle}deg, #667eea, #764ba2)`,
    }}
  />
);

文字樣式

Remotion 支援所有 CSS 文字屬性。搭配 @next/font 或 Google Fonts 載入字型：

export const StyledText: React.FC = () => {
  const frame = useCurrentFrame();
  const letterSpacing = interpolate(frame, [0, 30], [20, 0], {
    extrapolateRight: "clamp",
  });
 
  return (
    <h1
      style={{
        fontSize: 80,
        fontWeight: 900,
        color: "white",
        letterSpacing,
        textTransform: "uppercase",
      }}
    >
      動態文字
    </h1>
  );
};

圖層與遮罩

用多個 <AbsoluteFill> 疊加圖層：

import { AbsoluteFill } from "remotion";
 
export const Layers: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* 背景層 */}
      <AbsoluteFill style={{ backgroundColor: "#0f0f1a" }} />
 
      {/* 裝飾層 */}
      <AbsoluteFill style={{ opacity: 0.3 }}>
        <div
          style={{
            width: 400,
            height: 400,
            borderRadius: "50%",
            background: "radial-gradient(circle, #6366f1, transparent)",
            position: "absolute",
            top: -100,
            right: -100,
          }}
        />
      </AbsoluteFill>
 
      {/* 內容層 */}
      <AbsoluteFill
        style={{ justifyContent: "center", alignItems: "center" }}
      >
        <h1 style={{ color: "white", fontSize: 64 }}>圖層效果</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

小結

Remotion 影片的視覺設計就是 CSS + React，加上 frame 驅動的動態值。
善用 transform、opacity、漸層等 CSS 屬性，搭配 interpolate() 和 spring() 就能做出大部分效果。
用 <AbsoluteFill> 疊加圖層，建構複雜的視覺組合。