@voqalize/avatar 0.2.1 → 0.3.0

package/src/face-myna.js

@@ -3,11 +3,11 @@
  *
  * The third line-art character, authored against a user-supplied reference
  * asset (a raster illustration): a young contemporary Indian woman — wavy
- * shoulder-length dark hair with paper highlight slashes, thin geometric
- * glasses, orange hoop earrings, a white crew tee under an open orange
- * overshirt. Hand-authored geometry with the reference on screen; nothing is
- * traced. Same idiom as peep and wren — no strokes anywhere, every mark a
- * filled taper — and the same 30-channel contract underneath.
+ * shoulder-length dark hair with paper highlight slashes, orange hoop
+ * earrings, a white crew tee under an open overshirt. Hand-authored geometry
+ * with the reference on screen; nothing is traced. Same idiom as peep and
+ * wren — no strokes anywhere, every mark a filled taper — and the same
+ * 30-channel contract underneath.
  *
  * What is deliberately different from the siblings, and why:
  * - THE HAIR IS A HORSESHOE, NOT A CLOUD. One closed loop: wavy outer
@@ -20,10 +20,9 @@
  *   head-layer underlay (same loop at head parallax) backfills the ±3-unit
  *   slide between the two layers under yaw — same insurance as peep's, doing
  *   one extra job here.
