Theatre.js — GUI でWebアニメーションを直感的に作れるモーションデザインエディタ

しば（@shiba_program）氏のポストが、GUI でWebアニメーションを作成できる JavaScript ライブラリ「Theatre.js」を紹介しています。

GUIで直感的にWebアニメーションが作れる「theatre.js」すごいな。編集した内容が即座に反映されるので、これは微調整捗る。GUIで編集できるから、デザイナーに調整任せることもできそう。デモにある高度なものだけでなく、Webサイトで使うシンプルなアニメーションの作成もかなり楽にしてくれるはず — しば（@shiba_program）

投稿が注目している「デザイナーに調整を任せられる」という点は、Theatre.js の設計思想の核心です。コードでアニメーション対象を定義し、ブラウザ上の GUI エディタで動きを調整する。このワークフローにより、エンジニアとデザイナーの協業が自然に成立します。

Theatre.js とは何か

Theatre.js はフィンランド・ヘルシンキの Theatre.js Oy が開発するオープンソースの Web モーションデザインライブラリです。GitHub Stars 12.2k、1,600以上のプロジェクトが依存しており、Web アニメーション領域で確固たる地位を築いています。

基本情報

項目内容
開発元Theatre.js Oy（ヘルシンキ）
ライセンスApache 2.0（@theatre/core）/ AGPL 3.0（@theatre/studio）
言語TypeScript 82.6%
GitHub Stars12.2k
現バージョン0.5（1.0 開発中）
対応技術Three.js、React Three Fiber、HTML/SVG、任意のJSライブラリ

2つのパッケージ構成

Theatre.js は2つの独立したパッケージで構成されます。

パッケージ役割使用場面
@theatre/coreアニメーション再生エンジン開発・本番の両方
@theatre/studioGUI エディタ（シーケンスエディタ、グラフエディタ、プロパティパネル）開発時のみ

この分離設計が重要です。Studio は開発時にのみ使い、本番ビルドには core だけを含めます。エディタのコードが本番バンドルに入らないため、パフォーマンスへの影響はありません。

4つの基本概念

Theatre.js には、理解すべき4つの概念があります。

Project（プロジェクト）
  └── Sheet（シート）
       └── Object（オブジェクト）
            └── Properties（プロパティ）
                 └── Sequence（シーケンス）でアニメーション化
概念説明例
Projectアニメーションデータの保存単位。ブラウザの localStorage に保持されるgetProject('My App')
Sheet一緒にアニメーションするオブジェクト群のまとまりproject.sheet('Hero Section')
Objectアニメーション対象の要素。複数のプロパティを持つsheet.object('Title', { y: 0, opacity: 1 })
Sequenceシートに紐づくタイムライン。キーフレームで動きを定義sheet.sequence.play()

GUI エディタの主要機能

Theatre.js の最大の特徴は、ブラウザ内で動作するプロフェッショナルな GUI エディタです。

シーケンスエディタ

映像編集ソフトのタイムラインに似た UI で、キーフレームを視覚的に配置・編集できます。

  • ドープシート: キーフレームの位置をタイムライン上で直感的に操作
  • グラフエディタ: イージングカーブをフレーム単位で微調整
  • イージングプリセット: ease-in、ease-out、bounce 等のプリセットをワンクリックで適用

プロパティエディタ

選択したオブジェクトのプロパティをリアルタイムで編集できます。数値スライダー、カラーピッカー、座標入力などが用意されており、変更は即座にプレビューに反映されます。

3D シーンエディタ（R3F 拡張）

React Three Fiber を使う場合、3D シーン内でオブジェクトを直接ドラッグして位置を調整できます。カメラ、ライト、メッシュの位置や回転を視覚的に操作しながらキーフレームを打てるため、3D アニメーション制作のワークフローが大幅に効率化されます。

3つの対応環境と実装例

1. React Three Fiber（3D アニメーション）

1
2

npm install react three @react-three/fiber
npm install @theatre/core@0.5 @theatre/studio@0.5 @theatre/r3f@0.5

 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

import studio from '@theatre/studio'
import extension from '@theatre/r3f/dist/extension'
import { getProject } from '@theatre/core'
import { SheetProvider, editable as e, PerspectiveCamera } from '@theatre/r3f'

