aaavatars 2.0.0 → 3.0.0

package/dist/parts.js

@@ -3,17 +3,111 @@ const STROKE = { fill: "none", strokeLinecap: "round", strokeWidth: 4 };
 export function mouthSlot(geometry, color) {
     return { color, width: geometry.eyeGap * 1.2, x: 50, y: geometry.eyeY + 17 };
 }
-export function EyePair({ eyes, gap, y }) {
-    return (_jsx(_Fragment, { children: [50 - gap, 50 + gap].map((x) => {
-            if (eyes === "dot")
-                return _jsx("circle", { cx: x, cy: y, r: 7 }, x);
-            if (eyes === "tall") {
-                return _jsx("rect", { x: x - 5, y: y - 11, width: 10, height: 22, rx: 5 }, x);
-            }
-            if (eyes === "wide")
-                return _jsx("ellipse", { cx: x, cy: y, rx: 11, ry: 7 }, x);
-            return _jsx("ellipse", { cx: x, cy: y, rx: 8, ry: 10 }, x);
-        }) }));
+const EYE_HALF_HEIGHT = { dot: 7, round: 10, tall: 11, wide: 7 };
+const EYE_HALF_WIDTH = { dot: 7, round: 8, tall: 5, wide: 11 };
+const SEGMENTS = 12;
+const CROSS = [
+    [0, -3.5],
+    [5, -8.5],
+    [8.5, -5],
+    [3.5, 0],
+    [8.5, 5],
+    [5, 8.5],
+    [0, 3.5],
+    [-5, 8.5],
+    [-8.5, 5],
+    [-3.5, 0],
+    [-8.5, -5],
+    [-5, -8.5],
+];
+function arc(cx, cy, rx, ry, from, to) {
+    const k = (4 / 3) * Math.tan((to - from) / 4);
+    const point = (angle) => [cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)];
+    const tangent = (angle) => [-rx * Math.sin(angle), ry * Math.cos(angle)];
+    const [x0, y0] = point(from);
+    const [x1, y1] = point(to);
+    const [tx0, ty0] = tangent(from);
+    const [tx1, ty1] = tangent(to);
+    return [
+        [x0 + k * tx0, y0 + k * ty0],
+        [x1 - k * tx1, y1 - k * ty1],
+        [x1, y1],
+    ];
+}
+function line([x0, y0], [x1, y1]) {
+    return [
+        [x0 + (x1 - x0) / 3, y0 + (y1 - y0) / 3],
+        [x0 + ((x1 - x0) * 2) / 3, y0 + ((y1 - y0) * 2) / 3],
+        [x1, y1],
+    ];
+}
+function toPath(start, segments) {
+    const at = ([x, y]) => `${+x.toFixed(2)} ${+y.toFixed(2)}`;
+    return `M${at(start)}${segments.map((segment) => `C${segment.map(at).join(" ")}`).join("")}Z`;
+}
+const DEG = Math.PI / 180;
+function ellipse(rx, ry) {
+    const step = (2 * Math.PI) / SEGMENTS;
+    return toPath([0, -ry], Array.from({ length: SEGMENTS }, (_, index) => arc(0, 0, rx, ry, -90 * DEG + index * step, -90 * DEG + (index + 1) * step)));
+}
+function stadium(r, half) {
+    const top = r - half;
+    const bottom = half - r;
+    return toPath([0, -half], [
+        arc(0, top, r, r, 270 * DEG, 315 * DEG),
+        arc(0, top, r, r, 315 * DEG, 360 * DEG),
+        line([r, top], [r, 0]),
+        line([r, 0], [r, bottom]),
+        ...[0, 45, 90, 135].map((from) => arc(0, bottom, r, r, from * DEG, (from + 45) * DEG)),
+        line([-r, bottom], [-r, 0]),
+        line([-r, 0], [-r, top]),
+        arc(0, top, r, r, 180 * DEG, 225 * DEG),
+        arc(0, top, r, r, 225 * DEG, 270 * DEG),
+    ]);
+}
+function polygon(vertices, dx = 0) {
+    const shifted = vertices.map(([x, y]) => [x + dx, y]);
+    const edges = shifted.map((from, index) => ({ from, to: shifted[(index + 1) % shifted.length], parts: 1 }));
+    for (let count = edges.length; count < SEGMENTS; count += 1) {
+        const longest = edges.reduce((best, edge) => Math.hypot(edge.to[0] - edge.from[0], edge.to[1] - edge.from[1]) / edge.parts >
+            Math.hypot(best.to[0] - best.from[0], best.to[1] - best.from[1]) / best.parts
+            ? edge
+            : best);
+        longest.parts += 1;
+    }
+    const anchors = edges.flatMap(({ from, to, parts }) => Array.from({ length: parts }, (_, index) => [
+        from[0] + ((to[0] - from[0]) * index) / parts,
+        from[1] + ((to[1] - from[1]) * index) / parts,
+    ]));
+    const cx = shifted.reduce((sum, [x]) => sum + x, 0) / shifted.length;
+    const cy = shifted.reduce((sum, [, y]) => sum + y, 0) / shifted.length;
+    const offTop = ([x, y]) => Math.abs(Math.atan2(x - cx, cy - y));
+    const first = anchors.reduce((best, anchor, index) => (offTop(anchor) < offTop(anchors[best]) ? index : best), 0);
+    const ordered = [...anchors.slice(first), ...anchors.slice(0, first)];
+    return toPath(ordered[0], ordered.map((anchor, index) => line(anchor, ordered[(index + 1) % ordered.length])));
+}
+export function eyePath(eyes, pose, side, gap) {
+    if (pose === "cross")
+        return polygon(CROSS);
+    if (pose === "cursor")
+        return polygon([[-2, -13.5], [2, -13.5], [2, 13.5], [-2, 13.5]], -side * gap);
+    if (pose === "prompt" && side === -1) {
+        return polygon([[-8, -14], [0, -14], [10, 0], [0, 14], [-8, 14], [2, 0]], gap - 11.5);
+    }
+    if (pose === "prompt")
+        return polygon([[-9, 8.5], [9, 8.5], [9, 14], [-9, 14]], 10.5 - gap);
+    if (eyes === "tall")
+        return stadium(5, 11);
+    return ellipse(EYE_HALF_WIDTH[eyes], EYE_HALF_HEIGHT[eyes]);
+}
+function LidMask({ eyes, id, side }) {
+    const half = EYE_HALF_HEIGHT[eyes];
+    return (_jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", x: -20, y: -20, width: 40, height: 40, children: [_jsx("rect", { x: -20, y: -20, width: 40, height: 40, fill: "#fff" }), _jsx("rect", { className: `aaa-lid aaa-lid-top aaa-lid-${side}`, "data-h": half, x: -20, y: -half - 20, width: 40, height: 20, fill: "#000" }), _jsx("rect", { className: `aaa-lid aaa-lid-bottom aaa-lid-${side}`, "data-h": half, x: -20, y: half, width: 40, height: 20, fill: "#000" })] }));
+}
+export function EyePair({ eyes, gap, id, pose, y, }) {
+    const h = EYE_HALF_HEIGHT[eyes];
+    const w = EYE_HALF_WIDTH[eyes];
+    return (_jsx(_Fragment, { children: ["l", "r"].map((side) => (_jsx("g", { transform: `translate(${side === "l" ? 50 - gap : 50 + gap} ${y})`, children: _jsxs("g", { className: `aaa-eye aaa-eye-${side}`, "data-gap": gap, "data-h": h, "data-shape": pose, "data-w": w, style: { "--aaa-eye-h": h, "--aaa-eye-w": w }, children: [_jsx(LidMask, { eyes: eyes, id: `${id}-lid-${side}`, side: side }), _jsx("g", { mask: `url(#${id}-lid-${side})`, children: _jsx("path", { className: "aaa-shape", d: eyePath(eyes, pose, side === "l" ? -1 : 1, gap) }) })] }) }, side))) }));
 }
 export function MouthShape({ mouth, slot }) {
     const half = slot.width / 2;
@@ -28,11 +122,11 @@ export function MouthShape({ mouth, slot }) {
     }
     return null;
 }
-export const MOODS = ["happy", "sad", "o", "small"];
+export const MOODS = ["happy", "sad", "o", "small", "flat"];
 export function MoodMouths({ slot }) {
     const half = slot.width / 2;
     const { color, x, y } = slot;
-    return (_jsxs(_Fragment, { children: [_jsx("g", { className: "aaa-mood aaa-mood-happy", children: _jsx("path", { d: `M${x - half} ${y - 3}Q${x} ${y + 12} ${x + half} ${y - 3}Z`, fill: color }) }), _jsx("g", { className: "aaa-mood aaa-mood-sad", children: _jsx("path", { d: `M${x - half * 0.8} ${y + 4}Q${x} ${y - 5} ${x + half * 0.8} ${y + 4}`, stroke: color, ...STROKE }) }), _jsx("g", { className: "aaa-mood aaa-mood-o", children: _jsx("ellipse", { cx: x, cy: y + 1, rx: 5, ry: 6.5, fill: color }) }), _jsx("g", { className: "aaa-mood aaa-mood-small", children: _jsx("path", { d: `M${x + 1} ${y}H${x + 9}`, stroke: color, ...STROKE }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("g", { className: "aaa-mood aaa-mood-happy", children: _jsx("path", { d: `M${x - half} ${y - 3}Q${x} ${y + 12} ${x + half} ${y - 3}Z`, fill: color }) }), _jsx("g", { className: "aaa-mood aaa-mood-sad", children: _jsx("path", { d: `M${x - half * 0.8} ${y + 4}Q${x} ${y - 5} ${x + half * 0.8} ${y + 4}`, stroke: color, ...STROKE }) }), _jsx("g", { className: "aaa-mood aaa-mood-o", children: _jsx("ellipse", { cx: x, cy: y + 1, rx: 5, ry: 6.5, fill: color }) }), _jsx("g", { className: "aaa-mood aaa-mood-small", children: _jsx("path", { d: `M${x + 1} ${y}H${x + 9}`, stroke: color, ...STROKE }) }), _jsx("g", { className: "aaa-mood aaa-mood-flat", children: _jsx("path", { d: `M${x - half * 0.5} ${y + 1}H${x + half * 0.5}`, stroke: color, ...STROKE }) })] }));
 }
 export function AccessoryShape(props) {
     if (props.accessory === "none")

package/dist/pointer.d.ts

@@ -0,0 +1,2 @@
+export declare function restartGazeCentred(svg: SVGSVGElement): void;
+export declare function watchPointer(svg: SVGSVGElement): () => void;

package/dist/pointer.js

@@ -0,0 +1,95 @@
+const LOOK_X = 7;
+const LOOK_Y = 5;
+const HEAD_SHIFT = 2.2;
+const HEAD_TILT = 8;
+const STALE_MS = 900;
+const watchers = new Set();
+let pointer = null;
+let frame = 0;
+let staleTimer;
+const PROPERTIES = [
+    "--aaa-look-x",
+    "--aaa-look-y",
+    "--aaa-look-sx",
+    "--aaa-head-x",
+    "--aaa-head-y",
+    "--aaa-head-r",
+];
+const CENTRED_PHASES = [0, 0.41, 0.7];
+export function restartGazeCentred(svg) {
+    const phase = Number.parseFloat(svg.style.getPropertyValue("--aaa-phase")) || 0;
+    const cohort = Math.min(Math.floor(phase * CENTRED_PHASES.length), CENTRED_PHASES.length - 1);
+    const glancing = svg.dataset.gaze === "follow" || svg.dataset.gaze === "wander";
+    svg.style.setProperty("--aaa-gaze-phase", glancing ? String(CENTRED_PHASES[cohort]) : "0");
+}
+function release(svg) {
+    if (!svg.hasAttribute("data-pointer"))
+        return;
+    for (const property of PROPERTIES)
+        svg.style.removeProperty(property);
+    restartGazeCentred(svg);
+    svg.removeAttribute("data-pointer");
+}
+function clamp(value, limit) {
+    return Math.max(-limit, Math.min(limit, value));
+}
+function aim() {
+    frame = 0;
+    const targets = [...watchers]
+        .filter((svg) => !svg.hasAttribute("data-offscreen"))
+        .map((svg) => ({ svg, bounds: svg.getBoundingClientRect() }));
+    for (const { svg, bounds } of targets) {
+        if (!pointer || bounds.bottom < 0 || bounds.top > window.innerHeight) {
+            release(svg);
+            continue;
+        }
+        const size = Math.max(bounds.width, 1);
+        const dx = (pointer.x - (bounds.left + bounds.width / 2)) / size;
+        const dy = (pointer.y - (bounds.top + bounds.height / 2)) / size;
+        const x = clamp(dx * LOOK_X, LOOK_X);
+        const y = clamp(dy * LOOK_Y * 0.9, LOOK_Y);
+        const nx = x / LOOK_X;
+        const ny = y / LOOK_Y;
+        svg.setAttribute("data-pointer", "");
+        svg.style.setProperty("--aaa-look-x", `${x.toFixed(2)}px`);
+        svg.style.setProperty("--aaa-look-y", `${y.toFixed(2)}px`);
+        svg.style.setProperty("--aaa-look-sx", (1 - 0.06 * nx * nx).toFixed(3));
+        svg.style.setProperty("--aaa-head-x", `${(nx * HEAD_SHIFT).toFixed(2)}px`);
+        svg.style.setProperty("--aaa-head-y", `${(ny * HEAD_SHIFT).toFixed(2)}px`);
+        svg.style.setProperty("--aaa-head-r", `${(nx * ny * HEAD_TILT).toFixed(2)}deg`);
+    }
+}
+function schedule() {
+    if (!frame)
+        frame = requestAnimationFrame(aim);
+}
+function handleMove(event) {
+    if (event.pointerType === "touch")
+        return;
+    pointer = { x: event.clientX, y: event.clientY };
+    schedule();
+    clearTimeout(staleTimer);
+    staleTimer = setTimeout(handleLeave, STALE_MS);
+}
+function handleLeave() {
+    clearTimeout(staleTimer);
+    pointer = null;
+    schedule();
+}
+export function watchPointer(svg) {
+    if (watchers.size === 0) {
+        window.addEventListener("pointermove", handleMove, { passive: true });
+        document.documentElement.addEventListener("pointerleave", handleLeave);
+    }
+    watchers.add(svg);
+    return () => {
+        watchers.delete(svg);
+        release(svg);
+        if (watchers.size === 0) {
+            window.removeEventListener("pointermove", handleMove);
+            document.documentElement.removeEventListener("pointerleave", handleLeave);
+            clearTimeout(staleTimer);
+            pointer = null;
+        }
+    };
+}

package/dist/spec.d.ts

@@ -21,8 +21,10 @@ export interface AvatarSpec {
     mouth: Mouth;
     offsetX: number;
     offsetY: number;
+    phase: number;
     rotate: number;
     shape: Shape;
+    tempo: number;
 }
 export interface SpecOptions {
     accessory?: Accessory;

package/dist/spec.js

@@ -14,6 +14,8 @@ export const ACCESSORIES = ["none", "antenna", "sprout", "hat", "glasses", "bowt
 export const FILLS = ["solid", "gradient"];
 const BLINK_MIN_SECONDS = 5;
 const BLINK_SPREAD_SECONDS = 4;
+const TEMPO_MIN = 0.85;
+const TEMPO_SPREAD = 0.3;
 export const DEFAULT_COLORS = ["#264653", "#2A9D8F", "#E9C46A", "#F4A261", "#E76F51"];
 function hash(value) {
     let result = 2166136261;
@@ -37,6 +39,9 @@ function pick(items, random) {
 function roundTenth(value) {
     return Math.round(value * 10) / 10;
 }
+function roundHundredth(value) {
+    return Math.round(value * 100) / 100;
+}
 function signedRange(random, limit) {
     return Math.round((random() * 2 - 1) * limit);
 }
@@ -64,6 +69,8 @@ export function createSpec(name, options = {}) {
     const accent = accentCandidates.length ? pick(accentCandidates, random) : colors[0];
     const blinkDuration = roundTenth(BLINK_MIN_SECONDS + random() * BLINK_SPREAD_SECONDS);
     const blinkDelay = -roundTenth(random() * blinkDuration);
+    const tempo = roundHundredth(TEMPO_MIN + random() * TEMPO_SPREAD);
+    const phase = roundHundredth(random() * 0.99);
     const background = options.background ?? colors[backgroundIndex];
     const body = options.body ?? colors[bodyIndex];
     return {
@@ -78,8 +85,10 @@ export function createSpec(name, options = {}) {
         mouth: options.mouth ?? "none",
         offsetX,
         offsetY,
+        phase,
         rotate,
         shape: options.shape ?? shape,
+        tempo,
     };
 }
 export function shadeHex(hex, amount) {

package/dist/styles.d.ts

@@ -1 +1 @@
-export declare const AVATAR_CSS = "\n.aaa-body-motion,.aaa-react,.aaa-eyes-react,.aaa-eyes-motion,.aaa-blink,.aaa-squish{transform-box:fill-box;transform-origin:center}\n.aaa-mouth-rest,.aaa-mood{transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .2s}\n.aaa-mood{opacity:0}\n.aaa-accessory{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s ease-out}\n.aaa-accessory[data-accessory=glasses],.aaa-accessory[data-accessory=bowtie]{transform-origin:center}\n.aaa-squish{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}\n.aaa-squish[data-dragging]{transition:none}\n.aaa[data-interactive]{cursor:grab;touch-action:none}\n.aaa[data-interactive]:active{cursor:grabbing}\n.aaa-look{transform:translate(var(--aaa-look-x,0px),var(--aaa-look-y,0px));transition:transform .25s ease-out}\n.aaa-blink{animation:aaa-blink 7s infinite}\n.aaa[data-status=idle] .aaa-body-motion{animation:aaa-bob 3.6s ease-in-out infinite}\n.aaa[data-status=thinking] .aaa-body-motion{animation:aaa-sway 3s ease-in-out infinite}\n.aaa[data-status=thinking] .aaa-eyes-motion{transform:translate(-5px,-6px);animation:aaa-ponder 2.4s ease-in-out infinite}\n.aaa[data-status=working] .aaa-body-motion{animation:aaa-bob .9s ease-in-out infinite}\n.aaa[data-status=working] .aaa-eyes-motion{animation:aaa-scan 1.1s ease-in-out infinite}\n.aaa[data-status=waiting] .aaa-body-motion{animation:aaa-hop 1.6s ease-out infinite}\n.aaa[data-status=waiting] .aaa-eyes-motion{transform:scale(1.18)}\n.aaa[data-status=error] .aaa-body-motion{transform:rotate(-10deg)}\n.aaa[data-status=error] .aaa-eyes-motion{transform:scaleY(.25)}\n.aaa[data-status=error] .aaa-blink{animation:none}\n.aaa[data-status=sleeping] .aaa-body-motion{animation:aaa-breathe 4.2s ease-in-out infinite}\n.aaa[data-status=sleeping] .aaa-eyes-motion{transform:translateY(2px) scaleY(.12)}\n.aaa[data-status=sleeping] .aaa-blink{animation:none}\n.aaa[data-status=working] .aaa-antenna-tip{animation:aaa-signal .9s ease-in-out infinite}\n.aaa[data-status=thinking] .aaa-mouth-rest{opacity:0}\n.aaa[data-status=thinking] .aaa-mood-small{opacity:1}\n.aaa[data-status=thinking] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){animation:aaa-acc-sway 2.4s ease-in-out infinite}\n.aaa[data-status=thinking] .aaa-accessory[data-accessory=glasses]{animation:aaa-glasses-think 2.4s ease-in-out infinite}\n.aaa[data-status=working] .aaa-mouth-rest{transform:scaleX(.7)}\n.aaa[data-status=working] .aaa-accessory[data-accessory=bowtie]{animation:aaa-wobble .9s ease-in-out infinite}\n.aaa[data-status=waiting] .aaa-mouth-rest{opacity:0}\n.aaa[data-status=waiting] .aaa-mood-happy{opacity:1}\n.aaa[data-status=waiting] .aaa-accessory:not([data-accessory=glasses]){animation:aaa-wobble 1.6s ease-in-out infinite}\n.aaa[data-status=error] .aaa-mouth-rest{opacity:0}\n.aaa[data-status=error] .aaa-mood-sad{opacity:1}\n.aaa[data-status=error] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){transform:rotate(28deg)}\n.aaa[data-status=error] .aaa-accessory:is([data-accessory=hat],[data-accessory=glasses]){transform:translateY(3px) rotate(8deg)}\n.aaa[data-status=error] .aaa-accessory[data-accessory=bowtie]{transform:rotate(18deg)}\n.aaa[data-status=sleeping] .aaa-mouth-rest{opacity:0}\n.aaa[data-status=sleeping] .aaa-mood-o{opacity:1;animation:aaa-snore 4.2s ease-in-out infinite}\n.aaa[data-status=sleeping] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){transform:rotate(-35deg)}\n.aaa[data-status=sleeping] .aaa-accessory:is([data-accessory=hat],[data-accessory=glasses]){transform:translateY(5px)}\n.aaa[data-blink=off] .aaa-blink{animation:none}\n.aaa[data-motion=off] *{animation:none!important}\n@keyframes aaa-blink{0%,28%,32%,90%,94%,100%{transform:scaleY(1)}30%,92%{transform:scaleY(.1)}}\n@keyframes aaa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}\n@keyframes aaa-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}\n@keyframes aaa-ponder{0%,100%{transform:translate(-5px,-6px)}50%{transform:translate(5px,-6px)}}\n@keyframes aaa-scan{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}\n@keyframes aaa-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035,.97)}}\n@keyframes aaa-signal{0%,100%{opacity:1}50%{opacity:.25}}\n@keyframes aaa-acc-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}\n@keyframes aaa-wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}\n@keyframes aaa-glasses-think{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}\n@keyframes aaa-snore{0%,100%{transform:scale(.7)}50%{transform:scale(1.1)}}\n@keyframes aaa-hop{0%,55%,100%{transform:translateY(0)}68%{transform:translateY(-7px)}80%{transform:translateY(0)}90%{transform:translateY(-3px)}}\n@media (prefers-reduced-motion:reduce){.aaa *{animation:none!important;transition:none!important}}\n";
+export declare const AVATAR_CSS: string;

package/dist/styles.js

@@ -1,60 +1,255 @@
+const EASE_OUT = "cubic-bezier(.22,1,.36,1)";
+const EASE_SPRING = "cubic-bezier(.34,1.56,.64,1)";
+const EASE_SMOOTH = "cubic-bezier(.37,0,.63,1)";
+function gazeTransform(x, y) {
+    const squash = 1 - 0.06 * Math.min((x / 6) ** 2, 1);
+    return `translate(${x}px,${y}px) scaleX(${squash.toFixed(3)})`;
+}
+function glances(name, points, move) {
+    const frames = points.flatMap(([percent, x, y], index) => {
+        const next = points[index + 1];
+        const transform = gazeTransform(x, y);
+        const arrive = `${percent}%{transform:${transform};animation-timing-function:linear}`;
+        if (!next)
+            return [arrive];
+        const leave = `${Math.max(percent, next[0] - move)}%{transform:${transform};animation-timing-function:${EASE_OUT}}`;
+        return [arrive, leave];
+    });
+    return `@keyframes ${name}{${frames.join("")}}`;
+}
+function orbit(name, side) {
+    const frames = Array.from({ length: 17 }, (_, index) => {
+        const angle = (index / 16) * Math.PI * 4;
+        const cos = Math.cos(angle);
+        const depth = 1 - side * 0.08 * Math.sin(angle);
+        const foreshorten = 0.72 + 0.28 * Math.abs(cos);
+        const shift = (-side * (1 - cos)).toFixed(4);
+        return `${(index / 16) * 100}%{transform:translateX(calc(var(--aaa-gap)*${shift}px)) scale(${(foreshorten * depth).toFixed(3)},${depth.toFixed(3)})}`;
+    });
+    return `@keyframes ${name}{${frames.join("")}}`;
+}
+function blinks(percents, half) {
+    const open = [0, 100, ...percents.flatMap((at) => [at - half, at + half])];
+    return `@keyframes aaa-blink{${open.map((at) => `${at.toFixed(2)}%`).join(",")}{transform:scaleY(1)}${percents.map((at) => `${at}%`).join(",")}{transform:scaleY(.08)}}`;
+}
+const lid = (amount) => `translateY(calc(var(--aaa-eye-h)*${amount}px))`;
+const HEART = (side) => `translateX(calc((var(--aaa-gap) + 3.6)*${-side}px)) rotate(${side * 42}deg) scale(calc(7.5/var(--aaa-eye-w)),calc(11.5/var(--aaa-eye-h)))`;
+const timeline = (name, total, stops) => `@keyframes ${name}{${stops.map(([ms, transform]) => `${+((ms / total) * 100).toFixed(3)}%{transform:${transform};animation-timing-function:${EASE_SMOOTH}}`).join("")}}`;
+const peek = (amount) => `translateY(calc(var(--aaa-eye-h)*${amount}px))`;
+const loop = (seconds, easing = "ease-in-out") => `calc(${seconds}s*var(--aaa-tempo,1)) ${easing} calc(-${seconds}s*var(--aaa-phase,0)) infinite`;
+const gazeLoop = (seconds) => `calc(${seconds}s*var(--aaa-tempo,1)) linear calc(-${seconds}s*var(--aaa-gaze-phase,var(--aaa-phase,0))) infinite`;
 export const AVATAR_CSS = `
-.aaa-body-motion,.aaa-react,.aaa-eyes-react,.aaa-eyes-motion,.aaa-blink,.aaa-squish{transform-box:fill-box;transform-origin:center}
+.aaa-body-motion,.aaa-react,.aaa-eyes-react,.aaa-gaze,.aaa-eyes-motion,.aaa-blink,.aaa-squish,.aaa-head,.aaa-look,.aaa-eye{transform-box:fill-box;transform-origin:center}
 .aaa-mouth-rest,.aaa-mood{transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .2s}
 .aaa-mood{opacity:0}
 .aaa-accessory{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s ease-out}
 .aaa-accessory[data-accessory=glasses],.aaa-accessory[data-accessory=bowtie]{transform-origin:center}
-.aaa-squish{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
+.aaa-squish{transition:transform .45s ${EASE_SPRING}}
 .aaa-squish[data-dragging]{transition:none}
 .aaa[data-interactive]{cursor:grab;touch-action:none}
 .aaa[data-interactive]:active{cursor:grabbing}
-.aaa-look{transform:translate(var(--aaa-look-x,0px),var(--aaa-look-y,0px));transition:transform .25s ease-out}
-.aaa-blink{animation:aaa-blink 7s infinite}
-.aaa[data-status=idle] .aaa-body-motion{animation:aaa-bob 3.6s ease-in-out infinite}
-.aaa[data-status=thinking] .aaa-body-motion{animation:aaa-sway 3s ease-in-out infinite}
-.aaa[data-status=thinking] .aaa-eyes-motion{transform:translate(-5px,-6px);animation:aaa-ponder 2.4s ease-in-out infinite}
-.aaa[data-status=working] .aaa-body-motion{animation:aaa-bob .9s ease-in-out infinite}
-.aaa[data-status=working] .aaa-eyes-motion{animation:aaa-scan 1.1s ease-in-out infinite}
-.aaa[data-status=waiting] .aaa-body-motion{animation:aaa-hop 1.6s ease-out infinite}
-.aaa[data-status=waiting] .aaa-eyes-motion{transform:scale(1.18)}
-.aaa[data-status=error] .aaa-body-motion{transform:rotate(-10deg)}
-.aaa[data-status=error] .aaa-eyes-motion{transform:scaleY(.25)}
-.aaa[data-status=error] .aaa-blink{animation:none}
-.aaa[data-status=sleeping] .aaa-body-motion{animation:aaa-breathe 4.2s ease-in-out infinite}
-.aaa[data-status=sleeping] .aaa-eyes-motion{transform:translateY(2px) scaleY(.12)}
-.aaa[data-status=sleeping] .aaa-blink{animation:none}
-.aaa[data-status=working] .aaa-antenna-tip{animation:aaa-signal .9s ease-in-out infinite}
-.aaa[data-status=thinking] .aaa-mouth-rest{opacity:0}
-.aaa[data-status=thinking] .aaa-mood-small{opacity:1}
-.aaa[data-status=thinking] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){animation:aaa-acc-sway 2.4s ease-in-out infinite}
-.aaa[data-status=thinking] .aaa-accessory[data-accessory=glasses]{animation:aaa-glasses-think 2.4s ease-in-out infinite}
-.aaa[data-status=working] .aaa-mouth-rest{transform:scaleX(.7)}
-.aaa[data-status=working] .aaa-accessory[data-accessory=bowtie]{animation:aaa-wobble .9s ease-in-out infinite}
-.aaa[data-status=waiting] .aaa-mouth-rest{opacity:0}
-.aaa[data-status=waiting] .aaa-mood-happy{opacity:1}
-.aaa[data-status=waiting] .aaa-accessory:not([data-accessory=glasses]){animation:aaa-wobble 1.6s ease-in-out infinite}
-.aaa[data-status=error] .aaa-mouth-rest{opacity:0}
-.aaa[data-status=error] .aaa-mood-sad{opacity:1}
-.aaa[data-status=error] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){transform:rotate(28deg)}
-.aaa[data-status=error] .aaa-accessory:is([data-accessory=hat],[data-accessory=glasses]){transform:translateY(3px) rotate(8deg)}
-.aaa[data-status=error] .aaa-accessory[data-accessory=bowtie]{transform:rotate(18deg)}
-.aaa[data-status=sleeping] .aaa-mouth-rest{opacity:0}
-.aaa[data-status=sleeping] .aaa-mood-o{opacity:1;animation:aaa-snore 4.2s ease-in-out infinite}
-.aaa[data-status=sleeping] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){transform:rotate(-35deg)}
-.aaa[data-status=sleeping] .aaa-accessory:is([data-accessory=hat],[data-accessory=glasses]){transform:translateY(5px)}
+.aaa-look{transform:translate(var(--aaa-look-x,0px),var(--aaa-look-y,0px)) scaleX(var(--aaa-look-sx,1));transition:transform .28s ${EASE_OUT}}
+.aaa-head{transform:translate(var(--aaa-head-x,0px),var(--aaa-head-y,0px)) rotate(var(--aaa-head-r,0deg));transition:transform .6s ${EASE_SPRING}}
+.aaa-eyes-motion{transition:transform .32s cubic-bezier(.16,1,.3,1)}
+.aaa-eye{transition:transform .32s cubic-bezier(.16,1,.3,1)}
+.aaa-blink{animation:aaa-blink 14s linear infinite}
+.aaa-lid{transform-box:fill-box;transition:transform .32s cubic-bezier(.16,1,.3,1)}
+.aaa-lid-top{transform-origin:50% 100%}
+.aaa-lid-bottom{transform-origin:50% 0}
+.aaa-shape{transition:d .32s cubic-bezier(.16,1,.3,1)}
+.aaa-eye:not([data-shape=eye]) .aaa-lid-top{transform:translateY(-12px)}
+.aaa-eye:not([data-shape=eye]) .aaa-lid-bottom{transform:translateY(12px)}
+.aaa[data-activity=idle] .aaa-body-motion{animation:aaa-drift ${loop(11)}}
+.aaa[data-activity=thinking] .aaa-body-motion{animation:aaa-sway ${loop(3)}}
+.aaa[data-activity=coding] .aaa-body-motion{animation:aaa-bob ${loop(1.6)}}
+.aaa[data-activity=coding][data-expression=neutral] .aaa-blink{animation:none}
+.aaa[data-activity=coding][data-expression=neutral] .aaa-eye-r{animation:aaa-caret 1.06s steps(1) .32s infinite}
+.aaa[data-activity=working] .aaa-body-motion{animation:aaa-bob ${loop(0.9)}}
+.aaa[data-activity=waiting] .aaa-eye-l{animation:aaa-orbit-l 3.2s linear .32s infinite}
+.aaa[data-activity=waiting] .aaa-eye-r{animation:aaa-orbit-r 3.2s linear .32s infinite}
+.aaa[data-activity=waiting][data-expression=neutral] .aaa-blink{animation:none}
+.aaa[data-activity=asking] .aaa-body-motion{transform:rotate(-7deg)}
+.aaa[data-activity=asking][data-expression=neutral] .aaa-eye-r{transform:scale(1.25)}
+.aaa[data-activity=stuck] .aaa-body-motion{transform:rotate(-10deg)}
+.aaa[data-activity=stuck][data-expression=neutral] .aaa-blink{animation:none}
+.aaa[data-activity=sleeping] .aaa-body-motion{animation:aaa-breathe ${loop(4.2)}}
+.aaa[data-activity=sleeping] .aaa-lid-top{transform:${lid(".85")}}
+.aaa[data-activity=sleeping] .aaa-lid-bottom{transform:${lid("-.85")}}
+.aaa[data-activity=sleeping] .aaa-react{transform:translateY(3px)}
+.aaa[data-activity=sleeping][data-expression=neutral] .aaa-blink{animation:none}
+.aaa[data-activity=listening] .aaa-body-motion{animation:aaa-nod ${loop(2.8)}}
+.aaa[data-activity=listening][data-expression=neutral] .aaa-eye{animation:aaa-caret 1.06s steps(1) .32s infinite}
+.aaa[data-activity=listening][data-expression=neutral] .aaa-blink{animation:none}
+.aaa[data-activity=reviewing] .aaa-lid-top{transform:${lid(".78")}}
+.aaa[data-activity=reviewing] .aaa-lid-bottom{transform:${lid("-.78")}}
+.aaa[data-activity=reviewing][data-expression=neutral] .aaa-blink{animation:none}
+.aaa[data-activity=reviewing] .aaa-eye{animation:aaa-inspect ${loop(6.08, "linear")}}
+.aaa[data-activity=reviewing] .aaa-body-motion{animation:aaa-inspect-head ${loop(6.08, "linear")}}
+.aaa[data-activity=speaking] .aaa-body-motion{animation:aaa-bob ${loop(1.4)}}
+.aaa[data-activity=speaking] .aaa-mouth-rest{animation:aaa-talk .32s ease-in-out infinite}
+.aaa[data-gaze=follow]:not([data-pointer]) .aaa-gaze,.aaa[data-gaze=wander] .aaa-gaze{animation:aaa-saccade ${gazeLoop(16)}}
+.aaa[data-gaze=ponder] .aaa-gaze{animation:aaa-ponder ${gazeLoop(3.6)}}
+.aaa[data-gaze=scan] .aaa-gaze{animation:aaa-scan ${gazeLoop(1.6)}}
+.aaa[data-gaze=read] .aaa-gaze{animation:aaa-read ${gazeLoop(4.8)}}
+.aaa[data-gaze=down] .aaa-gaze{animation:aaa-down ${gazeLoop(7)}}
+.aaa[data-gaze=away] .aaa-gaze{animation:aaa-away ${gazeLoop(9)}}
+.aaa[data-activity=searching] .aaa-body-motion{transform:translateY(1px) scale(1.04)}
+.aaa[data-activity=searching][data-expression=neutral] .aaa-eye{animation:aaa-search ${loop(2.6, "linear")}}
+.aaa[data-activity=writing] .aaa-body-motion{animation:aaa-bob ${loop(2.4)}}
+.aaa[data-activity=working] .aaa-antenna-tip{animation:aaa-signal .9s ease-in-out infinite}
+.aaa[data-activity=thinking][data-expression=neutral] .aaa-mouth-rest{opacity:0}
+.aaa[data-activity=thinking][data-expression=neutral] .aaa-mood-small{opacity:1}
+.aaa[data-activity=thinking] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){animation:aaa-acc-sway 2.4s ease-in-out infinite}
+.aaa[data-activity=thinking] .aaa-accessory[data-accessory=glasses]{animation:aaa-glasses-think 2.4s ease-in-out infinite}
+.aaa[data-activity=working] .aaa-mouth-rest{transform:scaleX(.7)}
+.aaa[data-activity=working] .aaa-accessory[data-accessory=bowtie]{animation:aaa-wobble .9s ease-in-out infinite}
+.aaa[data-activity=waiting][data-expression=neutral] .aaa-mouth-rest{opacity:0}
+.aaa[data-activity=waiting][data-expression=neutral] .aaa-mood-happy{opacity:1}
+.aaa[data-activity=waiting] .aaa-accessory:not([data-accessory=glasses]){animation:aaa-wobble 1.6s ease-in-out infinite}
+.aaa[data-activity=stuck][data-expression=neutral] .aaa-mouth-rest{opacity:0}
+.aaa[data-activity=stuck][data-expression=neutral] .aaa-mood-sad{opacity:1}
+.aaa[data-activity=stuck] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){transform:rotate(28deg)}
+.aaa[data-activity=stuck] .aaa-accessory:is([data-accessory=hat],[data-accessory=glasses]){transform:translateY(3px) rotate(8deg)}
+.aaa[data-activity=stuck] .aaa-accessory[data-accessory=bowtie]{transform:rotate(18deg)}
+.aaa[data-activity=sleeping][data-expression=neutral] .aaa-mouth-rest{opacity:0}
+.aaa[data-activity=sleeping][data-expression=neutral] .aaa-mood-o{opacity:1;animation:aaa-snore 4.2s ease-in-out infinite}
+.aaa[data-activity=sleeping] .aaa-accessory:is([data-accessory=antenna],[data-accessory=sprout]){transform:rotate(-35deg)}
+.aaa[data-activity=sleeping] .aaa-accessory:is([data-accessory=hat],[data-accessory=glasses]){transform:translateY(5px)}
+.aaa:not([data-expression=neutral]) .aaa-mouth-rest{opacity:0}
+.aaa:is([data-expression=happy],[data-expression=love]) .aaa-mood-happy{opacity:1}
+.aaa:is([data-expression=sad],[data-expression=angry]) .aaa-mood-sad{opacity:1}
+.aaa[data-expression=confused] .aaa-mood-small{opacity:1}
+.aaa[data-expression=tired] .aaa-mood-flat{opacity:1}
+.aaa[data-expression=curious] .aaa-mood-o{opacity:1;transform:scale(.6)}
+.aaa:not([data-expression=neutral]) .aaa-lid{transform:none}
+.aaa:not([data-expression=neutral]) .aaa-eye{animation:none}
+.aaa[data-expression=happy] .aaa-lid-bottom{transform:${lid("-1")}}
+.aaa[data-expression=sad] .aaa-lid-top.aaa-lid-l{transform:${lid(".8")} rotate(-16deg)}
+.aaa[data-expression=sad] .aaa-lid-top.aaa-lid-r{transform:${lid(".8")} rotate(16deg)}
+.aaa[data-expression=angry] .aaa-lid-top.aaa-lid-l{transform:${lid(".83")} rotate(16deg)}
+.aaa[data-expression=angry] .aaa-lid-top.aaa-lid-r{transform:${lid(".83")} rotate(-16deg)}
+.aaa[data-expression=confused] .aaa-lid-top.aaa-lid-r{transform:${lid(".55")} rotate(-8deg)}
+.aaa[data-expression=love] .aaa-eye{transform-origin:50% 100%}
+.aaa[data-expression=love] .aaa-eye-l{transform:${HEART(-1)}}
+.aaa[data-expression=love] .aaa-eye-r{transform:${HEART(1)}}
+.aaa[data-expression=love] .aaa-eyes-react{animation:aaa-heartbeat 1.52s infinite}
+.aaa[data-expression=tired] .aaa-lid-top.aaa-lid-l{transform:${lid(".6")} rotate(-7deg)}
+.aaa[data-expression=tired] .aaa-lid-top.aaa-lid-r{transform:${lid(".6")} rotate(7deg)}
+.aaa[data-expression=tired] .aaa-lid-bottom{transform:${lid("-.12")}}
+.aaa[data-expression=curious] .aaa-eyes-motion{transform:scale(1.12)}
+.aaa[data-reacting] .aaa-gaze,.aaa[data-reacting] .aaa-blink,.aaa[data-reacting] .aaa-eye{animation:none}
+.aaa[data-reacting] .aaa-look{--aaa-look-x:0px;--aaa-look-y:0px;--aaa-look-sx:1}
+.aaa[data-reacting] .aaa-head{--aaa-head-x:0px;--aaa-head-y:0px;--aaa-head-r:0deg}
 .aaa[data-blink=off] .aaa-blink{animation:none}
 .aaa[data-motion=off] *{animation:none!important}
-@keyframes aaa-blink{0%,28%,32%,90%,94%,100%{transform:scaleY(1)}30%,92%{transform:scaleY(.1)}}
+.aaa[data-offscreen] *{animation-play-state:paused!important}
+${blinks([3, 21, 47, 66, 88], 0.6)}
+${glances("aaa-saccade", [
+    [0, 0, 0],
+    [9, -4, -1],
+    [22, 3, 2],
+    [33, 5, -3],
+    [41, 0, 0],
+    [52, -5, -4],
+    [61, 5, -4],
+    [70, 0, 0],
+    [78, -3, 3],
+    [90, 2, -1],
+    [100, 0, 0],
+], 1.2)}
+${glances("aaa-ponder", [
+    [0, 0, 0],
+    [8, -5, -4],
+    [50, 5, -4],
+    [92, 0, 0],
+    [100, 0, 0],
+], 7)}
+${glances("aaa-read", [
+    [0, -5, -2],
+    [8, -2, -2],
+    [16, 1, -2],
+    [24, 4, -2],
+    [33, -5, 0.5],
+    [41, -2, 0.5],
+    [49, 1, 0.5],
+    [57, 4, 0.5],
+    [66, -5, 3],
+    [74, -2, 3],
+    [82, 1, 3],
+    [90, 4, 3],
+    [100, -5, -2],
+], 2)}
+${timeline("aaa-inspect", 6080, [
+    [0, peek("0")],
+    [880, peek("0")],
+    [1280, peek(".55")],
+    [1840, peek(".55")],
+    [2000, peek("-.55")],
+    [2580, peek("-.55")],
+    [2720, peek("0")],
+    [3480, peek("0")],
+    [3620, peek(".55")],
+    [4240, peek(".55")],
+    [4420, peek("0")],
+    [6080, peek("0")],
+])}
+${timeline("aaa-inspect-head", 6080, [
+    [0, "translateY(0)"],
+    [880, "translateY(0)"],
+    [1280, "translateY(2.5px)"],
+    [1840, "translateY(2.5px)"],
+    [2000, "translateY(-2px)"],
+    [2580, "translateY(-2px)"],
+    [2720, "translateY(0)"],
+    [6080, "translateY(0)"],
+])}
+${glances("aaa-down", [
+    [0, -2, 5],
+    [30, 1, 5.5],
+    [55, 3, 5],
+    [70, 3, 5],
+    [85, -1, 5.5],
+    [100, -2, 5],
+], 8)}
+${glances("aaa-away", [
+    [0, 6, 1.5],
+    [40, 6, 2],
+    [48, 5.5, -1],
+    [72, 6, 1.5],
+    [76, 0, 0],
+    [84, 0, 0],
+    [88, 6, 1.5],
+    [100, 6, 1.5],
+], 1.5)}
+${glances("aaa-search", [
+    [0, -5, -2],
+    [10, 4, -3],
+    [20, 4, -3],
+    [26, -3, 2],
+    [38, -3, 2],
+    [44, 5, 1],
+    [56, 5, 1],
+    [62, -1, -4],
+    [74, -1, -4],
+    [80, -5, 3],
+    [92, -5, 3],
+    [100, -5, -2],
+], 2.5)}
+@keyframes aaa-scan{0%{transform:${gazeTransform(-4, 1)};animation-timing-function:cubic-bezier(.45,.05,.55,.95)}70%{transform:${gazeTransform(4, 1)};animation-timing-function:${EASE_OUT}}80%,100%{transform:${gazeTransform(-4, 1)}}}
+${orbit("aaa-orbit-l", -1)}
+${orbit("aaa-orbit-r", 1)}
+@keyframes aaa-heartbeat{0%,24%,48%,100%{transform:scale(1)}6%{transform:scale(1.155)}18%{transform:scale(1.093)}}
+@keyframes aaa-drift{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}20%{transform:translate(4px,-3px) rotate(5deg) scale(1.02,.98)}45%{transform:translate(-2px,-5px) rotate(-3deg) scale(.98,1.02)}70%{transform:translate(-5px,-1px) rotate(-6deg) scale(1.02,.98)}85%{transform:translate(-1px,1px) rotate(2deg) scale(1)}}
 @keyframes aaa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
 @keyframes aaa-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
-@keyframes aaa-ponder{0%,100%{transform:translate(-5px,-6px)}50%{transform:translate(5px,-6px)}}
-@keyframes aaa-scan{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
 @keyframes aaa-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035,.97)}}
 @keyframes aaa-signal{0%,100%{opacity:1}50%{opacity:.25}}
 @keyframes aaa-acc-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
 @keyframes aaa-wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
 @keyframes aaa-glasses-think{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
 @keyframes aaa-snore{0%,100%{transform:scale(.7)}50%{transform:scale(1.1)}}
-@keyframes aaa-hop{0%,55%,100%{transform:translateY(0)}68%{transform:translateY(-7px)}80%{transform:translateY(0)}90%{transform:translateY(-3px)}}
+@keyframes aaa-nod{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-3deg) translateY(1px)}}
+@keyframes aaa-talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
+@keyframes aaa-caret{0%{opacity:1}50%{opacity:0}}
 @media (prefers-reduced-motion:reduce){.aaa *{animation:none!important;transition:none!important}}
 `;

package/dist/visibility.d.ts

@@ -0,0 +1 @@
+export declare function watchVisibility(svg: SVGSVGElement): () => void;

package/dist/visibility.js

@@ -0,0 +1,26 @@
+let observer = null;
+let watched = 0;
+function handleEntries(entries) {
+    for (const entry of entries) {
+        if (entry.isIntersecting)
+            entry.target.removeAttribute("data-offscreen");
+        else
+            entry.target.setAttribute("data-offscreen", "");
+    }
+}
+export function watchVisibility(svg) {
+    if (typeof IntersectionObserver !== "function")
+        return () => { };
+    observer ??= new IntersectionObserver(handleEntries);
+    observer.observe(svg);
+    watched += 1;
+    return () => {
+        observer?.unobserve(svg);
+        svg.removeAttribute("data-offscreen");
+        watched -= 1;
+        if (watched === 0) {
+            observer?.disconnect();
+            observer = null;
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aaavatars",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Deterministic 2D character avatars with a play() animation API",
   "keywords": [
     "avatar",