Remotionとは？

https://www.remotion.dev/
Reactで動画が作れるというもの

Webブラウザで動くものなら何でも動く雰囲気があるのでWebGLとかで動画作ったら楽しそう

うじまる

yarn create video か npx create-video をするとテンプレートから作成される
便利

うじまる

エントリーポイント

import {registerRoot} from 'remotion';
import {RemotionVideo} from './Video';

registerRoot(RemotionVideo);

Reactで言う render が registerRoot っぽい

うじまる

テンプレートから生成されると npm start でプレビューできるPlayerが起動する

うじまる

このプレビューは単純にReactのコンポーネントが描画されているだけっぽい（この時点では動画ではない）
ので、プレビューも普通のHotReloadと同じような感じでおこなわれる

うじまる

この部分に表示されるのが Composition コンポーネントで定義したもの

This is the component to use to register a video to make it renderable and make it show up in the sidebar of the Remotion Player.

プレビューのために定義するものっぽい

うじまる

この部分に表示されるものが Sequence コンポーネントで定義したもの
https://www.remotion.dev/docs/sequence

動画編集とかのタイムラインのクリップ的な感じかな？

うじまる

現在のFrame情報・Video全体の情報はhooksとして提供されている

うじまる

ここでCSSアニメーションを使えるのか？という感じになるが結果としては無理そう

このフレームワークは、動画の現在のFrameをStateとして持つアプリケーションとして捉えるのが良さそう。
結果として、CSSアニメーションは何らかの値でアニメーションが進むものではないのでこのフレームワークでは利用出来ない（多分）

うじまる

代わり(?)として２つほどヘルパー関数が提供されている

https://www.remotion.dev/docs/spring

うじまる

interpolate

補完してくれる関数

シグネチャはこんな感じ

declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
export declare function interpolate(
    input: number,
    inputRange: [number, number],
    outputRange: [number, number],
    options?: {
        easing?: (input: number) => number;
        extrapolateLeft?: ExtrapolateType;
        extrapolateRight?: ExtrapolateType;
}): number;

optionで easing が指定できるがガッツリ関数を定義しないといけないのでCSSAnimation的なノリでeasingがやりづらそう。（ヘルパー関数としてPR出すのはあり・・？）

うじまる

spring

物理的な挙動をしてくれるそれっぽい

interpolate のinputとして使うと良さそう

うじまる

実際に簡単な動画を作ってみた
Reactで完結してるが状態管理がちょっと面倒
アニメーションにCSSアニメーションを使えないのがしんどいなーという感じ

うじまる

まとめ

Reactで作った物が動画になるのは面白い
ただ、慣れるまで・ベストな状態管理が見いだせるまではちょっとしんどい
CSSアニメーションに対応してほしい
図形をアニメーションに使うならSVGを使ったほうが良い
SSRもできるっぽいのでユーザーのリクエストに応じてコンテンツを変えるとか楽しそう
mp4 -> gif にして動くOGPとか（負荷がつらそうだけど）

hashito

参考になりました。
Reactは不慣れなのでCSSができればいいと思ったのですが、CSSが未対応というのが残念です。