@diffenderfer-games/hub 2.0.0-next.10 → 2.0.0-next.11

package/dist/shared/svg-markup.js

@@ -232,12 +232,12 @@ const FRAMES = {
 		206
 	]
 };
-/** The walker's full frame: a smaller head, and room for feet hanging below a seat. */
+/** The walker's full frame: a short, chunky figure, with room for hats, jumps and feet dangling below a seat. */
 const WALKER_FULL = [
 	-60,
-	-176,
+	-144,
 	120,
-	214
+	170
 ];
 /** True when options draw the walker figure (full frames only). */
 function isWalker(opts) {
@@ -1650,42 +1650,49 @@ function limb(points, width, fill, ink) {
 		cap: "round"
 	})];
 }
-/** A shoe at a foot point, nudged along the facing. */
+/** A shoe at a foot point, nudged along the facing: round and stubby. */
 function shoe(at, forward, o) {
-	return ellipse(at[0] + forward[0] * 2.4, at[1] + forward[1] * 1.6 - 1.5, 6.2 + Math.abs(forward[0]) * 1.4, 3.8, {
+	return ellipse(at[0] + forward[0] * 2.4, at[1] + forward[1] * 1.6 - 1.6, 7.2 + Math.abs(forward[0]) * 1.4, 4.1, {
 		fill: o.shoes,
 		stroke: o.shoesInk,
 		sw: LINE * .8
 	});
 }
-/** A hand. */
+/** A hand: a round mitten. */
 function hand(c, at) {
-	return ellipse(at[0], at[1], 4.3, 4.3, {
+	return ellipse(at[0], at[1], 5.2, 5.2, {
 		fill: c.skin,
 		stroke: c.skinInk,
 		sw: LINE * .8
 	});
 }
+/** The torso's half-widths (before the turn's width factor): square shoulders over a round belly. */
+const TORSO = {
+	shoulder: 20,
+	belly: 23.5,
+	hip: 21
+};
 /** The torso's outline: shoulders at `top`, the hem at `hem`, `w` its width factor (narrower when turned). */
 function torsoPath(w, top, hem) {
-	const shoulder = 17.5 * w;
-	const waist = 14.5 * w;
-	const hip = 15.5 * w;
-	const mid = (top + hem) / 2 + 4;
-	return new Path().m(-shoulder, top + 6).c(-shoulder, top - 1, -shoulder + 5, top - 3, -shoulder * .35, top - 3).l(shoulder * .35, top - 3).c(shoulder - 5, top - 3, shoulder, top - 1, shoulder, top + 6).l(waist, mid).l(hip, hem).q(0, hem + 3, -hip, hem).l(-waist, mid).z().d();
+	const shoulder = TORSO.shoulder * w;
+	const belly = TORSO.belly * w;
+	const hip = TORSO.hip * w;
+	const mid = (top + hem) / 2 + 2;
+	return new Path().m(-shoulder, top + 5).c(-shoulder, top - 1, -shoulder + 6, top - 3, -shoulder * .35, top - 3).l(shoulder * .35, top - 3).c(shoulder - 6, top - 3, shoulder, top - 1, shoulder, top + 5).c(belly, mid - 4, belly, mid + 4, hip, hem - 1).q(0, hem + 4, -hip, hem - 1).c(-belly, mid + 4, -belly, mid - 4, -shoulder, top + 5).z().d();
 }
 /** The shirt: a shade base, the lit front, the outline, and the neckline (front) or collar (back). */
 function shirt(c, w, top, hem, lean, isBack) {
 	const d = torsoPath(w, top, hem);
 	const cy = (top + hem) / 2;
+	const hemHalf = (TORSO.hip - 3) * w;
 	const nodes = [
 		path(d, { fill: c.bodyShade }),
 		g([path(d, { fill: c.body })], { tf: [
 			tr(-1.5 - lean * 2, cy - 1.5),
-			sc(.9, .94),
+			sc(.88, .9),
 			tr(0, -cy)
 		] }),
-		path(`M${String(-15 * w)} ${String(hem - 2.5)}Q0 ${String(hem + .5)} ${String(15 * w)} ${String(hem - 2.5)}`, {
+		path(`M${String(-hemHalf)} ${String(hem - 2)}Q0 ${String(hem + 1.5)} ${String(hemHalf)} ${String(hem - 2)}`, {
 			fill: "none",
 			stroke: shade(c.bodyShade),
 			sw: 2.2,
@@ -1703,7 +1710,7 @@ function shirt(c, w, top, hem, lean, isBack) {
 		stroke: c.bodyShade,
 		sw: 3
 	}));
-	else nodes.push(path(`M${String(neckX - 6 * w)} ${String(top - 2.6)}Q${String(neckX)} ${String(top + 6)} ${String(neckX + 6 * w)} ${String(top - 2.6)}Z`, {
+	else nodes.push(path(`M${String(neckX - 6 * w)} ${String(top - 2.6)}Q${String(neckX)} ${String(top + 5)} ${String(neckX + 6 * w)} ${String(top - 2.6)}Z`, {
 		fill: c.skin,
 		stroke: c.bodyInk,
 		sw: LINE * .8
@@ -1712,16 +1719,16 @@ function shirt(c, w, top, hem, lean, isBack) {
 }
 /** The seat of the trousers joining the legs under the hem. */
 function hips(o, w, hipY) {
-	const half = 12 * w;
+	const half = 16 * w;
 	return path(new Path().m(-half, hipY - 4).l(half, hipY - 4).l(half, hipY + 4).q(0, hipY + 9, -half, hipY + 4).z().d(), {
 		fill: o.trousers,
 		stroke: o.trousersInk,
 		sw: LINE * .8
 	});
 }
-/** The neck under the head. */
+/** The neck under the head (a short one: the big head sits almost on the shoulders). */
 function neck(c, top, dx) {
-	return path(new Path().m(dx - 4.5, top - 10).l(dx + 4.5, top - 10).l(dx + 4.5, top).l(dx - 4.5, top).z().d(), {
+	return path(new Path().m(dx - 5, top - 6).l(dx + 5, top - 6).l(dx + 5, top).l(dx - 5, top).z().d(), {
 		fill: c.skinShade,
 		stroke: c.skinInk,
 		sw: LINE * .6
@@ -1730,37 +1737,44 @@ function neck(c, top, dx) {
 //#endregion
 //#region src/avatar/render/walker.ts
 /**
-* The world walker (`figure: 'walker'`): a small full-body character for
-* maps and crowds, with legs, arms, a shirt, trousers and shoes, and the
-* head drawn smaller on top ({@link WALKER_HEAD_SCALE}). It takes the blob's
-* pose names: `walk` and `run` swing the legs and arms along the facing,
-* `sit` folds the legs over a seat, `idle` breathes, `wave` and `cheer` lift
-* the arms.
+* The world walker (`figure: 'walker'`): a small, chunky, chibi-like
+* full-body character for maps and crowds: a short round body with stubby
+* legs and arms, a shirt, trousers and shoes, and a big head on top
+* ({@link WALKER_HEAD_SCALE}). It takes the blob's pose names: `walk` and
+* `run` waddle (quick steps that bounce and rock from foot to foot), `sit`
+* folds the legs over a seat, `idle` breathes, `wave` and `cheer` lift the
+* arms.
 *
 * Standing, the origin is the feet. Sitting (`sit`, `play`), the origin is
-* the seat: the hips rest on it and the feet hang {@link WALKER_SEAT_DROP}
-* units below, on the floor in front of it.
+* the seat: the hips rest on it and the short legs dangle over its front
+* edge, the feet {@link WALKER_SEAT_DROP} units below it.
 */
 /** The head's scale on a walker (the blob draws it at 1). */
-const WALKER_HEAD_SCALE = .58;
-/** How far below the seat a sitter's feet reach (rig units). */
-const WALKER_SEAT_DROP = 26;
-const STANDING = {
-	hip: -35,
-	shoulder: -72,
-	head: -103
+const WALKER_HEAD_SCALE = .62;
+/** How far below the seat a sitter's dangling feet reach (rig units): short legs swing clear of the floor. */
+const WALKER_SEAT_DROP = 13;
+/** Standing: a short, round body (half the first walker's 72 units to the shoulders) under the head. */
+const WALKER_STANDING = {
+	hip: -18,
+	shoulder: -38,
+	head: -70
 };
 const SEATED = {
 	hip: -3,
-	shoulder: -40,
-	head: -71
+	shoulder: -23,
+	head: -55
 };
-const LEG = 32;
-const UPPER_ARM = 13;
-const FOREARM = 12;
-const LEG_W = 10.5;
-const SLEEVE_W = 10;
-const ARM_W = 7.5;
+const LEG = 18;
+const UPPER_ARM = 8;
+const FOREARM = 7;
+const LEG_W = 13;
+const SLEEVE_W = 12.5;
+const ARM_W = 9;
+/** How far out the hips and shoulders sit from the middle. */
+const HIP_X = 7.5;
+const SHOULDER_X = 19;
+/** The seated thigh, along the facing. */
+const THIGH = 9;
 const DEG$1 = Math.PI / 180;
 function viewOf(angleDeg) {
 	const side = Math.sin(angleDeg * DEG$1);
@@ -1770,7 +1784,7 @@ function viewOf(angleDeg) {
 		front,
 		forward: [side, front * .45],
 		isBack: angleDeg > 90,
-		width: 1 - .36 * Math.abs(side)
+		width: 1 - .26 * Math.abs(side)
 	};
 }
 /** A body side's screen x for a lateral distance (sides overlap when turned). */
@@ -1778,78 +1792,102 @@ const lateralX = (v, sideOf, distance) => sideOf * distance * v.front;
 /** How near the viewer a side is (> 0: drawn in front when turned). */
 const nearness = (v, sideOf) => -sideOf * v.side;
 const add = (a, b, k = 1) => [a[0] + b[0] * k, a[1] + b[1] * k];
+/** The walk's and run's step: stride angle, foot lift, bounce and side-to-side rock (degrees). */
+const GAIT = {
+	walk: {
+		stride: 36,
+		lift: 3.6,
+		bounce: 3.2,
+		rock: 5
+	},
+	run: {
+		stride: 46,
+		lift: 5.4,
+		bounce: 4.4,
+		rock: 3.5
+	}
+};
+/** The gait a pose steps with, if it steps. */
+function gaitOf(pose) {
+	return pose === "run" ? GAIT.run : pose === "walk" || pose === "dance" ? GAIT.walk : null;
+}
+/** A shoulder joint: out at the torso's edge (narrower when turned), nudged along the facing. */
+const shoulderAt = (v, h, sideOf, bob) => [lateralX(v, sideOf, SHOULDER_X * v.width) + v.forward[0] * 1.5, h.shoulder + 4 + bob];
 function standingLimbs(v, h, pose, phase, bob) {
-	const isRun = pose === "run";
-	const isWalking = pose === "walk" || isRun || pose === "dance";
-	const stride = isRun ? 38 : 27;
-	const swingOf = (sideOf) => isWalking ? Math.sin((phase + (sideOf === 1 ? 0 : .5)) * Math.PI * 2) : 0;
+	const gait = gaitOf(pose);
+	const stepOf = (sideOf) => (phase + (sideOf === 1 ? 0 : .5)) * Math.PI * 2;
+	const swingOf = (sideOf) => gait ? Math.sin(stepOf(sideOf)) : 0;
 	return {
 		leg: (sideOf) => {
-			const hip = [lateralX(v, sideOf, 6), h.hip + bob];
-			const swing = swingOf(sideOf);
-			const lift = isWalking ? Math.max(0, Math.cos((phase + (sideOf === 1 ? 0 : .5)) * Math.PI * 2)) * (isRun ? 7 : 4.5) : 0;
-			const reach = Math.sin(stride * DEG$1) * LEG * swing;
+			const hip = [lateralX(v, sideOf, HIP_X), h.hip + bob];
+			const lift = gait ? Math.max(0, Math.cos(stepOf(sideOf))) * gait.lift : 0;
+			const reach = gait ? Math.sin(gait.stride * DEG$1) * LEG * swingOf(sideOf) : 0;
 			const foot = [hip[0] + v.forward[0] * reach, -bob * .2 + v.forward[1] * reach - lift];
 			return [
 				hip,
-				[(hip[0] + foot[0]) / 2 + v.forward[0] * lift * .9, (hip[1] + foot[1]) / 2 + v.forward[1] * lift * .9],
+				[(hip[0] + foot[0]) / 2 + v.forward[0] * lift, (hip[1] + foot[1]) / 2 + v.forward[1] * lift],
 				foot
 			];
 		},
 		arm: (sideOf) => {
-			const shoulder = [lateralX(v, sideOf, 15.5 * v.width) + v.forward[0] * 1.5, h.shoulder + 4 + bob];
-			const out = sideOf * v.front * 2.2;
+			const shoulder = shoulderAt(v, h, sideOf, bob);
+			const out = sideOf * v.front * 3.4;
 			if (pose === "cheer" || pose === "wave" && sideOf === -1) {
-				const wave = pose === "wave" ? Math.sin(phase * Math.PI * 2) * 4 : 0;
-				const elbow = [shoulder[0] + out * 3, shoulder[1] - 10];
+				const wave = pose === "wave" ? Math.sin(phase * Math.PI * 2) * 3 : 0;
+				const elbow = [shoulder[0] + out * 2.2, shoulder[1] - 7];
 				return [
 					shoulder,
 					elbow,
-					[elbow[0] + out * 1.5 + wave, elbow[1] - 12]
+					[elbow[0] + out * .8 + wave, elbow[1] - 10]
 				];
 			}
-			const swing = isWalking ? -swingOf(sideOf) * (isRun ? 1.3 : 1) : Math.sin(phase * Math.PI * 2) * .06;
-			const reach = Math.sin(24 * DEG$1) * swing;
+			const swing = gait ? -swingOf(sideOf) * (pose === "run" ? 1.4 : 1.1) : Math.sin(phase * Math.PI * 2) * .06;
+			const reach = Math.sin(30 * DEG$1) * swing;
 			const elbow = [shoulder[0] + out + v.forward[0] * UPPER_ARM * reach * .6, shoulder[1] + UPPER_ARM + v.forward[1] * UPPER_ARM * reach];
 			return [
 				shoulder,
 				elbow,
-				[elbow[0] + out * .4 + v.forward[0] * FOREARM * reach * 1.6, elbow[1] + FOREARM - Math.abs(reach) * 3 + v.forward[1] * FOREARM * reach]
+				[elbow[0] + out * .35 + v.forward[0] * FOREARM * reach * 1.6, elbow[1] + FOREARM - Math.abs(reach) * 2 + v.forward[1] * FOREARM * reach]
 			];
 		}
 	};
 }
 function seatedLimbs(v, h, pose) {
-	const thigh = [v.forward[0] * 15, v.forward[1] * 16];
+	const thigh = [v.forward[0] * THIGH, v.forward[1] * 10];
 	return {
 		leg: (sideOf) => {
-			const hip = [lateralX(v, sideOf, 6), h.hip];
+			const hip = [lateralX(v, sideOf, HIP_X), h.hip];
 			const knee = add(hip, thigh);
 			return [
 				hip,
 				knee,
-				[knee[0] + v.forward[0] * 3, 24]
+				[knee[0] + v.forward[0] * 2, 11]
 			];
 		},
 		arm: (sideOf) => {
-			const shoulder = [lateralX(v, sideOf, 15.5 * v.width) + v.forward[0] * 1.5, h.shoulder + 4];
+			const shoulder = shoulderAt(v, h, sideOf, 0);
 			return [
 				shoulder,
-				[shoulder[0] + sideOf * v.front * 2 + v.forward[0] * 3, shoulder[1] + UPPER_ARM],
-				add([lateralX(v, sideOf, pose === "play" ? 4 : 7), h.hip - 4], thigh, pose === "play" ? .9 : .6)
+				[shoulder[0] + sideOf * v.front * 3 + v.forward[0] * 2, shoulder[1] + UPPER_ARM],
+				add([lateralX(v, sideOf, pose === "play" ? 4 : 8), h.hip - 3], thigh, pose === "play" ? .9 : .6)
 			];
 		}
 	};
 }
+/** The long-hair split in head space: a little above the torso's top edge (the first walker's line sat 12 head units above it). */
+function shoulderLineOf(torsoTop, headY) {
+	return (torsoTop - 3 - headY) / WALKER_HEAD_SCALE - 12;
+}
 /** The walker's drawing for a pose, at a facing angle (0 = S, 180 = N; west facings are mirrored by the caller). */
 function walkerLayout(c, pose, angleDeg, phase, outfit = outfitFor(c)) {
 	const v = viewOf(angleDeg);
 	const isSitting = pose === "sit" || pose === "play";
-	const h = isSitting ? SEATED : STANDING;
+	const h = isSitting ? SEATED : WALKER_STANDING;
 	const cycle = Math.sin(phase * Math.PI * 2);
-	const isWalking = pose === "walk" || pose === "run" || pose === "dance";
-	const hop = pose === "jump" || pose === "cheer" ? Math.abs(Math.sin(phase * Math.PI)) * (pose === "jump" ? 16 : 8) : 0;
-	const bob = isWalking ? -2.2 * (1 - Math.abs(cycle)) : pose === "idle" ? cycle * .6 : 0;
+	const gait = isSitting ? null : gaitOf(pose);
+	const hop = pose === "jump" || pose === "cheer" ? Math.abs(Math.sin(phase * Math.PI)) * (pose === "jump" ? 12 : 6) : 0;
+	const bob = gait ? -gait.bounce * (1 - Math.abs(cycle)) : pose === "idle" ? cycle * .6 : 0;
+	const rock = gait ? cycle * gait.rock * (.4 + .6 * Math.abs(v.front)) : 0;
 	const limbs = isSitting ? seatedLimbs(v, h, pose) : standingLimbs(v, h, pose, phase, bob);
 	const o = outfit;
 	const [farSide, nearSide] = nearness(v, 1) > nearness(v, -1) ? [-1, 1] : [1, -1];
@@ -1863,7 +1901,7 @@ function walkerLayout(c, pose, angleDeg, phase, outfit = outfitFor(c)) {
 				elbow,
 				wrist
 			], ARM_W, c.skin, c.skinInk),
-			...limb([shoulder, add(shoulder, [elbow[0] - shoulder[0], elbow[1] - shoulder[1]], .62)], SLEEVE_W, c.body, c.bodyInk),
+			...limb([shoulder, add(shoulder, [elbow[0] - shoulder[0], elbow[1] - shoulder[1]], .7)], SLEEVE_W, c.body, c.bodyInk),
 			hand(c, wrist)
 		];
 	};
@@ -1872,29 +1910,33 @@ function walkerLayout(c, pose, angleDeg, phase, outfit = outfitFor(c)) {
 		const foot = points[2];
 		return [...limb(points, LEG_W, o.trousers, o.trousersInk), shoe(foot, v.forward, o)];
 	};
-	const torso = shirt(c, v.width, h.shoulder + (isWalking ? bob : 0), h.hip + 3 + (isWalking ? bob : 0), lean, v.isBack);
+	const torsoTop = h.shoulder + bob;
+	const torso = shirt(c, v.width, torsoTop, h.hip + 3 + bob, lean, v.isBack);
 	const isTucked = isSitting && v.isBack;
 	const behind = isTucked ? [...armNodes(farSide), ...armNodes(nearSide)] : isTurned ? armNodes(farSide) : [];
 	const isLegsFirst = v.isBack || !isSitting;
 	const legs = isTucked ? [] : [...legNodes(farSide), ...legNodes(nearSide)];
 	const body = [
 		...isLegsFirst ? legs : [],
-		hips(o, v.width, h.hip + (isWalking ? bob : 0)),
-		neck(c, h.shoulder + bob, v.forward[0] * 2),
+		hips(o, v.width, h.hip + bob),
+		neck(c, torsoTop, v.forward[0] * 2),
 		...torso,
 		...isLegsFirst ? [] : legs,
 		...isTucked ? [] : isTurned ? armNodes(nearSide) : [...armNodes(-1), ...armNodes(1)]
 	];
-	const prop = add([0, h.hip - 12], v.forward, 8);
+	const rocked = (nodes) => rock === 0 || nodes.length === 0 ? nodes : [g(nodes, { tf: [rot(rock)] })];
+	const headY = h.head + bob * 1.1;
+	const prop = add([0, h.hip - 6], v.forward, 8);
 	return {
-		behind,
-		body,
+		behind: rocked(behind),
+		body: rocked(body),
 		front: [],
-		headDx: v.forward[0] * 1.5,
+		headDx: v.forward[0] * 1.5 - headY * Math.sin(rock * DEG$1),
 		headDy: 0,
-		headY: h.head + bob * 1.1,
+		headY,
 		headScale: WALKER_HEAD_SCALE,
-		tilt: isWalking ? v.side * 2 : 0,
+		shoulderLine: shoulderLineOf(torsoTop, headY),
+		tilt: (gait ? v.side * 2 : 0) + rock,
 		lift: hop,
 		prop: {
 			x: prop[0],
@@ -2021,24 +2063,37 @@ function backOfHead(phi) {
 		half: { shapes: [rect(-200, -200, 200 + cx, 400, {})] }
 	};
 }
-const ABOVE_SHOULDERS = { shapes: [rect(-200, -200, 400, 237, {}), path(HEAD_PATH.d(), {})] };
-const BELOW_SHOULDERS = { shapes: [rect(-200, 35, 400, 300, {})] };
+const splits = /* @__PURE__ */ new Map();
+/** The split at a shoulder line (head space), cached per line. */
+function shoulderSplit(line) {
+	const at = Math.round(line * 4) / 4;
+	let split = splits.get(at);
+	if (!split) {
+		split = {
+			y: at,
+			above: { shapes: [rect(-200, -200, 400, 200 + at + 1, {}), path(HEAD_PATH.d(), {})] },
+			below: { shapes: [rect(-200, at - 1, 400, 300, {})] }
+		};
+		splits.set(at, split);
+	}
+	return split;
+}
 /** True when a layer reaches below the shoulder line. */
-function hangs(shapes) {
-	return shapes?.some((s) => s.d.bottom() > 36) === true;
+function hangs(shapes, split) {
+	return shapes?.some((s) => s.d.bottom() > split.y) === true;
 }
 /** Splits a hair layer at the shoulders: the part above stays in `over`, the part below goes in `behind`. */
-function splitAtShoulders(nodes, doesHang, over, behind) {
+function splitAtShoulders(nodes, split, doesHang, over, behind) {
 	if (nodes.length === 0) return;
 	if (!doesHang) {
 		over.push(...nodes);
 		return;
 	}
-	over.push(g(nodes, { clip: ABOVE_SHOULDERS }));
-	behind.push(g(nodes, { clip: BELOW_SHOULDERS }));
+	over.push(g(nodes, { clip: split.above }));
+	behind.push(g(nodes, { clip: split.below }));
 }
 /** The front and side views of the head. */
-function frontHead(ctx, p, isPlaying, status, angle, gazeX) {
+function frontHead(ctx, p, isPlaying, status, angle, gazeX, split) {
 	const hatCut = p.hat && typeof p.hat.hides === "number" ? { shapes: [rect(-120, p.hat.hides, 240, 260, {})] } : void 0;
 	const isHairShown = !(p.hat && p.hat.hides === "all");
 	const cut = (nodes) => hatCut && nodes.length > 0 ? [g(nodes, { clip: hatCut })] : nodes;
@@ -2058,7 +2113,7 @@ function frontHead(ctx, p, isPlaying, status, angle, gazeX) {
 		const shift = (px, py) => [px * (.92 + .08 * co) - turnS * 5, py];
 		const clips = backOfHead(ctx.phi);
 		const onFarSide = (nodes) => nodes.length > 0 ? [g([g(nodes, { clip: clips.crescent })], { clip: clips.half })] : [];
-		if (isHairShown) splitAtShoulders(onFarSide(cut(paintShapes(ctx.c, hairTie, p.hair?.rear, shift))), hangs(p.hair?.rear), out, behindBody);
+		if (isHairShown) splitAtShoulders(onFarSide(cut(paintShapes(ctx.c, hairTie, p.hair?.rear, shift))), split, hangs(p.hair?.rear, split), out, behindBody);
 		if (p.hat) out.push(...onFarSide(paintShapes(ctx.c, hatTones, p.hat.rear, shift)));
 	}
 	if (!p.hat?.hidesEars) out.push(...ears(ctx, "front", p.earExtra));
@@ -2075,7 +2130,7 @@ function frontHead(ctx, p, isPlaying, status, angle, gazeX) {
 	out.push(...nose(ctx), ...mouth(ctx));
 	out.push(...paintShapes(ctx.c, hairTie, p.beard?.moustache, faceWarp));
 	if (isHairShown) {
-		splitAtShoulders(cut(paintShapes(ctx.c, hairTie, p.hair?.front, warpFront)), hangs(p.hair?.front), out, behindBody);
+		splitAtShoulders(cut(paintShapes(ctx.c, hairTie, p.hair?.front, warpFront)), split, hangs(p.hair?.front, split), out, behindBody);
 		if (p.hair?.front?.some((s) => s.clip === "head")) out.push(path(HEAD_PATH.d(), {
 			fill: "none",
 			stroke: ctx.c.skinInk,
@@ -2156,21 +2211,23 @@ function anchorsFor(headX, headY, top, prop, mirror) {
 		pod: at(0, 14)
 	};
 }
-/** The body for a figure: its layout, where the head centre goes, and the head's scale. */
+/** The body for a figure. */
 function figureLayout(c, opts, pose, phi, angle, phase) {
 	if (isWalker(opts)) {
 		const walker = walkerLayout(c, pose, angle, phase);
 		return {
 			b: walker,
 			headY: walker.headY,
-			headScale: walker.headScale
+			headScale: walker.headScale,
+			shoulderLine: walker.shoulderLine
 		};
 	}
 	const b = bodyLayout(c, pose, phi, phase, opts.stool === true);
 	return {
 		b,
 		headY: -96 + b.headDy,
-		headScale: 1
+		headScale: 1,
+		shoulderLine: 36
 	};
 }
 /** Composes a look (or `null` for the silhouette) with a pose. */
@@ -2184,7 +2241,7 @@ function composeAvatar(look, opts = {}) {
 		if (isWalker(opts)) {
 			const shape = walkerSilhouette();
 			return {
-				nodes: [...hasShadow ? [groundShadow(0, 18)] : [], ...shape.nodes],
+				nodes: [...hasShadow ? [groundShadow(0, 22)] : [], ...shape.nodes],
 				anchors: anchorsFor(0, shape.headY, shape.top, {
 					x: 0,
 					y: -40
@@ -2220,12 +2277,12 @@ function composeAvatar(look, opts = {}) {
 		blink: pose.blink ?? 0,
 		talk: pose.talk ?? 0
 	};
-	const { b, headY: bodyHeadY, headScale } = figureLayout(parts.c, opts, bodyPose, ctx.phi, angle, pose.phase ?? .25);
+	const { b, headY: bodyHeadY, headScale, shoulderLine } = figureLayout(parts.c, opts, bodyPose, ctx.phi, angle, pose.phase ?? .25);
 	const headX = b.headDx + (pose.bob?.x ?? 0);
 	const headY = bodyHeadY + (pose.bob?.y ?? 0);
 	const tilt = face.headTilt + b.tilt + (pose.tilt ?? 0);
 	const sq = face.squash + (pose.squash ?? 0);
-	const drawn = isBack ? backHead(ctx, parts, isPlaying, status, angle) : frontHead(ctx, parts, isPlaying, status, angle, gaze.x);
+	const drawn = isBack ? backHead(ctx, parts, isPlaying, status, angle) : frontHead(ctx, parts, isPlaying, status, angle, gaze.x, shoulderSplit(shoulderLine));
 	const headNodes = drawn.head;
 	const top = headY - (50 + Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0)) * headScale;
 	if (status === "crown") headNodes.push(...crown(Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0)));
@@ -2250,7 +2307,7 @@ function composeAvatar(look, opts = {}) {
 	];
 	const lifted = b.lift > 0 ? [g(character, { tf: [tr(0, -b.lift)] })] : character;
 	const rimmed = opts.rim ? [g(lifted, { rim: true })] : lifted;
-	const all = [...hasShadow ? [groundShadow(b.lift, headScale === 1 ? 36 : 18)] : [], ...rimmed];
+	const all = [...hasShadow ? [groundShadow(b.lift, headScale === 1 ? 36 : 22)] : [], ...rimmed];
 	const mirror = isMirrored ? -1 : 1;
 	return {
 		nodes: isMirrored ? [g(all, { tf: [sc(-1, 1)] })] : all,