Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theatre-js/theatre
Motion design editor for the web
https://github.com/theatre-js/theatre
animation devtools generative-art motion-design r3f threejs
Last synced: 4 days ago
JSON representation
Motion design editor for the web
- Host: GitHub
- URL: https://github.com/theatre-js/theatre
- Owner: theatre-js
- License: apache-2.0
- Created: 2013-12-23T11:02:52.000Z (almost 11 years ago)
- Default Branch: main
- Last Pushed: 2024-08-14T13:20:18.000Z (4 months ago)
- Last Synced: 2024-11-30T08:50:28.797Z (13 days ago)
- Topics: animation, devtools, generative-art, motion-design, r3f, threejs
- Language: TypeScript
- Homepage: https://www.theatrejs.com
- Size: 26.4 MB
- Stars: 11,406
- Watchers: 115
- Forks: 363
- Open Issues: 122
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - theatre-js/theatre - Motion design editor for the web (TypeScript)
- awesome-game-engine-dev - Theatre - Motion design editor for the web. (Libraries / JavaScript)
- awesome-github-repos - theatre-js/theatre - Motion design editor for the web (TypeScript)
- awesome-github-star - theatre - js | 9843 | (TypeScript)
- StarryDivineSky - theatre-js/theatre
README
Motion Design, for the web
> ✨ Update: Theatre.js 1.0 is around the corner. We have _temporarily_ moved development to a private repo so we can iterate faster. We'll push our work back to this public repo soon. Terms and license will remain OSS, as before. (Also, [we're hiring – join the core team!](https://www.theatrejs.com/join)).
Theatre.js is an animation library for high-fidelity motion graphics. It is
designed to help you express detailed animation, enabling you to create
intricate movement, and convey nuance.Theatre.js can be used both programmatically _and_ visually.
---
You can use Theatre.js to:
- Animate 3D objects made with THREE.js or other 3D libraries
![s](https://raw.githubusercontent.com/AriaMinaei/theatre-docs/main/docs/.vuepress/public/preview-3d-short.gif)
Art by
[drei.lu](https://sketchfab.com/models/91964c1ce1a34c3985b6257441efa500)- Animate HTML/SVG via React or other libraries
![s](https://raw.githubusercontent.com/AriaMinaei/theatre-docs/main/docs/.vuepress/public/preview-dom.gif)
- Design micro-interactions
![s](https://raw.githubusercontent.com/AriaMinaei/theatre-docs/main/docs/.vuepress/public/preview-micro-interaction.gif)
- Choreograph generative interactive art
![s](https://raw.githubusercontent.com/AriaMinaei/theatre-docs/main/docs/.vuepress/public/preview-generative.gif)
- Or animate any other JS variable
![s](https://raw.githubusercontent.com/AriaMinaei/theatre-docs/main/docs/.vuepress/public/preview-console.gif)
## Documentation and Tutorials
The docs are at [theatrejs.com/docs](https://www.theatrejs.com/docs):
- [Video tutorials](https://www.youtube.com/channel/UCsp9XOCs8v2twyq5kMLzS2Q)
- [Crash course](https://www.youtube.com/watch?v=icR9EIS1q34)
- [Animating with music](https://www.youtube.com/watch?v=QoS4gMxwq_4)
- [Yuri Artiukh](https://twitter.com/akella)'s
[stream](https://youtu.be/qmRqgFbNprM?t=3462) with a section on using
Theatre.js with THREE.js
- \## Community and support
Join our friendly community on [Discord](https://discord.gg/bm9f8F9Y9N), follow
the updates on [twitter](https://twitter.com/theatre_js) or write us an
[email](mailto:[email protected]).## Development and contributing
If you want to change the source of Theatre, have a look at the guide
[here](./CONTRIBUTING.md).### Proposing fixes and changes
You can always get help with bugfixes or discuss changes with our community on
[Discord](https://discord.gg/bm9f8F9Y9N), or directly open an issue on Github.### Helping with outstanding issues
Feel free to chime in on any
[issue](https://github.com/AriaMinaei/theatre/issues). We have also labeled some
issues with
["Help wanted"](https://github.com/AriaMinaei/theatre/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22)
or
["Good first issue"](https://github.com/AriaMinaei/theatre/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22)
if you're just getting started with the codebase.### Helping with documentation
The documentation website's repo is
[here](https://github.com/theatre-js/theatre-docs/).### Writing/recording tutorials
If you make tutorials or video content about Theatre, tell us to showcase it
here :)## License
Your use of Theatre.js is governed under the Apache License Version 2.0:
- Theatre's core (`@theatre/core`) is released under the Apache License. Same
goes for most packages in this repository.
- The studio (`@theatre/studio`) is released under the AGPL 3.0 License. This is
the package that you use to edit your animations, setup your scenes, etc. You
only use the studio during design/development. Your project's final bundle
only includes `@theatre/core`, so only the Apache License applies.