Model and control motion design timelines for web interfaces and 3D scenes.
npx skills add https://github.com/noklip-io/agent-skills --skill theatre-js
Please help me install this Agent Skill. Skill: theatre-js Source: https://github.com/noklip-io/agent-skills/tree/main/skills/theatre-js Command: npx skills add https://github.com/noklip-io/agent-skills --skill theatre-js
Theatre.js solves the problem of managing complex animation state by providing a unified timeline and playback system for web apps.
Install the core library and Studio extension, then create a project, a sheet, and an editable object to start animating.
High-intent search queries and answers about installing and using this skill.
To create web animation timelines, use a visual timeline editor to model and control keyframes and sequences across objects, providing a unified playback system for interactive UIs and 3D scenes.
Yes, motion design tooling works with React and Three.js through live-edit integrations, allowing you to visually edit and animate components directly within your R3F scenes.
You need to install the @theatre/core and @theatre/studio npm packages, with optional integrations like @theatre/r3f, to load and run the motion design tooling in your project.
The best way to manage complex animation state is using a unified timeline system that handles playback control, state export, and asset management for production web apps.
Yes, the motion design library supports playback control alongside state export and import, allowing you to manage and transfer animation states and assets for production environments.
A visual timeline editor simplifies managing complex animation state by enabling precise keyframe creation and sequencing across multiple objects, solving the problem of unified playback control.
ms-moarAnimate GLB and GLTF models into scroll-driven timelines for React Three Fiber and Theatre.js.
skyf0xxCoordinate multi-step animation sequences with GSAP timelines.
hasnaxyzRender 3D scenes from json-render specs using React Three Fiber.
elwa2Add CSS and JavaScript animations and micro-interactions to web and mobile interfaces.
