One illustration, nine steps

If you'd rather play first, jump straight to“Try it”at the end of the post: you can turn on your camera and have Kano follow your movements.

This is Kano (花野 in Chinese, カノ in Japanese, 카노 in Korean), an axolotl girl. Her name comes from Lake Xochimilco, the home of the axolotl, which means “flower field” in Nahuatl. She is a 2D puppet: one illustration split into 83 layers that turns its head, blinks, talks, performs 26 motions, and can follow you through the camera.

I never opened the Live2D editor for this project. Live2D meshes and deformation can only be tuned with a mouse inside the editor, and the official tooling gives programs no interface to edit meshes, so an AI agent can't get a hand in. Instead I recreated the puppet effect using only low-level 2D animation fundamentals, and the result came out better than I expected. The split of work: I looked at the images and made the calls, and Opus 5.5 wrote the code and measured the numbers. I started on 2026-10-08 and put it on the web on 10-14. The web version deliberately shrinks the textures, so up close it is blurrier than the original (the reason is in Step 9).

Why not use the Live2D editor

Taken apart, everything Live2D does is basic computer graphics: mesh deformation, front-to-back parallax, bones, and image swapping. The editor wraps them in mouse operations, and the interface the official tooling exposes to external programs has no way to edit mesh vertices (checked 2026-10). Cubism Core, which plays the models, can at least be read by a program, which is why Step 1 can measure the official samples. This time I wrote each of these back in code, one by one:

The nine steps at a glance

The head turn is the first step that surfaces earlier defects: if it exposes an area that was never drawn, go back to Step 2 and fill it in; if a second outline appears, go back to Step 3 and re-split.

Measure the professional sample first, and turn “looks right” into numbers

Before starting, I measured how far each layer of a professional puppet moves when it turns its head.

Method

1. Load 12 humanoid sample models with Live2D's official Cubism Core and push the head-turn parameter to its limit
2. Take the displacement of the face outline as 1, compute each layer's relative displacement, and take the median across the 12

One main image, with the hidden areas drawn separately

A front-facing illustration contains nothing behind the hair or behind the arms, so those have to be drawn separately.

Method

1. Use ChatGPT's image edit with the main image as the base, changing only one thing per image
2. Align each edited image back to the main image with ECC (an image registration method), looking only at the unedited areas during alignment

After splitting layers, swap the visible areas back to original pixels

The layer decomposition is left to the model, but colors come only from the original image.

Method

1. Feed the main image and the Step 2 edits into a layer-decomposition model (this time See-through, published in February 2026) and split out layers such as hair, face, facial features and clothing
2. In every layer's visible region, paste the pixels back from the original image; each pixel goes only to the topmost layer
3. For parts missing from the model's categories (Kano's gills), cut them from the areas of the original image that no layer covers
4. Clear noise with opacity below 0.06 from each layer's canvas

The head turn only moves vertices, with no image swap

Not a single layer image is swapped; the head is treated as an ellipsoid rotating about an axis, and each layer moves according to the depth in the ratio table.

Method

