# theatre-js/theatre

Motion design editor for the web

Repository: https://github.com/theatre-js/theatre
Canonical: https://ross.abutalabs.com/products/theatre
Homepage: https://www.theatrejs.com
Language: TypeScript
License: Apache-2.0
License Family: permissive
Topics: animation, threejs, generative-art, motion-design, r3f, devtools
Last push: 2024-08-14T13:20:18+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 4636, "days_push": 749, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 12632, forks 473 (observed 2026-08-28T04:10:59.448063+00:00)

## What it is
Theatre.js is a JavaScript animation library with a professional motion design toolset, combining a visual sequence/graph editor in the browser with programmatic APIs. It animates any JS variable, making it suitable for THREE.js scenes, React Three Fiber, HTML/SVG, and generative art.

## Use cases
- animate 3d objects in three.js scenes
- keyframe animation editor for react three fiber
- design micro-interactions for web ui
- choreograph generative interactive art
- animate html and svg elements visually
- sync web animations with audio
- fine-tune animation curves with a graph editor

## When to choose
- you need high-fidelity, frame-precise motion graphics on the web
- you want to blend code-driven and visual keyframe editing workflows
- you animate THREE.js or React Three Fiber scenes with cameras, lights, and materials
- you need an extensible animation studio with custom tools

## When to avoid
- you only need simple CSS transitions or basic tweening
- you need a mature 1.0 release and long-term API stability guarantees
- your project is not JavaScript/browser-based
- you require a fully offline design tool without a browser

## Facets
- artifact type: library
- maturity: active
- function: animation, ui-components, developer-tools
- domain: web-development, frontend, graphics
- platform: browser, cross-platform
- tags: motion-design, keyframe-editor, threejs, react-three-fiber, sequence-editor, typescript, game-development, nodejs

## Member repositories
- theatre-js/theatre (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:10:59.448063+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:13:55.033163+00:00, confidence not recorded.
  - readme: https://github.com/theatre-js/theatre (fetched 2026-08-28T04:10:59.448063+00:00, sha 4239837247ec)
  - homepage: https://www.theatrejs.com (fetched 2026-08-29T08:10:50.447463+00:00, sha 22b0f49169d9)
  - site_page: https://www.theatrejs.com/docs/latest (fetched 2026-08-29T08:10:50.456756+00:00, sha 008baa6c154f)
  - site_page: https://www.theatrejs.com/docs (fetched 2026-08-29T08:10:50.458869+00:00, sha 544182763648)
  - site_page: https://www.theatrejs.com/docs/0.5/getting-started/with-react-three-fiber (fetched 2026-08-29T08:10:50.460924+00:00, sha 4df24d85955b)
  - site_page: https://www.theatrejs.com/docs/0.5/getting-started/with-three-js (fetched 2026-08-29T08:10:50.463143+00:00, sha 11713afdb879)
  - site_page: https://www.theatrejs.com/docs/0.5/getting-started/with-html-svg (fetched 2026-08-29T08:10:50.465086+00:00, sha b3e502d18631)
  - site_page: https://www.theatrejs.com/docs/0.5 (fetched 2026-08-29T08:10:50.467186+00:00, sha 008baa6c154f)
  - site_page: https://www.theatrejs.com/docs/0.5/concepts (fetched 2026-08-29T08:10:50.468918+00:00, sha f26b4c0635c0)
  - site_page: https://www.theatrejs.com/docs/0.5/getting-started (fetched 2026-08-29T08:10:50.470563+00:00, sha bef8f92fa86f)
- Data as of 2026-08-30T08:39:29.467469+00:00.