Theatre.js
Keyframe animation editor that scrubs any JS object property on a timeline
Theatre.js pairs a runtime animation core (@theatre/core) with a browser-based visual editor (@theatre/studio) that overlays your running app. You get a sequence editor, dope sheet, graph editor with bezier easing, and a property inspector, and any JS object property you register becomes keyframable. It is stack-agnostic: THREE.js, React Three Fiber, WebGPU, and plain HTML/CSS/SVG are all documented entry points. Built for developers who want After-Effects-style motion control without hand-tuning numbers in code.
npm install @theatre/core @theatre/studioReach for Theatre.js when a timeline of choreographed keyframes across many properties is the actual requirement — GSAP or Framer Motion are better when motion is a reaction to state or scroll. The workflow is two-phase: ship @theatre/studio in dev only, author the sequence by hand in the browser, export the JSON state and load it in production so the editor bundle never reaches users. Watch the staleness: the last public commit and npm publish are both from 2024 at v0.7.2, the promised 1.0 moved to a private repo, and the studio half is AGPL — check that against your licensing before you commit.
Why it is here. The only mature open-source attempt at a real motion-design timeline for the web, and nothing has replaced it. Its two-year public stall is the one thing to weigh before adopting it.
- visual timeline over live JS objects
- dope sheet and bezier graph editor
- THREE.js and R3F integration
- export animation state as JSON
- studio is AGPL, core is Apache-2.0
Verified 2026-08-15. HTTP 200. https://www.theatrejs.com/, https://github.com/theatre-js/theatre, https://github.com/theatre-js/theatre/commits/main, npm registry metadata for @theatre/core
