部品を組み合わせて、シーンに。
Rect、Text、Image、Group を組み合わせてシーンを作り、interpolate() とイージングで動きを付けます。作った部品は、ほかの React コンポーネントと同じように別のプロジェクトでも使えます。
コードで、
動画を作る。
- 01 書く
- いつもの React で。使い慣れたエディタで、コンポーネントとフックを使って動画を作れます。
- 02 プレビュー
- 1 フレームずつ確認。ブラウザで好きな位置をプレビュー。デスクトップアプリでは音声も同期して再生できます。
- 03 書き出す
- H.264 と AAC。ブラウザ、アプリ、コマンドラインから MP4 に書き出せます。
- 04 ライセンス
- MIT または Apache-2.0。無料で使えるオープンソース。エンジンは Rust で開発しています。
Celesta の特長
どの瞬間も、
コードで描く。
useCurrentFrame() で現在のフレーム番号を取得し、その値をもとに位置や透明度、テキストを変えられます。各フレームを個別に描画できるので、好きな位置でのプレビューも、動画の書き出しも同じコードで行えます。
見たいフレームを確認。
ブラウザでは映像をプレビューできます。デスクトップアプリでは音声も同期して再生でき、コードを保存するとプレビューが更新されます。
プレビューの使い方MP4 で書き出す。
H.264 の映像と AAC の音声を、再生やアップロードに使いやすい MP4 にまとめます。ブラウザ、デスクトップアプリ、コマンドラインから書き出せます。
書き出しの使い方活用例
コードで広がる、
動画の表現。
- 01タイトル・オープニング
- 02口パク付きの会話シーン
- 03データを使った動画
- 04コードで生成するループ映像
はじめ方
まずは、
ファイルひとつ。
アプリには Node.js と FFmpeg が含まれているので、別途インストールする必要はありません。Celesta は現在も開発を進めています。不具合の報告や機能の提案は GitHub で受け付けています。
Celesta をダウンロードセットアップ
- 01
アプリをインストール。
macOS 版と Windows 版をダウンロードできます。
- 02
動画のコードを書く。
好きなフォルダに
.tsxファイルを作ります。 - 03
確認して、MP4 に書き出す。
Celesta でファイルを開くとプレビューできます。コードを保存するたびに表示が更新され、完成した動画は MP4 に書き出せます。