theatre-js
Theatre.js Best Practices
Motion design editor and animation library for the web. Provides a visual timeline editor (Studio) with programmatic control.
Installation
# Core + Studio (development)
npm install @theatre/core@0.7 @theatre/studio@0.7
# React Three Fiber integration
npm install @theatre/r3f@0.7
# React utilities
npm install @theatre/react
# Theatric (simplified controls)
npm install theatric
More from noklip-io/agent-skills
three-js
|
71react-19
>
58gsap
Use when implementing web animations, timeline sequencing, scroll-triggered animations, SVG animations, layout transitions, or using GSAP, ScrollTrigger, ScrollSmoother, SplitText, Flip, DrawSVG, MorphSVG, MotionPath, or @gsap/react useGSAP hook.
51payload
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
36nuqs
Use when implementing URL query state in React, managing search params, syncing state with URL, building filterable/sortable lists, pagination with URL state, or using nuqs/useQueryState/useQueryStates hooks in Next.js, Remix, React Router, or plain React.
35base-ui
Base UI reference and workflows for @base-ui/react (unstyled, accessible React components, composition utilities, and form helpers). Use when implementing Base UI components, portals, styling/state hooks, render-prop composition, eventDetails customization, animations, forms/validation, TypeScript typing, CSP/RTL utilities, or checking Base UI docs, issues, or releases.
11