theatrejs.com

What is Theatre.js?

Theatre.js is a JavaScript animation library paired with a visual editor that runs in the browser. You describe the values you want to animate in code, then use its interface — a sequence editor, dope sheet, graph editor and easing presets — to shape the motion visually. The page frames this as "code vs plus art": build the structure in code, refine the timing and feel in the browser.

What it actually does

Its core job is narrow and useful: it changes JavaScript variables over time. The library does not render anything itself, so it is not tied to one graphics stack. The page states it works with custom THREE.js setups and even hand-written WebGPU libraries, because whatever you animate is just a variable you read elsewhere.

Typical uses:

• Cinematic 3D scenes, such as camera moves, lighting changes and object transforms.
• UI and interface motion where you want to scrub and tune timing by hand.
• Shader or material parameters that need keyframed variation.
• Custom tools built on top of the editor through extensions.

Who it suits

A developer comfortable in JavaScript who wants animation-authoring controls without leaving the web stack. If your team splits between engineers and motion designers, the code-plus-editor split is the main appeal: engineers define the animatable properties, designers adjust keyframes and easing in a shared visual tool.

It is a weaker fit if you need a finished, drop-in character animation system, or if you want zero code involved. The page is explicit that you decide what happens to the variables — the library supplies the timeline, not the visuals.

How it compares in kind

The trade-off is control versus setup. Theatre.js asks you to wire your properties into its state system before the editor becomes useful, and in return you get scrubbing, a dope sheet and graph editing on live values.

Next step

Open the "Get started" flow on Theatre.js and try it on one thing you already animate — a camera position or a panel sliding in. Define that single property, then see whether adjusting its easing curve in the graph editor tells you more than editing numbers in code did. If it does, expand from there.

How do I integrate Theatre.js into an existing Three.js or WebGPU project?

Theatre.js is designed to sit on top of whatever rendering stack you already have. Its core job is to read and write JavaScript variables — it does not own your scene graph, renderer or render loop. That means integration is mostly about deciding which values you want to animate, exposing them to Theatre.js, and then letting the library update them each frame.

The general integration pattern

1. Install and create a project. Add Theatre.js to your build, then create a project and a sheet. A sheet is a container for the objects and props you want to control.
2. Define the state you want to animate. For a Three.js scene this might be a mesh's position, rotation and scale, a camera's focal length, or a light's intensity. For a WebGPU project it might be uniform values that feed your shader.
3. Wrap those values in a Theatre.js object. You declare the shape of the state — for example an object with position: {x, y, z} — and Theatre.js gives you back a proxy you can read from.
4. Drive your render loop from that proxy. Instead of reading from your own variables, read from the Theatre.js object each frame and apply the values to your scene, camera or uniforms.
5. Open the editor in development. The visual editor runs alongside your app, so you can scrub the timeline, block out keyframes in the sequence editor, refine timing in the graph editor and apply easing presets, all while seeing the result in the live scene.

Because Theatre.js only changes JS variables, the same workflow applies whether you use Three.js, a custom WebGPU setup or another library. You keep your existing architecture; Theatre.js becomes the source of truth for the values you choose to hand over.

What this looks like in practice

A common starting point is a single animated object. You create a sheet, add an object with a position and rotation, then in your animation loop set mesh.position.copy(state.position) and mesh.rotation.copy(state.rotation). Once that works, you can add camera moves, light intensity or shader uniforms the same way.

The page evidence also points to official extensions and custom UI, which matter when you want a tailored workflow — moving the camera around for a shot, adjusting lights or tweaking shaders from inside the editor rather than editing code and reloading.

Trade-offs to weigh

The main decision is scope: hand over only the values that benefit from visual timing, and leave everything else in your existing code.

A concrete next step

Pick one object in your scene — say a mesh whose position you currently animate with a hard-coded value — and replace that value with a Theatre.js prop. Run your app in development, open the editor, and keyframe the position. If that round trip feels natural, expand to the camera and lights. If you are evaluating the ecosystem, Three.js is the natural reference for the rendering side, and the Theatre.js project itself is at Theatre.js.

What can I animate with Theatre.js beyond 3D scenes, such as UI interactions?

Theatre.js is not limited to 3D scenes. Its own framing is broad: a JavaScript animation library and visual editor for “any animation,” with cinematic THREE.js scenes and “delightful UI interactions” both named as examples. The key idea is that Theatre.js animates JavaScript variables rather than a specific rendering technology, so whatever those variables control is what moves.

What that means in practice

• UI interactions. Animate values that drive layout, opacity, transforms, colors, or state transitions in your interface. You block out timing in the sequence editor, then refine with the graph editor and easing presets.
• 3D and WebGL. Camera moves, object position and rotation, lighting, and shader parameters are all fair game, including custom THREE.js or WebGPU setups.
• Custom variables. Because it only changes JS variables, you can wire animated values into audio parameters, canvas drawing, CSS custom properties, or your own engine.

Who it suits

Teams that want a code-first workflow but need a visual timeline for timing and polish. The stated approach is “create in code, perfect in the browser,” which fits developers who dislike round-tripping through a separate animation tool.

Trade-off to weigh

Theatre.js gives you a general-purpose animation layer, not a UI component library. You still decide what each animated variable does, so simple CSS transitions may be less setup for trivial effects, while the sequence and graph editors pay off for multi-property, precisely timed sequences.