1. Each vertex carries a depth, and the front-to-back distance of each layer is back-derived from the Step 1 ratio table: the nose is frontmost, the back hair rearmost
2. The neck barely moves, and the chin slides over it (in the official samples, the neck's displacement is close to 0 during a head turn)

Arms bend at small angles; big motions swap in a different image

A hanging hand only bends within a few dozen degrees; for big motions like raising a hand, I draw a separate image and swap it in.

Method

1. A hanging hand bends with three bones, shoulder, elbow and wrist, and the mesh is made denser near the joints
2. For poses like raising a hand, covering the face or hands on hips, I made an image edit for each using the Step 2 method; Kano has 6 sets
3. The swap does not cross-fade: the hand first whips toward the pose, switches directly in a single frame midway through the whip, and then the new hand springs into place
4. When the hand is raised, the upper arm shrinks to 0.55x and the elbow's pivot moves up with it

Expressions are pushed, and the eyes are swapped on the blink frame

Expression changes don't fade in and out: the mouth and brows are pushed over with optical flow, and the eyes are swapped on the frame where a blink hides it.

Method

1. Generate 11 faces that change only the expression, and align them back to the main image with the Step 2 thresholds
2. Use optical flow (which computes how each pixel moves between two images) to push the original face into the new expression
3. The eyes are not pushed: I force a blink, and on the frame where the eyes are closed, the face and eyes are swapped together. 9 of the 11 expressions take this route

Lay out motions myself, following the rhythm of professional work

What makes a motion good is its rhythm: I take the rhythm from professional work and lay out the keyframes myself.

Method

1. Look at the official samples' motions and distill the shared rhythm, without taking any single curve
2. For each motion, lay out the keyframes myself: one timeline each for head, body, gaze, gills, expression and hand pose
3. Happy motions follow four beats, “wind up → spring up → hold → hair sways along”, with the emotion left to the expression
4. The expressions and hand poses a motion needs reuse the sets made in Steps 5 and 6

Hook up the camera, with the face and upper body on two paths

The face and body each go their own way, so if one path loses tracking, the other keeps moving.

Method

1. Run two tracking models in the browser: one watches the face, one watches the body
2. Each path is centered and smoothed on its own: the pose held still for the first second counts as the front, and afterward I measure how far you differ from it
3. Direction is mirrored: if you move left, Kano also moves left on screen
4. Small arm movements are followed directly; a raised hand has to go past a threshold and pause before it swaps to the Step 5 pose image

Put it on the web

Three things had to be solved before putting it on the web: the original can't be handed out as is, loading is too slow, and one library quietly connects to the outside.

Method

1. The public version gets three layers of protection: each layer's texture is shrunk to one third of the original in width and height and the mesh is made coarser, while the original stays on my own computer; the assets are encrypted and sent in chunks; and every layer carries an invisible watermark and signature
2. On load, a preview image is shown first and is replaced once the puppet is ready
3. Textures switch to lossless WebP
4. The tracking library sends usage statistics to an external server every 60 seconds with no off switch, so I answer those requests directly inside the page

What's not finished

Kano still has five known flaws, which I'll list up front:

• A faint pale ghost inside the mouth when crying and yawning
• At a 30° head turn, the cut on the far-side bangs shows jagged edges
• A side bend brings out a twist, and since the puppet's cap is small, it is quite noticeable
• The mouth shapes for “ee”, “eh” and a smile can't be told apart, and getting them right would need audio-driven lip sync
• Fingers aren't tracked; once the elbow leaves the frame, the hand stops moving

Pitfalls I hit

Most of the problems I ran into fell into the seven categories below. For each one I only write what you'll see and how to prevent it.

Using fades and image swaps to do what should be a “move”

What you'll see: double images, a translucent frame, two mouth lines.

How to prevent it: move vertices whenever you can; if an image swap is unavoidable, hide it in a blink or in the whip of a hand (Steps 4–6).

AI image edits and layer splits redraw things as a side effect

What you'll see: areas you didn't ask to change got changed, split-out layers have different colors from the original, an extra pair of hands appears, and a faint haze surrounds a layer.

How to prevent it: change only one thing per image; use alignment thresholds to block shifts and scaling; have a person look at images with wrongly drawn content; always use pixels from the original (Steps 2, 3).

Try it

• Press “Camera” to turn on your camera, and Kano will turn her head, blink, and move her hands along with you; the video is processed only inside your browser
• Press the motion buttons to play motions; when the camera is off, she looks at your cursor

To lower the risk of the puppet being downloaded directly, the web version's textures are shrunk to one third of the original, so it looks a bit blurry up close. That is normal.

Copyright notice

• Kano's character design, layers, meshes, expressions and motions © 2026 JonesHong. For viewing on this page only; no downloading, reposting, redistribution or derivative works
• Web rendering: PixiJS (MIT)
• Camera tracking: MediaPipe Tasks Vision with the Face Landmarker and Pose Landmarker models (Apache-2.0, Google)