What is this?
Theatre.js is an animation library for high-fidelity motion graphics on the web. It is designed for detailed animation — intricate movement and nuance — and can be used both programmatically and visually.
Theatre.js is an animation library for high-fidelity motion graphics on the web. It is designed for detailed animation — intricate movement and nuance — and can be used both programmatically and visually.Is it a library I code against, or a visual editor app?Both halves work together: @theatre/core is the runtime library your project ships with, while @theatre/studio is the visual editor you use only while designing. Your final bundle includes only the core.
Both halves work together: @theatre/core is the runtime library your project ships with, while @theatre/studio is the visual editor you use only while designing. Your final bundle includes only the core.How do I get it into my project and start using it?Add the packages to a JavaScript project — @theatre/core at runtime and @theatre/studio while developing — then follow the crash course and docs at theatrejs.com/docs.
Add the packages to a JavaScript project — @theatre/core at runtime and @theatre/studio while developing — then follow the crash course and docs at theatrejs.com/docs.Do I need to be using THREE.js or React for it to work?No — it integrates well with both, but at bottom it can animate any JavaScript variable, so it fits whatever stack you already have.
No — it integrates well with both, but at bottom it can animate any JavaScript variable, so it fits whatever stack you already have.Is the project under active development right now?Development has temporarily moved to a private repo so the team can iterate faster on Theatre.js 1.0. They plan to push work back to the public repo soon, and the terms and license will remain OSS.
Development has temporarily moved to a private repo so the team can iterate faster on Theatre.js 1.0. They plan to push work back to the public repo soon, and the terms and license will remain OSS.Can I ship commercial projects with it, given the dual Apache and AGPL licenses?Yes. Core is Apache-2.0, and that is the license of your final bundle. The AGPL-3.0 studio is only used during design and development, so it never ships to your users.
Yes. Core is Apache-2.0, and that is the license of your final bundle. The AGPL-3.0 studio is only used during design and development, so it never ships to your users.What can I use it to animate?3D objects made with THREE.js or other 3D libraries, HTML/SVG via React, micro-interactions, generative interactive art — or any other JS variable you want to choreograph.
3D objects made with THREE.js or other 3D libraries, HTML/SVG via React, micro-interactions, generative interactive art — or any other JS variable you want to choreograph.Are there tutorials to learn from?Yes — theatrejs.com/docs hosts video tutorials and a crash course, plus guides like animating with music and Yuri Artiukh's stream covering Theatre.js with THREE.js.
Yes — theatrejs.com/docs hosts video tutorials and a crash course, plus guides like animating with music and Yuri Artiukh's stream covering Theatre.js with THREE.js.What are similar projects?ascii, threejs-architecture-effects, sylva, awesome-opus5-5-videos, editor, natural-disasters, liquid-taffy, trianglify
ascii, threejs-architecture-effects, sylva, awesome-opus5-5-videos, editor, natural-disasters, liquid-taffy, trianglifyWhich topics is it in?design-tool, motion-design, generative-art, creative-coding, devtools, threejs, svg, editor, 3d, agpl, animation, html
design-tool, motion-design, generative-art, creative-coding, devtools, threejs, svg, editor, 3d, agpl, animation, html