用 Claude Code + Remotion 做有高级感的动效视频：让每一帧都可审查用 Claude Code + Remotion 做有高级感的动效视频：让每一帧都可审查

1import { AbsoluteFill, Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2
3export const Hook: React.FC = () => {
4  const frame = useCurrentFrame();
5  const { fps } = useVideoConfig();
6
7  const progress = interpolate(frame, [0, 0.8 * fps], [0, 1], {
8    easing: Easing.bezier(0.16, 1, 0.3, 1),
9    extrapolateLeft: "clamp",
10    extrapolateRight: "clamp",
11  });
12
13  return (
14    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
15      <h1 style={{ opacity: progress, translate: `0 ${(1 - progress) * 40}px` }}>
16        Every frame, composed.
17      </h1>
18    </AbsoluteFill>
19  );
20};

1# 视频项目约定
2
3## 画面
4- 1920×1080，30fps；安全区四边各 96px，文字不出安全区。
5- 背景 #1F1F1F，正文 #ECECEC，次级 #9FA3A8；金 #D6C8A6 只给一个焦点，蓝 #7CA7FF 只做交互高亮。
6- 字体 Inter / Noto Sans SC；正文不小于 36px，标题 72–120px，一屏最多两级字号。
7
8## 动效
9- 缓动、时长与弹簧只从 src/design/motion.ts 取，场景里不写新的魔法数字。
10- 入场用 ease.out，镜头与跨区位移用 ease.inOut，退场比入场短约三分之一。
11- 一个镜头只有一个主角在动，其余元素静止，或做不超过 4% 的缓慢漂移。
12- 禁止：彩虹渐变、霓虹发光、持续抖动、所有元素同时弹入、超过 10% 的回弹。
13
14## 流程
15- 先写分镜表（镜头、时长、画面、主角动效、转场），确认后再写代码。
16- 每完成一个场景，用 npx remotion still 截取入场中、停留、退场前三帧自查。

1import { Easing } from "remotion";
2
3export const FPS = 30;
4
5/** 秒 → 帧，统一取整，避免半帧 */
6export const sec = (seconds: number) => Math.round(seconds * FPS);
7
8export const ease = {
9  /** 入场：快速起步，长长地收尾 */
10  out: Easing.bezier(0.16, 1, 0.3, 1),
11  /** 镜头推拉、跨区位移 */
12  inOut: Easing.bezier(0.65, 0, 0.35, 1),
13  /** 退场：安静地加速离开 */
14  in: Easing.bezier(0.7, 0, 0.84, 0),
15};
16
17export const duration = {
18  quick: sec(0.3),
19  enter: sec(0.8),
20  exit: sec(0.5),
21};
22
23/** 同组元素之间的错峰间隔 */
24export const stagger = sec(0.1);
25
26export const springs = {
27  /** 无回弹的「推入」 */
28  push: { damping: 200 },
29  /** 轻微回弹后落定，只给点击、落位这类有物理感的瞬间 */
30  settle: { damping: 18, stiffness: 160, mass: 0.9 },
31};
32
33/** 按阅读量估算停留：中文约每秒 6 个字，至少停 1.2 秒 */
34export const holdFor = (text: string) => sec(Math.max(1.2, [...text].length / 6));

1import { interpolate } from "remotion";
2import { duration, ease } from "./motion";
3
4const clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const;
5
6/** 从 start 帧开始入场，返回 0 → 1 */
7export const enter = (frame: number, start: number, length = duration.enter) =>
8  interpolate(frame, [start, start + length], [0, 1], { ...clamp, easing: ease.out });
9
10/** 在 end 帧完成退场，返回 1 → 0 */
11export const exit = (frame: number, end: number, length = duration.exit) =>
12  interpolate(frame, [end - length, end], [1, 0], { ...clamp, easing: ease.in });

1src/
2├── Root.tsx          # 注册 Composition
3├── Launch.tsx        # 主时间线：TransitionSeries 串联场景
4├── scenes/
5│   ├── Hook.tsx
6│   ├── Product.tsx
7│   └── Outro.tsx
8├── components/       # TitleReveal、Camera、Counter、Cursor…
9└── design/
10    ├── motion.ts
11    ├── animate.ts
12    └── theme.ts

1import { linearTiming, TransitionSeries } from "@remotion/transitions";
2import { fade } from "@remotion/transitions/fade";
3import { AbsoluteFill, useVideoConfig } from "remotion";
4import { theme } from "./design/theme";
5import { Hook } from "./scenes/Hook";
6import { Outro } from "./scenes/Outro";
7import { Product } from "./scenes/Product";
8
9export const Launch: React.FC = () => {
10  const { fps } = useVideoConfig();
11  return (
12    <AbsoluteFill style={{ background: theme.bg, color: theme.fg, fontFamily: theme.font }}>
13      <TransitionSeries>
14        <TransitionSeries.Sequence name="Hook" durationInFrames={75} premountFor={fps}>
15          <Hook />
16        </TransitionSeries.Sequence>
17        <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: 15 })} />
18        <TransitionSeries.Sequence name="Product" durationInFrames={150} premountFor={fps}>
19          <Product />
20        </TransitionSeries.Sequence>
21        <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: 15 })} />
22        <TransitionSeries.Sequence name="Outro" durationInFrames={75} premountFor={fps}>
23          <Outro />
24        </TransitionSeries.Sequence>
25      </TransitionSeries>
26    </AbsoluteFill>
27  );
28};

