Motion Rig (prototype)

A Procreate-style screen with a "Motion Rig" extension. You perform in front of the camera, and a 2D character copies your body joints (shoulders, elbows, wrists, hips, knees, ankles) and your face (blinks, mouth, smile, brows, head tilt). It all runs locally. The tracking models are stored in models/, so nothing is sent to the cloud.

Run

npm install
npm start

Open http://localhost:5173 in your laptop browser. The app appears inside an iPad Pro mockup and uses the laptop webcam. Every time a file in public/ is saved, the page reloads by itself.

Use

The screen copies Procreate's own interface. Motion Rig is added as one extra tab in the Actions (wrench) menu.

• Paint, smudge and erase on the canvas. The left sidebar sets brush size and opacity, the square is the eyedropper, and below it are undo and redo (Ctrl+Z / Ctrl+Shift+Z also work).
• Actions › Prefs: light interface, right-hand interface, brush cursor and Size & Opacity sidebar all work.
• Actions › Canvas › Reference: shows the camera window with the tracked skeleton.
• Actions › Rig (the extension):
  • Capture: start the camera or the demo motion, record the performance, and set smoothing and character size.
  • Character: "Use drawn character (Beanie)" turns your drawing into the puppet. Switch it off to use the basic figure, where you can upload a PNG for each body part exported from Procreate. Draw limbs pointing down, with the top of the image at the joint the part hangs from.
  • Joints: live joint angles and face meters.
• Layers: the character is its own "Motion Rig" layer above Layer 1.

Characters from your drawings

Actions › Rig › Character

• New character from a drawing…: pick a full-body PNG, ideally standing in an A-pose. A white background is removed automatically. The joints are detected with the pose model, or placed from a template if it can't find a body. Drag any joint that's off, then tap Build character. The drawing is cut into parts automatically.
• Edit joints: adjust the joints of the current character.
• Layered SVG: traced vector parts, one named group per body part, each with its pivot (data-pivot and transform-origin), plus a hidden "Rig guide" layer. For After Effects, Rive, Figma or Illustrator.
• Layered PSD: one layer per body part. Open it in Procreate, fix or redraw a part (for example, the torso hidden under an arm), export PSD, then use Import layered PSD… to bring it back. Layers are matched by name: Head, Torso, Upper arm R/L, Forearm R/L, Thigh R/L, Shin R/L.

How the motion stays smooth:

• Each part is covered by a fine mesh. Near each joint the mesh blends between the two bones, so elbows, knees and shoulders bend instead of splitting.
• Edges of a part that were hidden under another part get an ink line, so the body keeps its outline when a limb moves away.
• Camera joints pass through a One Euro filter, which removes jitter without adding lag.
• Rendering uses WebGL2 with mipmapped textures when available, and a canvas fallback otherwise.

Red beanie (public/characters/redcap.json, the default character) is your vector character. Its front view is the open-arms pose from your SVG (redcap-welcome.svg), rendered to redcap.png. Open arms keep the sleeves and hands clear of the body, so the automatic cut is clean. The earlier arms-down front view is kept as redcap-armsdown.png, and the full turnaround sheet as redcap-turnaround.svg. Because it's flat colour without outlines, "edges": "shade" gives hidden edges a slightly darker shade of the part's colour instead of a black line. Its face settings make blinks use the skin colour as an eyelid, and leave the beard alone when the mouth opens.

public/characters/beanie.json is the line-art sample: joint positions, optional hand-drawn part outlines (pieces), and face points for blinks and the mouth.

Takes: capture, keep, rig (new)

The artist-facing flow, built for 2D animators and doodle artists rather than technical animators.

This is the beginning of the README. Read the rest at the original. Read the full README ↗