// 開発時のみ Studio を起動
if (import.meta.env.DEV) {
  studio.initialize()
  studio.extend(extension)
}

const sheet = getProject('Demo').sheet('Scene')

function App() {
  return (
    <Canvas>
      <SheetProvider sheet={sheet}>
        <PerspectiveCamera theatreKey="Camera" makeDefault />
        <e.pointLight theatreKey="Light" position={[10, 10, 10]} />
        <e.mesh theatreKey="Cube">
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color="orange" />
        </e.mesh>
      </SheetProvider>
    </Canvas>
  )
}

editable as e でラップした要素は全て Studio のエディタに表示され、GUI で位置・回転・スケール・マテリアルを調整できます。

2. HTML/SVG（2D アニメーション）

CDN 経由ですぐに試せます。

 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

<script type="module">
import 'https://cdn.jsdelivr.net/npm/@theatre/browser-bundles@0.5/dist/core-and-studio.js'

const { core, studio } = Theatre
studio.initialize()

const project = core.getProject('Landing Page')
const sheet = project.sheet('Hero')
const heading = sheet.object('Title', {
  y: 0,
  opacity: core.types.number(1, { range: [0, 1] })
})

// DOM 要素とプロパティを同期
const el = document.getElementById('hero-title')
heading.onValuesChange((values) => {
  el.style.transform = `translateY(${values.y}px)`
  el.style.opacity = values.opacity
})

// アニメーション再生
project.ready.then(() => {
  sheet.sequence.play({ iterationCount: Infinity, range: [0, 3] })
})
</script>

3. Three.js（直接利用）

React を使わない純粋な Three.js プロジェクトでも、同じ概念で利用できます。カメラ、ライト、マテリアルカラーなどの3D シーン要素をアニメーション化できます。

開発から本番へのワークフロー

Theatre.js の実務的なワークフローは3ステップで構成されます。

ステップ 1: コードで構造を定義

エンジニアがアニメーション対象のオブジェクトとプロパティをコードで定義します。「何を動かすか」をコードで決めます。

1
2
3
4
5

const hero = sheet.object('Hero Text', {
  y: 0,
  opacity: 1,
  scale: 1,
})

ステップ 2: Studio でアニメーションを作成

ブラウザで Studio を開き、GUI でアニメーションを作成します。「どう動かすか」をビジュアルで決めます。

  1. プロパティを右クリック → 「Sequence」で対象に追加
  2. タイムラインでキーフレームを配置
  3. グラフエディタでイージングを調整
  4. スペースキーでプレビュー再生

この工程はデザイナーだけで完結できます。コードの知識は不要です。

ステップ 3: JSON エクスポートして本番デプロイ

Studio でアニメーションが完成したら、プロジェクトの状態を JSON ファイルにエクスポートします。

1
2
3
4
5
6
7
8
9

import heroState from './hero-animation-state.json'

const project = getProject('Landing Page', { state: heroState })
const sheet = project.sheet('Hero')

// 本番では Studio を読み込まない
project.ready.then(() => {
  sheet.sequence.play({ range: [0, 3] })
})

本番ビルドでは @theatre/studio を import しないだけで、エディタのコードがバンドルから完全に除外されます。

他のアニメーションライブラリとの比較

Web アニメーション領域には複数の有力なライブラリがあります。Theatre.js の位置づけを整理します。

観点Theatre.jsGSAPFramer Motion (Motion)
主な用途GUI でモーションデザインタイムラインベースのアニメーションReact UI トランジション
GUI エディタあり（ブラウザ内蔵）なしなし
タイムラインシーケンスエディタgsap.timeline()なし（LayoutAnimation のみ）
3D 対応Three.js / R3F 拡張座標値の補間のみ3D Transform のみ
フレームワーク任意（React, Vue, Vanilla）任意React のみ
ライセンスApache 2.0 / AGPL 3.0独自（Webflow 競合禁止条項あり）MIT
デザイナー協業エディタで直接作業可能コード知識が必要コード知識が必要
本番バンドルcore のみ（エディタ除外）全体を含む全体を含む