1import { Composition } from "remotion";
2import { Launch } from "./Launch";
3
4export const RemotionRoot: React.FC = () => (
5  <Composition
6    id="Launch"
7    component={Launch}
8    durationInFrames={270}
9    fps={30}
10    width={1920}
11    height={1080}
12  />
13);

1import { useCurrentFrame } from "remotion";
2import { enter } from "../design/animate";
3import { stagger } from "../design/motion";
4
5const segmenter = new Intl.Segmenter("zh", { granularity: "word" });
6
7export const TitleReveal: React.FC<{ text: string; start?: number }> = ({ text, start = 0 }) => {
8  const frame = useCurrentFrame();
9  const words = [...segmenter.segment(text)].map((part) => part.segment);
10
11  return (
12    <h1 style={{ margin: 0, fontSize: 112, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1.15 }}>
13      {words.map((word, i) => {
14        const p = enter(frame, start + i * stagger);
15        return (
16          <span key={i} style={{ display: "inline-block", overflow: "hidden", paddingBottom: "0.1em", verticalAlign: "top" }}>
17            <span style={{ display: "inline-block", translate: `0 ${(1 - p) * 105}%`, opacity: 0.4 + p * 0.6 }}>
18              {word === " " ? "\u00A0" : word}
19            </span>
20          </span>
21        );
22      })}
23    </h1>
24  );
25};

1import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { ease } from "../design/motion";
3
4/** 在整个镜头期间缓慢推近，焦点落在 origin */
5export const Camera: React.FC<{ children: React.ReactNode; origin?: string; to?: number }> = ({
6  children,
7  origin = "50% 50%",
8  to = 1.04,
9}) => {
10  const frame = useCurrentFrame();
11  const { durationInFrames } = useVideoConfig();
12  const scale = interpolate(frame, [0, durationInFrames], [1, to], { easing: ease.inOut });
13
14  return <AbsoluteFill style={{ scale, transformOrigin: origin }}>{children}</AbsoluteFill>;
15};

1import { interpolate, useCurrentFrame } from "remotion";
2import { ease, sec } from "../design/motion";
3
4export const Counter: React.FC<{ to: number; start?: number }> = ({ to, start = 0 }) => {
5  const frame = useCurrentFrame();
6  const value = interpolate(frame, [start, start + sec(1.4)], [0, to], {
7    easing: ease.out,
8    extrapolateLeft: "clamp",
9    extrapolateRight: "clamp",
10  });
11
12  return (
13    <span style={{ fontVariantNumeric: "tabular-nums" }}>
14      {Math.round(value).toLocaleString("en-US")}
15    </span>
16  );
17};

1import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
2import { ease, springs } from "../design/motion";
3
4type Point = { frame: number; x: number; y: number };
5const clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const;
6
7export const Cursor: React.FC<{ path: Point[]; clickAt: number }> = ({ path, clickAt }) => {
8  const frame = useCurrentFrame();
9  const { fps } = useVideoConfig();
10  const frames = path.map((point) => point.frame);
11  const x = interpolate(frame, frames, path.map((point) => point.x), { ...clamp, easing: ease.inOut });
12  const y = interpolate(frame, frames, path.map((point) => point.y), { ...clamp, easing: ease.inOut });
13  const press = interpolate(frame, [clickAt - 2, clickAt, clickAt + 6], [1, 0.86, 1], clamp);
14  const ripple = spring({ frame, fps, delay: clickAt, config: springs.push });
15  const rippleOpacity = frame < clickAt ? 0 : 1 - ripple;
16
17  return (
18    <div style={{ position: "absolute", left: x, top: y }}>
19      <div
20        style={{
21          position: "absolute",
22          width: 72,
23          height: 72,
24          marginLeft: -36,
25          marginTop: -36,
26          borderRadius: "50%",
27          border: "2px solid #7CA7FF",
28          scale: 0.4 + ripple * 0.8,
29          opacity: rippleOpacity,
30        }}
31      />
32      <svg width={36} height={36} viewBox="0 0 24 24" style={{ scale: press, transformOrigin: "0 0" }}>
33        <path d="M4 2l16 9.5-7 1.5-3.5 6.5z" fill="#ECECEC" stroke="#1F1F1F" strokeWidth={1.5} />
34      </svg>
35    </div>
36  );
37};