Give the mannequin a face so facing and neck turns are readable

The head was a bare sphere, so neck rotations, turns, and any movement
where front-vs-back matters (neck-rotation demo, pirouettes, quarter
turns) were unreadable — the figure had no visible facing.

Add a minimal low-poly face on the head's front (+Z): a nose wedge and
two darker eye studs that poke just past the head surface, parented to
the head bone so they follow neck/head rotation. Test asserts the face
group exists and every element sits on the front side of the head.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0164eTtmmq6U8GQkAEmQsvV5

Author: claude

packages/movit-render/src/mannequin.ts

@@ -103,6 +103,7 @@ export function buildMannequin(material?: THREE.Material): Mannequin {
 
   // Head sphere + small hand/foot caps for readability.
   addBall(bones.get("head")!, 0.12, mat);
+  addFace(bones.get("head")!);
   addBall(bones.get("wrist_left")!, 0.05, mat);
   addBall(bones.get("wrist_right")!, 0.05, mat);
   addFoot(bones.get("ankle_left")!, mat);
@@ -139,6 +140,32 @@ function addBall(bone: THREE.Object3D, diameter: number, mat: THREE.Material): v
   bone.add(new THREE.Mesh(geo, mat));
 }
 
+/**
+ * A minimal face — nose wedge + two eye studs — on the head's front (+Z).
+ * The bare sphere hid which way the figure faces, making neck rotations and
+ * turns unreadable; darker studs poke just past the head surface so facing
+ * reads at a glance from any camera angle.
+ */
+function addFace(head: THREE.Object3D): void {
+  const mat = new THREE.MeshStandardMaterial({ color: 0x39424e, roughness: 0.6 });
+  const face = new THREE.Group();
+  face.name = "face";
+
+  // Head ball radius is 0.06 (see addBall(head, 0.12)).
+  const nose = new THREE.Mesh(new THREE.ConeGeometry(0.013, 0.035, 10), mat);
+  nose.rotation.x = Math.PI / 2; // cone +Y → +Z
+  nose.position.set(0, -0.004, 0.064);
+  face.add(nose);
+
+  for (const sx of [-1, 1]) {
+    const eye = new THREE.Mesh(new THREE.SphereGeometry(0.0095, 10, 8), mat);
+    eye.position.set(sx * 0.024, 0.016, 0.054);
+    face.add(eye);
+  }
+
+  head.add(face);
+}
+
 function addFoot(bone: THREE.Object3D, mat: THREE.Material): void {
   const geo = new THREE.BoxGeometry(0.07, 0.04, 0.16);
   const mesh = new THREE.Mesh(geo, mat);

packages/movit-render/test/render.test.ts

@@ -494,3 +494,16 @@ describe("frontal plane direction", () => {
     }
   });
 });
+
+describe("face marker", () => {
+  it("marks the head's front (+Z) so facing and neck turns are readable", () => {
+    const m = buildMannequin();
+    const face = m.bones.get("head")!.getObjectByName("face");
+    expect(face).toBeTruthy();
+    expect(face!.children.length).toBeGreaterThanOrEqual(3); // nose + two eyes
+    // Every face element sits on the figure's front side of the head ball.
+    for (const part of face!.children) {
+      expect(part.position.z).toBeGreaterThan(0.04);
+    }
+  });
+});