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

theatrejs-gui-web-animation-motion-design-editor.md

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 Stars	12.2k
現バージョン	0.5（1.0 開発中）
対応技術	Three.js、React Three Fiber、HTML/SVG、任意のJSライブラリ

2つのパッケージ構成

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

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

この分離設計が重要です。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 アニメーション）

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

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 経由ですぐに試せます。

<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: コードで構造を定義

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

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 ファイルにエクスポートします。

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.js	GSAP	Framer 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 のタイムラインに似た操作体系で、モーションデザイナーには馴染みやすい

参考

• しば（@shiba_program） — Theatre.js 紹介ポスト
• Theatre.js 公式サイト
• Theatre.js — GitHub リポジトリ
• Theatre.js — Getting started with React Three Fiber
• Theatre.js — Getting started with HTML/SVG
• Mastering Theatre.js Animations — Codrops
• Camera Fly-through on Scroll Using Theatre.js and R3F — Codrops
• GSAP vs Motion: A detailed comparison — Motion
• GSAP ライセンス変更 — Webflow
• Comparing the best React animation libraries for 2026 — LogRocket
• paiza — Theatre.js を使ってみた
• donguri — 簡単！アニメーション。Theatre.js（note）