vvvivaldy/curio-motion

Code-authored 2D animation with PixiJS and Remotion. Draw characters as TypeScript contours, author their motion, and export a film you can inspect frame by frame.
Quick start · Code example · Documentation · Contributing · Русский
12 seconds · 1280 × 720 · 24 fps · silent. Watch the full film. The GIF above comes from the actual Remotion export; the scene itself draws new contours for every frame.
### A second character, a different action
10 seconds · 960 × 640 · 30 fps · silent. Watch Amber's film. A separate character, mechanical grippers and a held prop use the same typed scene, contour, contact and Remotion bridge APIs. The first film and GIF above are preserved. See the reuse report.
## Why Curio Motion?
Curio Motion explores how developers and coding agents can author animation as readable, reviewable source. A whole character reference and an explicit action guide the author; TypeScript defines the resulting drawing and motion.
Editable geometry. PixiJS draws continuous silhouettes, faces, hands and scenery, without sliced image parts or raster scene textures.
Seekable motion. A pure pose function evaluates the requested time directly, including backward and random seeks.
One frame owner. Remotion controls composition, the live Player and official MP4 export. PixiJS draws the frame.
Local workflow. Inspect the example, change the source and render with an existing Chrome installation. No hosted AI service or account is required.
The pink-monkey example combines advancing footfalls, support transfer, turning, escalator boarding and nose-scratch strokes. Amber the robot picks up a can, pours twice with a pause, places it on the bench and releases it. Both use deliberate holds. Shared TypeScript helpers cover eye apertures, foot tracks, coordinate spaces, limb constraints, compatible contours, contact anchors, authored whole views and solid stair geometry.
## Quick start
Requires Node ≥22.12, npm and a modern WebGL-capable browser.
sh
git clone https://github.com/vvvivaldy/curio-motion.git
cd curio-motion
npm ci
npm run demo
Open the address printed by Vite, usually http://127.0.0.1:4176/viewer.html.
| Try | Open |
| First film, reference and source | /viewer.html |
| Second film, whole design study and source | /viewer.html?example=amber-robot |
| Live Remotion Player: play, pause and seek | /player.html |
| Direct Pixi baseline | /index.html |
To check the project and export the film:
sh
npm run check
npm run render
Rendering requires an existing Chrome/Chromium; no browser is downloaded. Set CHROMEPATH if detection fails. The default export is outputs/curio-motion-remotion.mp4. See development and rendering for platform commands, troubleshooting and GIF regeneration.
## Use the local API
Inside a browser TypeScript module in this checkout, render a specific frame into an HTML element:
ts
import { createPixiStage } from './src/core/stage';
import { amberRobotScene } from './src/examples/amber-robot/scene';
const host = document.createElement('div');
document.body.append(host);
const stage = await createPixiStage(host, amberRobotScene);
stage.draw(120); // 4 seconds at 30 fps