explaingit

yemount/pose-animator

8,845JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A browser tool that uses your webcam to detect your body and face movements in real time and animates a 2D SVG cartoon character to mirror your poses, with no server needed.

Mindmap

mindmap
  root((pose-animator))
    What it does
      Animate SVG characters
      Mirror body pose
      Real-time webcam
    AI models
      PoseNet body joints
      FaceMesh face points
    Tech
      JavaScript
      TensorFlow.js
      SVG vector art
    Demos
      Live webcam
      Static photo
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Create an interactive web experience where a cartoon character mirrors a user's body movements through their webcam.

USE CASE 2

Animate your own SVG character designs by following the skeleton-rigging guide and loading the file into the live demo.

USE CASE 3

Build a live webcam puppet or streaming avatar that tracks pose using only a browser, no backend required.

Tech stack

JavaScriptTensorFlow.jsSVG

Getting it running

Difficulty · easy Time to first run · 5min

Runs entirely in the browser, requires Desktop Chrome or iOS Safari, other browsers may not be supported.

In plain English

Pose Animator is a browser-based tool that brings 2D vector character illustrations to life using your webcam. It watches your body position and face in real time through your camera, detects where your joints and facial features are, and then moves the lines of a cartoon character to match your movements. The result is a drawn character that mirrors what your body is doing as you move in front of the camera. The technique it uses comes from skeletal animation, a method in computer graphics where a character is built in two layers: the visible artwork on the outside, and an invisible skeleton of connected bones underneath. When the bones move, the artwork stretches and bends with them. Pose Animator applies this to SVG files, which are vector graphics made of curves and paths rather than pixels. The skeleton moves based on data from two AI models running directly in the browser: PoseNet, which detects body joint positions, and FaceMesh, which maps facial keypoints. All of this runs using TensorFlow.js, a library that runs machine learning models in a web browser without needing a server. The project includes two demos you can try in a browser: one that uses a live webcam feed and one that processes a static photo. Both are hosted online and require no installation. The supported browsers at the time of the README were Desktop Chrome and iOS Safari. You can also animate your own character designs. The README provides step-by-step instructions for creating an SVG file in a vector graphics editor, placing your illustration paths and the required skeleton structure into specific named groups, and then dropping the finished file into the camera demo to see it animate. The project is written in JavaScript and was developed at Google, though it is described as not an officially supported Google product.

Copy-paste prompts

Prompt 1
Help me create an SVG character file with the correct skeleton group structure so I can animate it in Pose Animator.
Prompt 2
Show me how to embed the Pose Animator camera demo into my own web page so visitors can animate a custom character with their webcam.
Prompt 3
Write a JavaScript snippet that uses PoseNet via TensorFlow.js to detect body keypoints from a webcam stream and log the joint coordinates.
Prompt 4
Help me modify the Pose Animator skeleton definition to add extra joints for more detailed finger or hand movement on a custom character.
Open on GitHub → Explain another repo

← yemount on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.