A concrete next step: pick one small UI interaction you already have, such as a panel opening, expose its transform and opacity as Theatre.js props, and see whether the timeline editing saves you iteration time compared with hand-tuned CSS. For the underlying library, see three.js; for a code-first animation alternative aimed at UI, GSAP is worth comparing.

How does the visual editor workflow differ from defining animations purely in code?

The visual editor changes who does which part of the work and when you see the result, rather than replacing code. In Theatre.js, the split is explicit: you define the animatable state and its structure in JavaScript, then use the browser-based editor to block out timing, adjust curves and refine individual frames. As the site puts it, "Create in code, perfect in the browser."

What shifts when you use the editor

The practical difference is iteration cost. Code-only animation makes every timing change a code change, so people tend to under-tune motion and accept the first version that looks acceptable. A visual layer lowers the cost of the tenth adjustment, which is usually where animation starts to feel right.

Where the trade-off lands

The editor is not automatically better. If your animation is short, driven by user input, or must be generated at runtime from data, keeping it in code is simpler and avoids an authoring dependency. The visual path earns its place when motion is designed rather than computed — cinematic 3D scenes, hero transitions, UI sequences with deliberate easing — and when a designer or motion artist needs to work without editing source.

A useful rule: put what exists in code (which objects, which properties, which ranges), and put how it feels over time in the editor. That keeps the animation reviewable in version control while letting the timing be tuned by eye.

A concrete scenario

You are building a THREE.js product page with a camera move and a few elements that fade and slide in. In code, you would write keyframe arrays and guess at durations, then re-run the build after each tweak. With Theatre.js, you expose the camera position and the element opacities as properties, block the sequence out quickly, add easing presets for flare, then open the graph editor to fix the one transition that feels abrupt. The final values are saved as state your code reads back, so the shipped page runs the same animation without the editor open.

Next step

Start with one property you already animate in code — a camera or a transform — expose it, and rebuild that same motion in the editor. Compare how many passes each version took; that count, not the feature list, tells you whether the visual workflow fits your project. For related approaches, see GSAP for code-first timelines and Rive for a design-tool-centric runtime.

Can I extend Theatre.js with custom UI, tools, or workflows?

Yes. Theatre.js is built to be extended, and its own page frames extensibility as a first-class idea: "Create your own workflow with extensions." The library's core job is narrow and deliberate — it changes JavaScript variables over time — so anything you build on top of those variables is yours to design.

What the extension model means in practice

The page lists custom UI, custom tools and custom workflows, and describes official extensions alongside tools you write yourself. It also states that Theatre.js works with any stack, including a custom THREE.js setup or a WebGPU library of your own, because it only manipulates JS variables rather than owning your renderer.

That separation is the important part. Theatre.js handles authoring and playback of values; your code decides what those values drive. So extension usually takes one of two shapes:

• Authoring-side extensions — new controls, panels or tools that make a particular kind of value easier to tune in the editor.
• Runtime-side extensions — your own logic that reads animated values and applies them to shaders, cameras, lights, physics or DOM state.

Who benefits most

A concrete scenario

Suppose you are building a product configurator in a custom WebGPU renderer. You want a designer to adjust camera framing, material roughness and light intensity without editing code. You expose those three values through Theatre.js, then build a small custom panel that groups them with sensible ranges and labels. The designer iterates in the browser using the sequence editor, dope sheet, graph editor and easing presets; your renderer simply reads the resulting values each frame. No part of your engine needs to change.

Decision criterion

Extend Theatre.js when the gap is in authoring — the values are already animatable, but the controls are awkward for the person tuning them. If instead you need new animation semantics, check whether your requirement reduces to "change a JS variable over time." If it does, extension is straightforward; if it does not, you may be pushing against the library's intended scope.

A useful next step is to sketch the smallest custom tool you actually need — often a single panel over a handful of properties — and confirm it covers a real iteration loop before investing in a broader workflow. For the library itself, see Theatre.js; for the renderer it is commonly paired with, see three.js.

Is Theatre.js free and open source, and what is its pricing model?

Theatre.js is free to use, and its core is open source. The project is developed publicly, and the site notes a community milestone of 7,700 GitHub stars, which is consistent with an actively maintained open-source library rather than a closed commercial product. The page itself shows no pricing table, subscription tiers, or payment platform links, so there is no paid plan presented on the site.

What "free" means in practice

Theatre.js is a JavaScript animation library with a visual editor that runs in the browser. Its job is to drive JavaScript variables, which means it can sit on top of a Three.js scene, a WebGPU renderer, or a custom stack without requiring a specific engine. The practical cost is therefore not a licence fee but the work of integrating the library and deciding how your animation data is stored and shipped.

Open source, with commercial caveats to check

Open source does not automatically mean every part of a product is free forever. Before committing, check the repository's licence file and any separate terms for hosted or team features. The public page evidence does not list pricing or licence details, so treat the licence as the authoritative source.

Who this suits

• Solo developers and small studios building 3D scenes or UI motion who want professional keyframing tools without a subscription.
• Teams already using Three.js or custom renderers who want an editor that changes variables rather than locking them into one engine.
• Learners who want to study a real motion-design toolset in the browser.

A reasonable next step is to open the project's repository, read the licence, and try a small animation — for example, keyframing an object's position and rotation — to confirm the workflow fits before you build it into a larger production.