@lemoncat7/dsh-theme-xiaohei 0.3.2 → 0.3.4

package/lib/gaze.js

@@ -43,14 +43,14 @@ export function installXiaoheiGaze(doc = typeof document === 'undefined' ? undef
         gaze.style.setProperty('--xiaohei-gaze-y', `${currentY.toFixed(3)}px`);
     };
     const wake = () => {
-        if (disposed || frameId !== 0 || gaze === undefined)
+        if (disposed || doc.hidden || frameId !== 0 || gaze === undefined)
             return;
         setMoving(true);
         frameId = win.requestAnimationFrame(tick);
     };
     const tick = (time) => {
         frameId = 0;
-        if (disposed || gaze === undefined || mascot === undefined)
+        if (disposed || doc.hidden || gaze === undefined || mascot === undefined)
             return;
         const target = resolveGazeTarget(doc, mascot, pointer, portalActive, behaviorDisabled());
         const elapsed = lastFrameTime === 0 ? 16 : Math.min(48, Math.max(1, time - lastFrameTime));
@@ -107,6 +107,17 @@ export function installXiaoheiGaze(doc = typeof document === 'undefined' ? undef
     };
     const onPreferenceChange = () => wake();
     const onStateChange = () => wake();
+    const onVisibilityChange = () => {
+        if (doc.hidden) {
+            if (frameId !== 0)
+                win.cancelAnimationFrame(frameId);
+            frameId = 0;
+            lastFrameTime = 0;
+            setMoving(false);
+        }
+        else
+            wake();
+    };
     const unsubscribeHostDom = subscribeXiaoheiHostDom(doc, attach);
     const stateObserver = new win.MutationObserver(onStateChange);
     stateObserver.observe(doc.documentElement, {
@@ -114,6 +125,7 @@ export function installXiaoheiGaze(doc = typeof document === 'undefined' ? undef
         attributeFilter: ['data-xiaohei-state'],
     });
     doc.addEventListener('pointermove', onPointerMove, { passive: true });
+    doc.addEventListener('visibilitychange', onVisibilityChange);
     doc.addEventListener('pointerleave', clearPointer);
     doc.addEventListener(XIAOHEI_PORTAL_ACTIVITY_EVENT, onPortalActivity);
     win.addEventListener('blur', clearPointer);
@@ -127,6 +139,7 @@ export function installXiaoheiGaze(doc = typeof document === 'undefined' ? undef
         unsubscribeHostDom();
         stateObserver.disconnect();
         doc.removeEventListener('pointermove', onPointerMove);
+        doc.removeEventListener('visibilitychange', onVisibilityChange);
         doc.removeEventListener('pointerleave', clearPointer);
         doc.removeEventListener(XIAOHEI_PORTAL_ACTIVITY_EVENT, onPortalActivity);
         win.removeEventListener('blur', clearPointer);

package/lib/metallic-brand-mark.js

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { XIAOHEI_BRAND_AVATAR } from './generated-identity.js';
 // Native wide/rail switches remount this slot. A tiny navigation mark does not
 // need a fresh GPU context and shader compilation on every toggle.
-let sidebarMetallicSnapshot;
+const metallicSnapshots = new Map();
 const VERTEX_SHADER = `#version 300 es
 precision highp float;
 in vec2 a_position;
@@ -170,7 +170,7 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
     const [ready, setReady] = useState(false);
     const visualSize = Math.max(24, size + 4);
     const context = size >= 32 ? 'hero' : 'sidebar';
-    const [snapshot, setSnapshot] = useState(context === 'sidebar' ? sidebarMetallicSnapshot : undefined);
+    const [snapshot, setSnapshot] = useState(metallicSnapshots.get(visualSize));
     useEffect(() => {
         if (snapshot !== undefined)
             return;
@@ -179,7 +179,7 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
             return;
         const gl = canvas.getContext('webgl2', {
             alpha: true,
-            antialias: true,
+            antialias: false,
             powerPreference: 'low-power',
             premultipliedAlpha: true,
         });
@@ -213,7 +213,7 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
         }
         const uniforms = Object.fromEntries(UNIFORM_NAMES.map(name => [name, gl.getUniformLocation(program, name)]));
         const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
-        const renderSize = Math.max(96, Math.ceil(visualSize * pixelRatio * 2));
+        const renderSize = Math.max(64, Math.ceil(visualSize * pixelRatio));
         canvas.width = renderSize;
         canvas.height = renderSize;
         gl.viewport(0, 0, renderSize, renderSize);
@@ -244,28 +244,13 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
         setRgb(gl, uniforms.u_darkColor, [0.025, 0.04, 0.045]);
         setRgb(gl, uniforms.u_tint, [0.84, 0.92, 0.89]);
         let disposed = false;
-        let visible = true;
-        let animationFrame;
-        let lastFrame = 0;
-        let metallicTime = 1450;
-        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const metallicTime = 1450;
         const texture = gl.createTexture();
         const image = new Image();
         const draw = () => {
             gl.uniform1f(uniforms.u_time, metallicTime);
             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
         };
-        const render = (now) => {
-            if (disposed)
-                return;
-            if (visible && document.visibilityState !== 'hidden' && now - lastFrame >= 40) {
-                const delta = lastFrame === 0 ? 0 : Math.min(80, now - lastFrame);
-                lastFrame = now;
-                metallicTime += delta * 0.11;
-                draw();
-            }
-            animationFrame = window.requestAnimationFrame(render);
-        };
         image.onload = () => {
             if (disposed || texture === null)
                 return;
@@ -279,29 +264,17 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
             gl.uniform1i(uniforms.u_tex, 0);
             draw();
-            if (context === 'sidebar') {
-                sidebarMetallicSnapshot = canvas.toDataURL();
-                setSnapshot(sidebarMetallicSnapshot);
-                return;
-            }
+            // Preserve the metallic appearance without a permanent GPU animation.
+            // Updating snapshot unmounts the canvas and runs the resource cleanup.
+            const result = canvas.toDataURL();
+            metallicSnapshots.set(visualSize, result);
+            setSnapshot(result);
             setReady(true);
-            if (!reduceMotion.matches)
-                animationFrame = window.requestAnimationFrame(render);
         };
         image.src = XIAOHEI_BRAND_AVATAR;
-        const visibilityObserver = typeof IntersectionObserver === 'function'
-            ? new IntersectionObserver(entries => {
-                visible = entries.some(entry => entry.isIntersecting);
-                if (visible)
-                    lastFrame = 0;
-            })
-            : undefined;
-        visibilityObserver?.observe(canvas);
         return () => {
             disposed = true;
-            if (animationFrame !== undefined)
-                window.cancelAnimationFrame(animationFrame);
-            visibilityObserver?.disconnect();
+            image.onload = null;
             if (texture !== null)
                 gl.deleteTexture(texture);
             gl.deleteBuffer(buffer);
@@ -312,12 +285,12 @@ export function XiaoheiMetallicBrandMark({ size, className }) {
     const geometry = {
         '--xiaohei-brand-mark-size': `${visualSize}px`,
     };
-    return (_jsxs("span", { className: className === undefined ? 'xiaohei-brand-mark' : `${className} xiaohei-brand-mark`, "data-brand-context": context, "data-metallic-ready": ready || snapshot !== undefined ? 'true' : 'false', style: geometry, "aria-hidden": "true", children: [_jsx("img", { className: "xiaohei-brand-mark__fallback", src: XIAOHEI_BRAND_AVATAR, alt: "" }), snapshot !== undefined
+    return (_jsxs("span", { className: className === undefined ? 'xiaohei-brand-mark' : `${className} xiaohei-brand-mark`, "data-brand-context": context, "data-xiaohei-sidebar-brand": context === 'sidebar' ? '' : undefined, "data-metallic-ready": ready || snapshot !== undefined ? 'true' : 'false', style: geometry, "aria-hidden": "true", children: [_jsx("img", { className: "xiaohei-brand-mark__fallback", src: XIAOHEI_BRAND_AVATAR, alt: "" }), snapshot !== undefined
                 ? _jsx("img", { className: "xiaohei-brand-mark__metal", src: snapshot, alt: "" })
                 : _jsx("canvas", { className: "xiaohei-brand-mark__metal", ref: canvasRef })] }));
 }
 /** Official sidebar brand-name occupant paired with the Xiaohei mark. */
 export function XiaoheiBrandName() {
-    return _jsx("span", { className: "xiaohei-brand-name", children: "\u7F57\u5C0F\u9ED1 \u00B7 \u5996\u7075\u4F1A\u9986" });
+    return _jsx("span", { className: "xiaohei-brand-name", "data-xiaohei-sidebar-brand": "", children: "\u7F57\u5C0F\u9ED1 \u00B7 \u5996\u7075\u4F1A\u9986" });
 }
 //# sourceMappingURL=metallic-brand-mark.js.map

package/lib/scene/character-expression.d.ts

@@ -0,0 +1,4 @@
+/** Fast closure, short hold, relaxed opening; zero velocity at each join. */
+export declare function blinkClosure(progress: number): number;
+export declare function attentionBlink(progress: number): number;
+//# sourceMappingURL=character-expression.d.ts.map

package/lib/scene/character-expression.js

@@ -0,0 +1,15 @@
+const smooth = (t) => { const x = Math.max(0, Math.min(1, t)); return x * x * (3 - 2 * x); };
+/** Fast closure, short hold, relaxed opening; zero velocity at each join. */
+export function blinkClosure(progress) {
+    if (progress <= 0 || progress >= 1)
+        return 0;
+    if (progress < .3)
+        return smooth(progress / .3);
+    if (progress < .4)
+        return 1;
+    return 1 - smooth((progress - .4) / .6);
+}
+export function attentionBlink(progress) {
+    return blinkClosure((progress - .12) / .16);
+}
+//# sourceMappingURL=character-expression.js.map

package/lib/scene/character-eye-material.d.ts

@@ -0,0 +1,13 @@
+import type { EyeRig } from './character-eye-rig.js';
+/** Quadratic lid ordinate at a horizontal art-space coordinate. */
+export declare function lidY(eye: EyeRig, control: readonly [number, number], x: number): number;
+/** Cache original ink and a locally textured skin plate, never read pixels per frame. */
+export declare function prepareEyeMaterial(doc: Document, source: CanvasRenderingContext2D, eye: EyeRig): {
+    ink: HTMLCanvasElement;
+    skin: HTMLCanvasElement;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=character-eye-material.d.ts.map

package/lib/scene/character-eye-material.js

@@ -0,0 +1,88 @@
+/** Quadratic lid ordinate at a horizontal art-space coordinate. */
+export function lidY(eye, control, x) {
+    let low = 0, high = 1;
+    for (let i = 0; i < 14; i++) {
+        const t = (low + high) / 2, s = 1 - t;
+        if (s * s * eye.left[0] + 2 * s * t * control[0] + t * t * eye.right[0] < x)
+            low = t;
+        else
+            high = t;
+    }
+    const t = (low + high) / 2, s = 1 - t;
+    return s * s * eye.left[1] + 2 * s * t * control[1] + t * t * eye.right[1];
+}
+/** Cache original ink and a locally textured skin plate, never read pixels per frame. */
+export function prepareEyeMaterial(doc, source, eye) {
+    const left = Math.floor(eye.left[0] - 9), right = Math.ceil(eye.right[0] + 9);
+    const top = Math.floor(Math.min(eye.upper[1], eye.left[1], eye.right[1]) - 5);
+    const bottom = Math.ceil(Math.max(eye.lower[1], eye.left[1], eye.right[1]) + 5);
+    const width = right - left, height = bottom - top;
+    const canvas = () => { const c = doc.createElement('canvas'); c.width = width; c.height = height; return c; };
+    const ink = canvas(), skin = canvas(), mask = canvas();
+    const ic = ink.getContext('2d'), sc = skin.getContext('2d'), mc = mask.getContext('2d');
+    const pixels = source.getImageData(0, 0, source.canvas.width, source.canvas.height);
+    const pixel = (x, y) => {
+        const offset = (Math.max(0, Math.min(pixels.height - 1, Math.round(y / 2))) * pixels.width + Math.max(0, Math.min(pixels.width - 1, Math.round(x / 2)))) * 4;
+        return [pixels.data[offset], pixels.data[offset + 1], pixels.data[offset + 2]];
+    };
+    const ref = pixel(...eye.skin), output = ic.createImageData(width, height), plate = sc.createImageData(width, height);
+    const isSkin = (c) => c.every((v, i) => Math.abs(v - ref[i]) < 25);
+    const skinAt = (x, y, c) => {
+        if (isSkin(c))
+            return c;
+        const sum = [ref[0] * .05, ref[1] * .05, ref[2] * .05];
+        let weight = .05;
+        // Inpaint from nearby matching face pixels, preserving local lighting.
+        // Source hair, green iris and dark ink cannot bleed into the skin plate.
+        for (const radius of [6, 12, 20, 30])
+            for (let i = 0; i < 8; i++) {
+                const p = pixel(x + Math.cos(i * Math.PI / 4) * radius, y + Math.sin(i * Math.PI / 4) * radius);
+                if (!isSkin(p))
+                    continue;
+                const w = 1 / radius;
+                weight += w;
+                for (let k = 0; k < 3; k++)
+                    sum[k] += p[k] * w;
+            }
+        return sum.map(v => Math.round(v / weight));
+    };
+    for (let x = 0; x < width; x++) {
+        const ax = left + x, upper = lidY(eye, eye.upper, ax);
+        // Restrict extraction to the upper lash: exclude eyebrow, pupil and hair.
+        for (let y = 0; y < height; y++) {
+            const ay = top + y, c = pixel(ax, ay), index = (y * width + x) * 4;
+            const darkness = 1 - (c[0] + c[1] + c[2]) / Math.max(1, ref[0] + ref[1] + ref[2]);
+            const green = c[1] > c[0] * 1.15 && c[1] > c[2] * 1.12;
+            const inBand = ay >= upper - 12 && ay <= upper + 3;
+            const alpha = inBand && !green ? Math.max(0, Math.min(1, (darkness - .3) / .35)) : 0;
+            output.data.set([...c, Math.round(alpha * 255)], index);
+            plate.data.set([...skinAt(ax, ay, c), 255], index);
+        }
+    }
+    ic.putImageData(output, 0, 0);
+    sc.putImageData(plate, 0, 0);
+    // Opaque coverage of extracted ink, including its antialiased fringe. Using
+    // the ink's original alpha here leaves a second, stationary lash behind.
+    const inkMask = mc.createImageData(width, height);
+    for (let i = 0; i < output.data.length; i += 4)
+        inkMask.data[i + 3] = output.data[i + 3] > 4 ? 255 : 0;
+    mc.putImageData(inkMask, 0, 0);
+    const expanded = canvas(), ec = expanded.getContext('2d');
+    for (const [dx, dy] of [[0, 0], [-1, 0], [1, 0], [0, -1], [0, 1]])
+        ec.drawImage(mask, dx, dy);
+    mc.drawImage(expanded, 0, 0);
+    mc.translate(-left, -top);
+    mc.beginPath();
+    mc.moveTo(eye.left[0] - 7, eye.left[1]);
+    mc.quadraticCurveTo(eye.upper[0], eye.upper[1] - 4, eye.right[0] + 7, eye.right[1]);
+    mc.quadraticCurveTo(eye.lower[0], eye.lower[1] + 20, eye.left[0] - 7, eye.left[1]);
+    mc.closePath();
+    mc.fill();
+    // Feather only a subpixel edge, not the eye or the whole character.
+    sc.globalCompositeOperation = 'destination-in';
+    sc.filter = 'blur(0.65px)';
+    sc.drawImage(mask, 0, 0);
+    sc.filter = 'none';
+    return { ink, skin, left, top, width, height };
+}
+//# sourceMappingURL=character-eye-material.js.map

package/lib/scene/character-eye-renderer.d.ts

@@ -0,0 +1,5 @@
+import { type EyeRig } from './character-eye-rig.js';
+import type { Point } from './character-motion-types.js';
+/** Prepare tiny iris surfaces once. Never shift a rectangular face/eye patch. */
+export declare function createEyeRenderer(ctx: CanvasRenderingContext2D, body: HTMLImageElement, eyes: readonly EyeRig[]): (gaze: Point, closure: number) => void;
+//# sourceMappingURL=character-eye-renderer.d.ts.map

package/lib/scene/character-eye-renderer.js

@@ -0,0 +1,80 @@
+import { clampGaze, eyelidControls } from './character-eye-rig.js';
+import { lidY, prepareEyeMaterial } from './character-eye-material.js';
+/** Prepare tiny iris surfaces once. Never shift a rectangular face/eye patch. */
+export function createEyeRenderer(ctx, body, eyes) {
+    const doc = ctx.canvas.ownerDocument;
+    const source = doc.createElement('canvas');
+    source.width = body.width;
+    source.height = body.height;
+    const sample = source.getContext('2d', { willReadFrequently: true });
+    sample.drawImage(body, 0, 0);
+    const color = (p) => {
+        const data = sample.getImageData(Math.round(p[0] / 2), Math.round(p[1] / 2), 1, 1).data;
+        return [data[0], data[1], data[2]];
+    };
+    const rgb = (c) => `rgb(${c.map(v => Math.round(v)).join(' ')})`;
+    const prepared = eyes.map(eye => {
+        const [cx, cy, rx, ry, angle] = eye.iris;
+        // Full-size local surface preserves source texels when moved fractionally.
+        const iris = doc.createElement('canvas');
+        iris.width = Math.ceil(rx * 2 + 4);
+        iris.height = Math.ceil(ry * 2 + 4);
+        const ic = iris.getContext('2d');
+        ic.translate(iris.width / 2, iris.height / 2);
+        ic.rotate(angle);
+        ic.beginPath();
+        ic.ellipse(0, 0, rx, ry, 0, 0, Math.PI * 2);
+        ic.clip();
+        ic.rotate(-angle);
+        ic.drawImage(body, 0, 0, body.width, body.height, -cx, -cy, body.width * 2, body.height * 2);
+        return { eye, iris, skin: color(eye.skin), material: prepareEyeMaterial(doc, sample, eye) };
+    });
+    function aperture(eye, closure) {
+        const { upper, lower, left, right } = eyelidControls(eye, closure);
+        ctx.beginPath();
+        ctx.moveTo(...left);
+        ctx.quadraticCurveTo(...upper, ...right);
+        ctx.quadraticCurveTo(...lower, ...left);
+        ctx.closePath();
+    }
+    return (gaze, closure) => {
+        const [gx, gy] = clampGaze(...gaze);
+        ctx.save();
+        ctx.scale(.5, .5);
+        for (const { eye, iris, skin, material } of prepared) {
+            const [cx, cy, rx, ry] = eye.iris;
+            ctx.save();
+            ctx.drawImage(material.skin, material.left, material.top);
+            ctx.save();
+            aperture(eye, 0);
+            ctx.clip();
+            if (closure < .999) {
+                ctx.save();
+                aperture(eye, closure);
+                ctx.clip();
+                const shade = ctx.createLinearGradient(0, cy - ry, 0, cy + ry);
+                const brightness = (skin[0] + skin[1] + skin[2]) / 765;
+                const white = brightness > .65 ? [255, 253, 241] : [166, 185, 193];
+                shade.addColorStop(0, rgb(white.map(c => c * .83)));
+                shade.addColorStop(.5, rgb(white));
+                ctx.fillStyle = shade;
+                ctx.fillRect(cx - 70, cy - 70, 140, 140);
+                const dx = gx * rx * .26, dy = gy * ry * .13;
+                ctx.drawImage(iris, cx - iris.width / 2 + dx, cy - iris.height / 2 + dy);
+                ctx.restore();
+            }
+            ctx.restore();
+            const lids = eyelidControls(eye, closure);
+            // Move narrow strips of the original brushwork, preserving lash thickness.
+            // Neither a replacement stroke nor an opacity swap is used for blinking.
+            for (let x = 0; x < material.width; x++) {
+                const ax = material.left + x;
+                const dy = lidY({ ...eye, left: lids.left, right: lids.right }, lids.upper, ax) - lidY(eye, eye.upper, ax);
+                ctx.drawImage(material.ink, x, 0, 1, material.height, ax, material.top + dy, 1, material.height);
+            }
+            ctx.restore();
+        }
+        ctx.restore();
+    };
+}
+//# sourceMappingURL=character-eye-renderer.js.map

package/lib/scene/character-eye-rig.d.ts

@@ -0,0 +1,20 @@
+import type { Point } from './character-motion-types.js';
+/** Landmarks in the approved full-resolution artwork, not screen coordinates. */
+export interface EyeRig {
+    left: Point;
+    right: Point;
+    upper: Point;
+    lower: Point;
+    iris: readonly [number, number, number, number, number];
+    skin: Point;
+}
+export declare const EYE_RIGS: Readonly<Record<string, readonly EyeRig[]>>;
+export declare function clampGaze(x: number, y: number): Point;
+/** Both lids meet on the same gently curved lash line, never a rectangular wipe. */
+export declare function eyelidControls(eye: EyeRig, closure: number): {
+    upper: Point;
+    lower: Point;
+    left: Point;
+    right: Point;
+};
+//# sourceMappingURL=character-eye-rig.d.ts.map

package/lib/scene/character-eye-rig.js

@@ -0,0 +1,35 @@
+export const EYE_RIGS = {
+    seated: [
+        { left: [285, 223], right: [326, 224], upper: [302, 188], lower: [310, 276], iris: [309, 230, 13, 20, 0], skin: [315, 258] },
+        { left: [373, 221], right: [421, 226], upper: [387, 186], lower: [393, 277], iris: [393, 228, 15, 22, 0], skin: [391, 261] },
+    ],
+    peek: [
+        { left: [80, 214], right: [119, 221], upper: [103, 186], lower: [91, 267], iris: [102, 225, 14, 20, .25], skin: [110, 253] },
+        { left: [171, 252], right: [210, 265], upper: [195, 221], lower: [175, 300], iris: [186, 260, 15, 20, .4], skin: [186, 288] },
+    ],
+    chin: [
+        { left: [252, 252], right: [290, 247], upper: [266, 223], lower: [287, 297], iris: [278, 258, 14, 19, -.3], skin: [291, 285] },
+        { left: [339, 234], right: [387, 227], upper: [358, 196], lower: [365, 280], iris: [361, 235, 15, 21, -.25], skin: [367, 269] },
+    ],
+    halfpeek: [
+        { left: [89, 390], right: [159, 395], upper: [116, 337], lower: [110, 471], iris: [116, 401, 23, 30, .22], skin: [117, 445] },
+    ],
+};
+export function clampGaze(x, y) {
+    if (!Number.isFinite(x) || !Number.isFinite(y))
+        return [0, 0];
+    const length = Math.max(1, Math.hypot(x, y));
+    return [x / length, y / length];
+}
+/** Both lids meet on the same gently curved lash line, never a rectangular wipe. */
+export function eyelidControls(eye, closure) {
+    const t = Math.max(0, Math.min(1, closure));
+    // Upper lid does most of the travel. Closing at the eye's centre looked like
+    // a squint; the resting lash sits near the lower rim instead.
+    const cornerY = (eye.left[1] + eye.right[1]) / 2;
+    const drop = (eye.lower[1] - cornerY) * .24;
+    const middle = [(eye.left[0] + eye.right[0]) / 2, cornerY + drop + (eye.right[0] - eye.left[0]) * .18];
+    const lerp = (p) => [p[0] + (middle[0] - p[0]) * t, p[1] + (middle[1] - p[1]) * t];
+    return { upper: lerp(eye.upper), lower: lerp(eye.lower), left: [eye.left[0], eye.left[1] + drop * t], right: [eye.right[0], eye.right[1] + drop * t] };
+}
+//# sourceMappingURL=character-eye-rig.js.map

package/lib/scene/character-gaze.d.ts

@@ -0,0 +1,16 @@
+import type { Point } from './character-motion-types.js';
+interface GazeClock {
+    requestAnimationFrame(callback: (time: number) => void): number;
+    cancelAnimationFrame(handle: number): void;
+    performance: {
+        now(): number;
+    };
+}
+/** Event-driven damping. At rest there are no queued frames or polling. */
+export declare function createCharacterGaze(clock: GazeClock, changed: (point: Point) => void): {
+    target(x: number, y: number): void;
+    reset(): void;
+    dispose(): void;
+};
+export {};
+//# sourceMappingURL=character-gaze.d.ts.map

package/lib/scene/character-gaze.js

@@ -0,0 +1,36 @@
+import { clampGaze } from './character-eye-rig.js';
+/** Event-driven damping. At rest there are no queued frames or polling. */
+export function createCharacterGaze(clock, changed) {
+    let value = [0, 0], target = [0, 0], frame, last = 0, disposed = false;
+    function step(now) {
+        frame = undefined;
+        if (disposed)
+            return;
+        const dt = Math.min(64, Math.max(0, now - last));
+        last = now;
+        const amount = 1 - Math.exp(-dt / 95);
+        value = [value[0] + (target[0] - value[0]) * amount, value[1] + (target[1] - value[1]) * amount];
+        const settled = Math.hypot(value[0] - target[0], value[1] - target[1]) < .001;
+        if (settled)
+            value = target;
+        changed(value);
+        if (!settled)
+            frame = clock.requestAnimationFrame(step);
+    }
+    function stop() { if (frame !== undefined)
+        clock.cancelAnimationFrame(frame); frame = undefined; }
+    return {
+        target(x, y) {
+            if (disposed)
+                return;
+            target = clampGaze(x, y);
+            if (frame === undefined && Math.hypot(value[0] - target[0], value[1] - target[1]) >= .001) {
+                last = clock.performance.now();
+                frame = clock.requestAnimationFrame(step);
+            }
+        },
+        reset() { stop(); target = value = [0, 0]; changed(value); },
+        dispose() { disposed = true; stop(); },
+    };
+}
+//# sourceMappingURL=character-gaze.js.map

package/lib/scene/character-motion-clock.d.ts

@@ -8,7 +8,7 @@ interface Clock {
 export interface CharacterMotionClip {
     duration: number;
 }
-/** One deadline; elapsed-time continuous sampling, capped at 30 fps. */
+/** One deadline; 60 fps only during a short gesture, no idle frame loop. */
 export declare function createCharacterMotionClock(clock: Clock, changed: (action: string | undefined, progress: number) => void, random?: () => number): {
     setClips(next: Readonly<Record<string, CharacterMotionClip>> | undefined): void;
     attention(): void;

package/lib/scene/character-motion-clock.js

@@ -1,7 +1,8 @@
-/** One deadline; elapsed-time continuous sampling, capped at 30 fps. */
+/** One deadline; 60 fps only during a short gesture, no idle frame loop. */
 export function createCharacterMotionClock(clock, changed, random = Math.random) {
-    let timer, disposed = false, turn = 0, active = '';
+    let timer, disposed = false, active = '';
     let clips;
+    let blinksSinceEar = 0, nextEar = 0;
     const clear = () => { if (timer !== undefined)
         clock.clearTimeout(timer); timer = undefined; };
     function rest() {
@@ -27,7 +28,7 @@ export function createCharacterMotionClock(clock, changed, random = Math.random)
                 rest();
                 return;
             }
-            timer = clock.setTimeout(step, 1000 / 30);
+            timer = clock.setTimeout(step, 1000 / 60);
         };
         step();
     }
@@ -36,7 +37,17 @@ export function createCharacterMotionClock(clock, changed, random = Math.random)
         if (!clips || disposed)
             return;
         const gestures = Object.keys(clips).filter(name => name !== 'blink' && name !== 'attention');
-        play((turn++ % 2 === 0 && clips.blink) || !gestures.length ? 'blink' : gestures[Math.floor(random() * gestures.length)]);
+        const ears = gestures.filter(name => name.startsWith('ear'));
+        // Random selection alone can starve ear motion indefinitely. Keep a quiet,
+        // bounded cadence, alternating ears instead of twitching both in lockstep.
+        const action = ears.length && blinksSinceEar >= 2 ? ears[nextEar++ % ears.length]
+            : (random() < .72 && clips.blink) || !gestures.length ? 'blink'
+                : gestures[Math.floor(random() * gestures.length)];
+        if (action.startsWith('ear'))
+            blinksSinceEar = 0;
+        else
+            blinksSinceEar++;
+        play(action);
     }
     return {
         setClips(next) {
@@ -45,6 +56,8 @@ export function createCharacterMotionClock(clock, changed, random = Math.random)
             clear();
             clips = next;
             active = '';
+            blinksSinceEar = 0;
+            nextEar = 0;
             changed(undefined, 0);
             if (clips)
                 timer = clock.setTimeout(start, 1200 + random() * 800);