- * - THE ACCENT IS A GARMENT, not trim (peep) or frames (wren): the overshirt
- *   is two accent-filled panels over a paper tee. Background leaks behind an
- *   orange shirt are loud, which is why the tee runs edge-to-edge under both
- *   panels and everything overshoots the frame.
+ * - THE OVERSHIRT IS TWO PAPER PANELS over a paper tee, distinguished only by
+ *   ink outline — no fill colour on the garment. The tee still runs
+ *   edge-to-edge under both panels and everything overshoots the frame.
  * - THE MOUTH HAS LIPS. The proven aperture-contour model, but the ring's
  *   width profile carries a cupid's-bow dip at the top centre and a fuller
  *   lower lip. (An under-lip shadow mark existed through v7; it was deleted —
@@ -44,59 +43,74 @@ import {
   f, createFaceShell, faceApi, poseTransforms, pairedTeeth,
 } from './face-core.js';
 import { taper, taperRing, region } from './line-art.js';
+import { viewBoxForHead } from './camera.js';
 
 export const THEME = {
-  // Sampled from the reference card: a warmer, creamier ground than peep's.
-  bg0: '#f2ead9',
-  bg1: '#e6d9c2',
   ink: '#191919',
   paper: '#ffffff',
-  // The overshirt orange — one key, hoops use it too. ~9% duskier than the
-  // asset's sample: at tile size the sampled value out-shouted the face.
+  // The hoop earrings' orange. ~9% duskier than the asset's sample: at tile
+  // size the sampled value out-shouted the face.
   accent: '#dc8432',
   mouthIn: '#191919',
   teeth: '#ffffff',
   tongue: '#8d7f79',
 };
 
-// Same native 760x950 art space as the siblings; window lifted like wren's
-// because the hair crowns high.
-const VB = { x: 92, y: 50, w: 576, h: 800 };
+// --- reshape ------------------------------------------------------------
+// Same move as peep, for the same reason: built next to the Canvas2D
+// professional identities, this head read tall and narrow — 285 units wide in
+// a 907-unit 4:3 frame — where the canvas avatars were calibrated at call-tile
+// size from the start. One static, non-animated transform on the head cluster
+// only (skull, hair, features — never neck or body), pivoted at CHIN_Y so the
+// chin's own silhouette point does not move and the jaw-to-collar join needs
+// no rework. Every landmark constant below still describes the original art
+// space. See face-peep.js for the full derivation, including why "broader"
+// here means a tighter 4:3 crop rather than a wider aspect.
+const CX = 380;
+const CHIN_Y = 572;
+const RESHAPE_SX = 1.10;
+const RESHAPE_SY = 0.88;
+const RESHAPE = `translate(${CX} ${CHIN_Y}) scale(${RESHAPE_SX} ${RESHAPE_SY}) translate(${-CX} ${-CHIN_Y})`;
+
+// The outer wave of hair, rather than HEAD_TOP under it, is the crown a viewer
+// measures. The chin is the lowest point of the resting jaw silhouette.
+// crownY is the reshaped crown: CHIN_Y + (96 − CHIN_Y) × RESHAPE_SY, worked out
+// by hand because the camera reads landmarks, not the transform above it.
+const FRAME = { centerX: CX, crownY: 153, chinY: CHIN_Y };
+const VB = viewBoxForHead(FRAME);
 
 export const META = {
   viewBox: { x: VB.x, y: VB.y, w: VB.w, h: VB.h },
-  mouthCrop: { x: 298, y: 436, w: 164, h: 100 },
+  // The original crop (298, 436, 164, 100) with its corners carried through
+  // RESHAPE — a camera change does not move a path, but the reshape is
+  // geometry rather than camera, so the inspection crop has to follow it.
+  mouthCrop: { x: 290, y: 452, w: 180, h: 88 },
 };
 
 // --- landmarks --------------------------------------------------------------
-const CX = 380;
+// These are the NATIVE art space and RESHAPE never enters them: it is a
+// wrapper on the rendered group, so `apply()` and every number below still
+// mean what they meant before it existed.
 const HEAD_TOP = 150;
 
-const EYE = { y: 386, dx: 56, rx: 15, ry: 16 };
+// rx widened from 15 — the bean was very nearly round, and cutting an almond
+// aperture from it without an absurd lid line needed the same headroom peep's
+// eye needed. See the eyes section.
+const EYE = { y: 386, dx: 56, rx: 17, ry: 16 };
 const MOUTH = { cx: CX, cy: 492 };
 const MOUTH_APERTURE = 36;
 
-// Lenses: measured off the reference's fully visible left lens, converted by
-// face-height fraction (lens height ≈ 0.22 of hairline→chin; w:h ≈ 1.3;
-// corner radius ≈ 0.38 of lens height — a soft rect verging on superellipse).
-// Centred ON the eye line: the reference pupil sits at lens mid-height, and
-// its "just under the brows" top gap is 0.21 of lens height, which lands the
-// same way here. Lens centres sit 4 units outboard of the eyes so the bridge
-// keeps the reference's narrow 18-unit gap without moving the pupils.
-const LENS = { dx: 60, hw: 51, hh: 40, r: 30 };
-
-// Brows: bold, long and clearly arched, with real air between them and the
-// frames — the reference's brows are its strongest single mark. The rest
-// shape is a gentle taper-arc: v7's outer third dropped 17 units in 15 and
-// over a resting smile the kink composited into a smirk that curdled across
-// a long session. The kink is still available — as a browAngle POSE.
+// Brows: bold, long and clearly arched, with real air between them — the
+// reference's brows are its strongest single mark. The rest shape is a
+// gentle taper-arc: v7's outer third dropped 17 units in 15 and over a
+// resting smile the kink composited into a smirk that curdled across a long
+// session. The kink is still available — as a browAngle POSE.
 const BROW_L = [[CX - 22, 340], [CX - 40, 327], [CX - 60, 320], [CX - 76, 319],
                 [CX - 88, 322], [CX - 97, 327], [CX - 103, 332]];
 // Near-mirrored: the right arch rides 1 unit higher (personality, small
 // enough to survive the mirror-flip levelness check, which is judged on the
-// glasses and eye lines). Anything bigger read as a baked-in head tilt —
-// the mixer's headRoll adds on top of the art and nothing can subtract a
-// drawn lean.
+// eye lines). Anything bigger read as a baked-in head tilt — the mixer's
+// headRoll adds on top of the art and nothing can subtract a drawn lean.
 const BROW_R = [[CX + 22, 340], [CX + 40, 326], [CX + 60, 319], [CX + 76, 318],
                 [CX + 88, 321], [CX + 97, 327], [CX + 103, 332]];
 
@@ -122,7 +136,11 @@ const HEAD = [
 ];
 // Lighter than wren's ring by ~20% — the reference line is confident but not
 // woodcut. Heavy low on the jaw, nothing at the crown (under hair).
-const HEAD_W = [3, 6, 9.5, 12, 13, 11.5, 9, 6, 4, 3];
+//
+// Scaled to ~0.65 of the original profile ([3, 6, 9.5, 12, 13, 11.5, 9, 6, 4,
+// 3]) when RESHAPE landed: the same taper shape, but a line rather than a rope
+// once the head is drawn broader and the frame tighter around it.
+const HEAD_W = [2, 4, 6, 8, 8.5, 7.5, 6, 4, 2.5, 2];
 
 // Neck: the shared truncated-cone construction, slim; fused into the head
 // layer and overshot past every neckline for the standard parallax reasons.
@@ -229,44 +247,8 @@ function circlePts(cx, cy, r) {
 const HOOP_L = taperRing(circlePts(236, 488, 12), [4.5, 5, 4.5]);
 const HOOP_R = taperRing(circlePts(524, 488, 12), [4.5, 5, 4.5]);
 
-// ---------------------------------------------------------------------------
-// Static art: glasses — thin geometric rounded rectangles in ink.
-//
-// Wider than tall, corners genuinely rounded, thin ring. Temples run outward
-// and vanish under the hair's inner edge. Drawn after the eyes so the frame
-// passes over the bean at gaze extremes rather than under it.
-// ---------------------------------------------------------------------------
-function roundRectPts(cx, cy, hw, hh, r) {
-  const k = r * K;
-  const L = cx - hw, R = cx + hw, T = cy - hh, B = cy + hh;
-  return [
-    [R, cy],
-    [R, cy + (hh - r) / 2], [R, B - r - k * 0.2], [R, B - r],
-    [R, B - r + k], [R - r + k, B], [R - r, B],
-    [R - r - (hw - r) / 2, B], [L + r + (hw - r) / 2, B], [L + r, B],
-    [L + r - k, B], [L, B - r + k], [L, B - r],
-    [L, B - r - k * 0.2], [L, cy + (hh - r) / 2], [L, cy],
-    [L, cy - (hh - r) / 2], [L, T + r + k * 0.2], [L, T + r],
-    [L, T + r - k], [L + r - k, T], [L + r, T],
-    [L + r + (hw - r) / 2, T], [R - r - (hw - r) / 2, T], [R - r, T],
-    [R - r + k, T], [R, T + r - k], [R, T + r],
-    [R, T + r + k * 0.2], [R, cy - (hh - r) / 2], [R, cy],
-  ];
-}
-const LENS_L = roundRectPts(CX - LENS.dx, EYE.y, LENS.hw, LENS.hh, LENS.r);
-const LENS_R = roundRectPts(CX + LENS.dx, EYE.y, LENS.hw, LENS.hh, LENS.r);
-const RING_W = [3, 3.4, 3, 3.4, 3];
-// Bridge at the upper third and temples off the top outer corners, sweeping
-// up toward the ears — both as drawn in the reference.
-const BRIDGE = [[CX - 9, 371], [CX - 3, 366], [CX + 3, 366], [CX + 9, 371]];
-// Attach on the top-outer corner arc (the rounded corner pulls the rim in to
-// ~x±108 at this height), sweeping up to vanish under the hair's inner edge.
-const TEMPLE_L = [[CX - 108, 364], [CX - 124, 357], [CX - 141, 352], [CX - 158, 350]];
-const TEMPLE_R = [[CX + 108, 364], [CX + 124, 357], [CX + 141, 352], [CX + 158, 350]];
-
-/** The nose: a tiny soft hook, tip only — the glasses own the bridge. It sits
- *  lower than v6 (the reference's nose mark tops out at ~55% of eye→mouth,
- *  not 39%), which is also what gives the taller lenses their clearance. */
+/** The nose: a tiny soft hook, tip only. It sits lower than v6 (the
+ *  reference's nose mark tops out at ~55% of eye→mouth, not 39%). */
 const NOSE_D = taper(
   [[CX + 3, 439], [CX - 2, 448], [CX - 6, 456], [CX - 4, 462],
    [CX + 1, 465], [CX + 7, 463], [CX + 10, 458]],
@@ -274,12 +256,13 @@ const NOSE_D = taper(
 );
 
 // ---------------------------------------------------------------------------
-// Static art: torso — white crew tee under an open orange overshirt.
+// Static art: torso — a white crew tee under an open overshirt, both paper,
+// distinguished only by ink outline.
 //
-// Three fills in order: the tee (paper, edge-to-edge under everything), then
-// the two overshirt panels (accent) whose inner edges make the open V. Both
-// panels keep the house two-run shoulder: outer arm edge, hard acromion turn,
-// near-horizontal trapezius shelf. Everything overshoots the frame.
+// The tee is edge-to-edge under everything; the two overshirt panels sit on
+// top, their inner edges making the open V. Both panels keep the house
+// two-run shoulder: outer arm edge, hard acromion turn, near-horizontal
+// trapezius shelf. Everything overshoots the frame.
 // ---------------------------------------------------------------------------
 const TEE = [
   [288, 960],
@@ -373,7 +356,7 @@ const POSE = {
   // parallax slides like a wig.
   yawPx: 26, pitchPx: 16,
   pivot: PIVOT,
-  breathSwell: 0.012, swellPivot: { x: CX, y: 950 },
+  breathSwell: 0.008, swellPivot: { x: CX, y: 950 },
   turnPx: 16,
   layers: LAYERS, parallax: PARALLAX,
   torsoLayers: ['body'],
@@ -428,8 +411,8 @@ function mouthGeometry(p) {
   // Corner travel 28 (was 23): the tile swallows less. Press straightens the
   // band by pulling the corner lift toward zero.
   const cLift = 1 - 0.85 * press;
-  const yL = cy - (6 + p.mouthCornerL * 28) * cLift;
-  const yR = cy - (6 + p.mouthCornerR * 28) * cLift;
+  const yL = cy - (1.5 + p.mouthCornerL * 28) * cLift;
+  const yR = cy - (1.5 + p.mouthCornerR * 28) * cLift;
 
   const apTop = cy - h * 0.25;
   let apBot = cy + h * 0.75;
@@ -480,8 +463,12 @@ function teethPath(m, amt, lower) {
   );
 }
 
-// Eyes: the bean model, near-round — the reference's pupils are big and dark
-// and do most of the face's expressive work with the lashes.
+// Eyes: the lid-line-plus-iris model, ported from face-peep.js. It reads
+// better against the "big and dark pupils" brief than the old whole-bean
+// translation did, not worse — the reference's pupils get a real iris that
+// carries the gaze while the lash and lid line hold still. See face-peep.js
+// for the two wrong passes (paper-on-ink, then a too-small pupil that read as
+// a startled target) that are not recoverable from the numbers alone.
 
 /** Top-lid height for a given lid value — shared by bean and lash so they can
  *  never disagree. The mapping is a 0.6-power, not linear: the mixer's rest
@@ -495,26 +482,70 @@ function lidTopY(cy, lid) {
   return lerp(cy - EYE.ry * 1.05, cy - EYE.ry * 0.42, Math.pow(clamp(lid), 0.6));
 }
 
-function eyePath(cx, cy, lid, squint, tiltDeg) {
-  const L = clamp(lid);
-  const topY = lidTopY(cy, lid);
-  // Squint gain .95 (was .7): the smile-squint is most of what separates warm
-  // from neutral at tile size.
-  const botY = lerp(cy + EYE.ry * 1.05, cy - EYE.ry * 0.05, L) - clamp(squint) * EYE.ry * 0.95;
-  const rx = EYE.rx;
+// A cubic whose two controls share a y reaches only 3/4 of the way to it.
+// Everything below works in DRAWN extents and divides that back out, so an
+// inset of n units is n units on screen — see face-peep.js for why the inset
+// below cannot be proportional instead.
+const BULGE = 0.75;
+
+/** Two cubics between (cx±rx, cyMid), bulging to yTop and yBot; tilt about cy. */
+function lensPath(cx, cy, g, tiltDeg) {
+  if (!g) return '';
   const a = (tiltDeg * Math.PI) / 180;
   const ca = Math.cos(a), sa = Math.sin(a);
   const R = (x, y) => {
     const dx = x - cx, dy = y - cy;
     return `${f(cx + dx * ca - dy * sa)} ${f(cy + dx * sa + dy * ca)}`;
   };
+  const ctlTop = g.cyMid + (g.yTop - g.cyMid) / BULGE;
+  const ctlBot = g.cyMid + (g.yBot - g.cyMid) / BULGE;
   return (
-    `M${R(cx - rx, cy)}` +
-    `C${R(cx - rx * 0.5, topY)} ${R(cx + rx * 0.5, topY)} ${R(cx + rx, cy)}` +
-    `C${R(cx + rx * 0.5, botY)} ${R(cx - rx * 0.5, botY)} ${R(cx - rx, cy)}Z`
+    `M${R(cx - g.rx, g.cyMid)}` +
+    `C${R(cx - g.rx * 0.5, ctlTop)} ${R(cx + g.rx * 0.5, ctlTop)} ${R(cx + g.rx, g.cyMid)}` +
+    `C${R(cx + g.rx * 0.5, ctlBot)} ${R(cx - g.rx * 0.5, ctlBot)} ${R(cx - g.rx, g.cyMid)}Z`
   );
 }
 
+/** The lid silhouette, in drawn extents. Same power-curve lid mapping and
+ *  squint gain (.95: the smile-squint is most of what separates warm from
+ *  neutral at tile size) as before the eye was opened out. */
+function eyeGeom(cy, lid, squint) {
+  const L = clamp(lid);
+  const ctlTop = lidTopY(cy, lid);
+  const ctlBot = lerp(cy + EYE.ry * 1.05, cy - EYE.ry * 0.05, L) - clamp(squint) * EYE.ry * 0.95;
+  return {
+    cyMid: cy,
+    rx: EYE.rx,
+    yTop: cy + BULGE * (ctlTop - cy),
+    yBot: cy + BULGE * (ctlBot - cy),
+  };
+}
+
+// The lid line, as constant distances — a proportional inset inverts the
+// moment a closing lid carries the bean's lower edge above the eye centre and
+// leaks paper out through a shut eye.
+const LASH_X = 3.0;
+const LASH_TOP = 5.5;
+const LASH_BOT = 4.5;
+
+/** The paper almond inside the lid line, or null once the lid has shut on it. */
+function apertureGeom(g) {
+  const yTop = g.yTop + LASH_TOP;
+  const yBot = g.yBot - LASH_BOT;
+  const rx = g.rx - LASH_X;
+  if (yBot - yTop < 0.5 || rx < 0.5) return null;
+  return { cyMid: (yTop + yBot) / 2, rx, yTop, yBot };
+}
+
+// Sized to fill the resting aperture's height rather than float inside it —
+// this is what "big and dark pupils" means now that the eye has a real iris
+// instead of a translating bean.
+const IRIS_R = 8.0;
+
+// Travel, native units: one corner's worth of paper. At either extreme one
+// sliver closes and the other doubles, which is the whole gaze signal.
+const IRIS_TRAVEL = { x: 4.5, y: 2.2 };
+
 /**
  * The upper lash line: lies ON the bean's top edge and ends in a small
  * outward flick at the outer corner. The body samples the bean's own top
@@ -547,12 +578,9 @@ function lashPath(cx, cy, lid, dir) {
 // - Raises land at 20 (v7: 16) — the minimal-face lesson says small deltas
 //   vanish, and at a 130 px tile the emotion poses collapsed below this.
 // - Descent is capped at 8.5 and weighted toward the inner half (corrugator
-//   pull). The cap is the frame-clearance envelope: the arch points that sit
-//   over the lens's top bar (y≈319–322 at rest) must keep ≥3.5 units of air
-//   above the bar's ink at browRaise −1, or the brow merges with the frame
-//   and brows-down — concentration — silently dies. The inner weighting also
-//   keeps the outer tail off the frame's corner arc. What travel can't carry,
-//   thickness does: a knitted brow bulks up 30% at full descent.
+//   pull), so brows-down reads as concentration rather than a merged smear.
+//   What travel can't carry, thickness does: a knitted brow bulks up 30% at
+//   full descent.
 function browPath(pts, raise, angle, inner) {
   const n = pts.length - 1;
   const up = Math.max(0, raise);
@@ -579,59 +607,63 @@ function markup(id, t) {
 <svg id="${id}" viewBox="${VB.x} ${VB.y} ${VB.w} ${VB.h}" xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid meet" style="display:block;width:100%;height:100%">
   <defs>
-    <radialGradient id="${id}-gBg" cx="50%" cy="36%" r="76%">
-      <stop offset="0%" stop-color="${t.bg0}"/><stop offset="100%" stop-color="${t.bg1}"/>
-    </radialGradient>
     <clipPath id="${id}-clipMouth"><path id="${id}-clipMouthP" d=""/></clipPath>
+    <clipPath id="${id}-clipEyeL"><path id="${id}-clipEyeLP" d=""/></clipPath>
+    <clipPath id="${id}-clipEyeR"><path id="${id}-clipEyeRP" d=""/></clipPath>
   </defs>
 
-  <rect x="${VB.x}" y="${VB.y}" width="${VB.w}" height="${VB.h}" fill="url(#${id}-gBg)"/>
-
   <!-- head and neck; hair underlay at head parallax is the anti-sliver
-       insurance AND the backfill behind the hair-layer ears (see header). -->
+       insurance AND the backfill behind the hair-layer ears (see header).
+
+       RESHAPE wraps the art INSIDE the parallax group, never the group itself:
+       poseTransforms writes the group's own transform every frame and would
+       overwrite it. Same for features and hair below. The neck stays outside
+       it — the reshape is pivoted on the chin so that join still lands. -->
   <g id="${id}-head">
     <path d="${NECK_FILL}" fill="${t.paper}"/>
     ${ink(taper(NECK_L, [3, 7, 5]))}
     ${ink(taper(NECK_R, [3, 7, 5]))}
-    <path d="${HEAD_FILL}" fill="${t.paper}"/>
-    ${ink(HEAD_RING)}
-    ${ink(taper(JAW_UNDER, [2, 5, 2]))}
-    <path d="${HAIR_D}" fill="${t.ink}"/>
+    <g transform="${RESHAPE}">
+      <path d="${HEAD_FILL}" fill="${t.paper}"/>
+      ${ink(HEAD_RING)}
+      ${ink(taper(JAW_UNDER, [2, 5, 2]))}
+      <path d="${HAIR_D}" fill="${t.ink}"/>
+    </g>
   </g>
 
   <!-- tee, then the two overshirt panels and their tailoring -->
   <g id="${id}-body">
     ${paper(region(TEE))}
     ${ink(taper(TEE_NECK, [3, 5.5, 3]))}
-    <path d="${region(PANEL_L)}" fill="${t.accent}"/>
-    <path d="${region(PANEL_R)}" fill="${t.accent}"/>
+    <path d="${region(PANEL_L)}" fill="${t.paper}"/>
+    <path d="${region(PANEL_R)}" fill="${t.paper}"/>
     ${ink(taper(PANEL_L_OUT, PANEL_W))}
     ${ink(taper(PANEL_R_OUT, PANEL_W))}
     ${ink(taper(PANEL_L_IN, [6, 7, 5]))}
     ${ink(taper(PANEL_R_IN, [6, 7, 5]))}
-    <path d="${region(COLLAR_L)}" fill="${t.accent}"/>
-    <path d="${region(COLLAR_R)}" fill="${t.accent}"/>
+    <path d="${region(COLLAR_L)}" fill="${t.paper}"/>
+    <path d="${region(COLLAR_R)}" fill="${t.paper}"/>
     ${ink(taperRing(COLLAR_L, [3, 4.5, 3], 6))}
     ${ink(taperRing(COLLAR_R, [3, 4.5, 3], 6))}
     ${CREASES.map((c) => ink(taper(c.p, c.w))).join('\n    ')}
   </g>
 
-  <!-- features: brows, eyes+lashes, nose, glasses, mouth -->
+  <!-- features: brows, eyes+lashes, nose, mouth -->
   <g id="${id}-features">
+    <g transform="${RESHAPE}">
     <path id="${id}-browL" fill="${t.ink}"/>
     <path id="${id}-browR" fill="${t.ink}"/>
     <g id="${id}-eyes">
       <path id="${id}-eyeL" fill="${t.ink}"/>
       <path id="${id}-eyeR" fill="${t.ink}"/>
+      <path id="${id}-apertureL" fill="${t.paper}"/>
+      <path id="${id}-apertureR" fill="${t.paper}"/>
+      <g clip-path="url(#${id}-clipEyeL)"><circle id="${id}-irisL" fill="${t.ink}"/></g>
+      <g clip-path="url(#${id}-clipEyeR)"><circle id="${id}-irisR" fill="${t.ink}"/></g>
       <path id="${id}-lashL" fill="${t.ink}"/>
       <path id="${id}-lashR" fill="${t.ink}"/>
     </g>
     <path d="${NOSE_D}" fill="${t.ink}"/>
-    ${ink(taperRing(LENS_L, RING_W, 6))}
-    ${ink(taperRing(LENS_R, RING_W, 6))}
-    ${ink(taper(BRIDGE, [3, 4, 3]))}
-    ${ink(taper(TEMPLE_L, [3, 3.5, 4]))}
-    ${ink(taper(TEMPLE_R, [3, 3.5, 4]))}
     <g id="${id}-mouth">
       <path id="${id}-mouthIn" fill="${t.mouthIn}"/>
       <g clip-path="url(#${id}-clipMouth)">
@@ -641,10 +673,12 @@ function markup(id, t) {
       </g>
       <path id="${id}-lips" fill="${t.ink}"/>
     </g>
+    </g>
   </g>
 
   <!-- hair: the mass, its highlights, then ears and hoops on top -->
   <g id="${id}-hair">
+    <g transform="${RESHAPE}">
     <path d="${HAIR_D}" fill="${t.ink}"/>
     ${SHINE.map((s) => paper(taper(s.p, s.w, 6))).join('\n    ')}
     <path d="${region(EAR_L)}" fill="${t.paper}"/>
@@ -655,6 +689,7 @@ function markup(id, t) {
     ${ink(taper(EAR_R_IN, [2, 4, 2]))}
     <path d="${HOOP_L}" fill="${t.accent}"/>
     <path d="${HOOP_R}" fill="${t.accent}"/>
+    </g>
   </g>
 </svg>`;
 }
@@ -673,7 +708,10 @@ export function createFace(mount, theme = {}) {
   const el = {
     head: $('head'), body: $('body'), features: $('features'), hair: $('hair'),
     browL: $('browL'), browR: $('browR'),
-    eyes: $('eyes'), eyeL: $('eyeL'), eyeR: $('eyeR'),
+    eyeL: $('eyeL'), eyeR: $('eyeR'),
+    clipEyeL: $('clipEyeLP'), clipEyeR: $('clipEyeRP'),
+    apertureL: $('apertureL'), apertureR: $('apertureR'),
+    irisL: $('irisL'), irisR: $('irisR'),
     lashL: $('lashL'), lashR: $('lashR'),
     mouthIn: $('mouthIn'), lips: $('lips'),
     clipMouth: $('clipMouthP'),
@@ -683,19 +721,35 @@ export function createFace(mount, theme = {}) {
   function apply(p) {
     poseTransforms(p, set, el, POSE);
 
-    // Re-derived for the big lenses: outboard the bean edge at full travel is
-    // still ~24 units clear of the rim (56+14+15 vs the 109-unit interior
-    // edge), inboard ~16; vertically the 38-unit half-interior leaves ~15.
-    // Past these the pupil starts reading pressed against the frame.
-    set(el.eyes, 'transform', `translate(${f(p.pupilX * 14)} ${f(p.pupilY * 10)})`);
-
+    // The lid line holds still and the iris carries the gaze — see the eyes
+    // section. The lid follows vertical gaze downward only: looking up
+    // genuinely does widen the aperture, so there is nothing to add there.
     const lidFollow = Math.max(0, p.pupilY) * 0.22;
     const lidL = p.lidL + lidFollow;
     const lidR = p.lidR + lidFollow;
     // Both beans exactly on EYE.y: a ±1 stagger here read as head tilt at
     // rest, and rest must be level (see BROW_R).
-    set(el.eyeL, 'd', eyePath(CX - EYE.dx, EYE.y, lidL, p.squintL, -3));
-    set(el.eyeR, 'd', eyePath(CX + EYE.dx, EYE.y, lidR, p.squintR, 3));
+    const eye = (cx, cy, lid, squint, tilt, aperture, iris, clip) => {
+      const g = eyeGeom(cy, lid, squint);
+      const ap = apertureGeom(g);
+      const apD = lensPath(cx, cy, ap, tilt);
+      set(el[aperture], 'd', apD);
+      // The iris is clipped to the APERTURE, not to the lid line, so it is
+      // cropped by the same edge the paper is — a shut lid, which has no
+      // aperture at all, takes the iris with it and needs no opacity logic.
+      set(el[clip], 'd', apD);
+      set(el[iris], 'cx', f(cx + p.pupilX * IRIS_TRAVEL.x));
+      // Anchored to the aperture's midline rather than the eye's, so a
+      // half-closed eye keeps the iris centred in the slit instead of showing
+      // a band of paper above it.
+      set(el[iris], 'cy', f((ap ? ap.cyMid : cy) + p.pupilY * IRIS_TRAVEL.y));
+      set(el[iris], 'r', f(IRIS_R));
+      return lensPath(cx, cy, g, tilt);
+    };
+    set(el.eyeL, 'd', eye(CX - EYE.dx, EYE.y, lidL, p.squintL, -3,
+                          'apertureL', 'irisL', 'clipEyeL'));
+    set(el.eyeR, 'd', eye(CX + EYE.dx, EYE.y, lidR, p.squintR, 3,
+                          'apertureR', 'irisR', 'clipEyeR'));
     set(el.lashL, 'd', lashPath(CX - EYE.dx, EYE.y, lidL, -1));
     set(el.lashR, 'd', lashPath(CX + EYE.dx, EYE.y, lidR, 1));
 
@@ -723,3 +777,10 @@ export function createFace(mount, theme = {}) {
 
   return faceApi(mount, svg, apply, t);
 }
+
+/**
+ * This face as a **Face** record — `{ create, meta }`, the shape
+ * `createAvatar({ face })` takes. Importing it costs this drawing and nothing
+ * else; `src/faces.js` is the all-three table, for tooling.
+ */
+export const myna = { create: createFace, meta: META };