GSAP のライセンス変更に注意

GSAP は2024年10月に Webflow に買収され、2025年4月以降の新ライセンスではWebflow の視覚的アニメーション構築機能と競合するツールでの使用が禁止されています。アニメーション制作ツールやビジュアルビルダーを開発する場合、GSAP のライセンスリスクを考慮する必要があります。Theatre.js は Apache 2.0 + AGPL 3.0 のオープンソースライセンスで、このような制約はありません。

使い分けの指針

シナリオ推奨
3D シーンの映画的なアニメーションTheatre.js + React Three Fiber
デザイナーとエンジニアの協業Theatre.js（GUI エディタ活用）
React UI のマイクロインタラクションFramer Motion
スクロール連動・複雑なシーケンスGSAP（ライセンスに注意）
LP のシンプルなフェードイン/スライドTheatre.js（HTML/SVG）or GSAP

デザイナー協業の実践パターン

しば氏が指摘した「デザイナーに調整を任せられる」という点は、Theatre.js が最も差別化されるポイントです。

従来のワークフロー

デザイナー: 「ここの動きをもう少しゆっくりに」
   ↓
エンジニア: CSSやJSのイージング値を手動で変更
   ↓
デザイナー: 「もうちょっと速く」
   ↓
エンジニア: 値を再調整...（繰り返し）

Theatre.js のワークフロー

エンジニア: アニメーション対象をコードで定義
   ↓
デザイナー: ブラウザで Studio を開いて直接調整
   ↓
デザイナー: 納得いくまでリアルタイムプレビューで微調整
   ↓
エンジニア: エクスポートされた JSON を本番に組み込む

デザイナーが調整した結果は JSON ファイルとしてエクスポートされるため、Git で差分管理が可能です。「いつ誰がどの動きを変えたか」が追跡できます。

注意点と制約

開発状況

Theatre.js は現在 v0.5 で、1.0 の開発が進行中です。開発は一時的にプライベートリポジトリに移行しており、パブリックリポジトリの更新頻度は低下しています。OSS としての公開は維持される予定ですが、1.0 リリースまでは API の変更がある可能性があります。

ライセンスの二重構造

@theatre/core は Apache 2.0 ですが、@theatre/studio は AGPL 3.0 です。Studio を本番環境に含める場合（ユーザーにエディタ機能を提供する場合など）は、AGPL のコピーレフト条項に注意が必要です。通常の使い方（開発時のみ Studio を使い、本番では core のみ）であれば問題ありません。

学習コスト

GUI エディタ自体は直感的ですが、Project / Sheet / Object / Sequence の概念体系を理解する必要があります。After Effects や Blender のタイムラインエディタの経験があれば、移行は比較的容易です。

ローカルストレージ依存

開発中のアニメーションデータはブラウザの localStorage に保存されます。ブラウザデータをクリアすると作業が失われるため、こまめに JSON エクスポートすることが重要です。

まとめ

  • Theatre.js はブラウザ内蔵の GUI エディタを持つモーションデザインライブラリ: シーケンスエディタとグラフエディタで、キーフレームアニメーションを視覚的に作成・微調整できる
  • デザイナーとエンジニアの協業を自然にする設計: エンジニアがコードで「何を動かすか」を定義し、デザイナーが GUI で「どう動かすか」を調整する分業が成立する
  • 3環境に対応: React Three Fiber（3D）、HTML/SVG（2D）、Three.js（直接利用）の3つの環境で利用可能
  • 本番バンドルへの影響なし: Studio はビルド時に除外され、core のみが本番に含まれる。アニメーションデータは JSON としてエクスポート
  • GSAP のライセンスリスクを回避: GSAP は Webflow 買収後に競合禁止条項が追加された。Theatre.js は Apache 2.0 / AGPL 3.0 のオープンソースで制約が少ない
  • v0.5 で1.0 開発中: API の安定性には注意が必要だが、12.2k Stars と1,600+の依存プロジェクトが実績を示している
  • 映像編集経験があれば移行容易: After Effects のタイムラインに似た操作体系で、モーションデザイナーには馴染みやすい

参考