theatre

在网页上像剪视频一样做动效，代码实时同步。

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署设计创意 🍴 复刻 500 🐛 待处理 141 👀 关注 121

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 12958

维护状态低维护

是否开源开源

定价模式 🏷️完全免费开源项目，Apache-2.0 许可证，可免费使用和部署。

项目预览

项目数据

分类设计创意

开发团队theatre-js

官网地址https://www.theatrejs.com

GitHubhttps://github.com/theatre-js/theatre

定价模式🏷️完全免费

价格说明开源项目，Apache-2.0 许可证，可免费使用和部署。

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议Apache-2.0

主要语言TypeScript

技术栈/模型animation,devtools,generative-art,motion-design,r3f,threejs

GitHub 星标★ 12958

上线时间2013-12-23 00:00:00

代码更新2024-08-14

仓库体积27.0 MB

本站数据更新2026-11-09

维护状态低维护

收录时间2026-08-09

浏览次数8

项目介绍

Theatre.js 是一个面向 Web 的动效设计编辑器，以 JavaScript 库的形式提供专业级动画创作能力。它解决了传统 Web 动画开发中代码与设计脱节、调试困难、缺乏可视化反馈的痛点，让开发者、设计师和动效师能在同一工具上协作。核心能力包括：基于时间轴的动画编排，支持对任意 JavaScript 对象属性（如 DOM、Three.js 场景、CSS 变量）进行驱动；提供可视化编辑器界面，支持拖拽、曲线调整、实时预览；具备声明式 API 和 React 集成，可无缝嵌入现有前端项目。其独特之处在于“代码优先”理念，动画状态可序列化为 JSON，便于版本管理和动态修改，适合构建复杂、交互式的网页动效。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 12958

技术标签

animation devtools generative-art threejs

使用教程

⚠ 本教程由 AI 依据该项目 README 整理；原始文档不完整，部分步骤为通用流程推断，实际安装请以项目官方文档为准。

难度：入门约 10 分钟部署方式：库/依赖 5 步

⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。

环境要求

可访问 GitHub 与官网的网络环境（README 仅给出这两个入口）
现代化浏览器，用于后续使用可视化动效编辑器
JavaScript/TypeScript 前端项目（Theatre.js 以库形式嵌入现有工程）
Node.js 与包管理器（用于管理前端依赖，README 未指定版本）

安装与启动步骤

1访问官网文档

README 指向官网 https://www.theatrejs.com，安装命令与 API 说明以官网文档为准，此处不提供仓库未写明的安装指令。
2克隆源码仓库

从 README 给出的 GitHub 地址克隆仓库，便于查看源码、示例与各子包结构。
```
git clone https://github.com/theatre-js/theatre.git
```
3进入仓库目录

切换到克隆下来的项目根目录，后续所有查看操作都在该目录内进行。
```
cd theatre
```
4查看项目结构

列出顶层文件与目录，确认 monorepo 中的 packages 与 examples 位置，README 未给出具体构建脚本。
```
ls -la
```
5加入社区求助

遇到安装或版本问题时，可通过 README 中给出的 Discord 邀请链接进入官方社区提问。