YMLib - React - Remotion Sequence

Remotion Sequence

2026/03/11

RemotionでSequenceを使ってみます。

◆環境

OS	Windows 11 Home 25H2

あいさつを連続で３つ表示するようにしてみます。

HelloWorld.tsx

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:

import { zColor } from "@remotion/zod-types";
import { Sequence } from "remotion";

import { z } from "zod";

export const myCompSchema = z.object({
  titleText: z.string(),
  titleColor: zColor(),
  logoColor1: zColor(),
  logoColor2: zColor(),
});

export const HelloWorld: React.FC<z.infer<typeof myCompSchema>> = ({
  titleText: propOne,
  titleColor: propTwo,
  logoColor1,
  logoColor2,
}) => {
  const Asa: React.FC = () => (
    <h1 style={{color: 'white'}}>おはよう</h1>
  );

  const Hiru: React.FC = () => (
    <h1 style={{color: 'white'}}>こんにちわ</h1>
  );

  const Yoru: React.FC = () => (
    <h1 style={{color: 'white'}}>こんばんわ</h1>
  );

  return (
    <div
      style={{
        flex: 1,
        backgroundColor: 'blue',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 100,
        fontFamily: 'sans-serif',
      }}
    >
      <Sequence from={0} durationInFrames={50}>
        <Asa />
      </Sequence>
      <Sequence from={50} durationInFrames={50}>
        <Hiru />
      </Sequence>
      <Sequence from={100} durationInFrames={50}>
        <Yoru />
      </Sequence>
    </div>
  );
};

期待通りに動作しました。

▲ PageTop ■ Home