Chinese-language playground of code-rendered motion effects, organised as 12 buildable routes from typography through 3D to video workflows.
motion
codemotion.cc
Visitopens in a new tab
Theatre.js
theatrejs.com
JavaScript animation library whose visual studio keyframes any JS variable, from THREE.js scenes to HTML, SVG and UI micro-interactions.
What is Theatre.js?
Theatre.js is a JavaScript animation library paired with a visual studio. You block out a sequence in the timeline editor, refine timing in the dope sheet, then tune curves in the graph editor with easing presets; the studio stores those keyframes as a JSON state that your app loads at runtime.
Because it only changes JS variables, it drives THREE.js and React Three Fiber scenes, HTML/SVG through React, micro-interactions, or any other value you expose — the docs list separate getting-started paths for each. Extensions add camera, light and shader controls, and you can write your own. The core package @theatre/core is Apache-2.0 licensed; the editing studio @theatre/studio is AGPL-3.0, and only the core is included in a production bundle.
Best for
- Keyframing cinematic THREE.js or React Three Fiber scenes
- Authoring HTML/SVG micro-interactions with a visual timeline
- Teams that want animation authored in a GUI but baked into plain JS
Key features
- Sequence editor, dope sheet and graph editor with easing presets
- Animates any JavaScript variable, so it fits THREE.js, WebGPU libraries or CSS
- Getting-started guides for React Three Fiber, THREE.js and HTML/CSS/SVG
- Extensible studio for custom cameras, lights, shaders and tools
- Apache-2.0 core and AGPL-3.0 studio, per the GitHub repository
Related resources
Cuelume is a small JavaScript library that adds synthesized interaction sounds to buttons, inputs, selects and navigation.
motion
cuelume.dev
MIT-licensed React package of 29 named loading indicators, each accepting size, colour and duration props and respecting reduced-motion preferences by default.
motion
loading.dev