@oxy.so/bloom 6.4.0 → 7.0.1

package/src/agent-avatar/artwork.ts

@@ -0,0 +1,195 @@
+import { DrawingContext, DrawingPath } from './drawing';
+import { ENTRANCE_SECONDS, entrancePose } from './entrance';
+import { drawFace, drawSleepMarks, type FaceRig } from './face';
+import { drawFold } from './fold';
+import type { AvatarConfig } from './model';
+import type { ShapeMorph } from './shape-morph';
+import { WORKING_SECONDS, workingPose } from './working';
+const TAU = Math.PI * 2;
+function silhouette(c: AvatarConfig, phase: number) {
+  const path = new DrawingPath();
+  if (c.family === 'alien') {
+    const sx =
+      c.alienShape === 'round' ? 1.06 : c.alienShape === 'long' ? 0.86 : 1;
+    const sy =
+      c.alienShape === 'round' ? 0.92 : c.alienShape === 'long' ? 1.03 : 1;
+    path.moveTo(0, -86 * sy);
+    path.bezierCurveTo(49 * sx, -88 * sy, 87 * sx, -61 * sy, 82 * sx, -20 * sy);
+    path.bezierCurveTo(80 * sx, 18 * sy, 47 * sx, 52 * sy, 17 * sx, 80 * sy);
+    path.quadraticCurveTo(0, 96 * sy, -17 * sx, 80 * sy);
+    path.bezierCurveTo(
+      -47 * sx,
+      52 * sy,
+      -80 * sx,
+      18 * sy,
+      -82 * sx,
+      -20 * sy,
+    );
+    path.bezierCurveTo(-87 * sx, -61 * sy, -49 * sx, -88 * sy, 0, -86 * sy);
+    path.closePath();
+  } else if (c.shape === 'squircle') {
+    path.moveTo(-50, -82);
+    path.bezierCurveTo(-80, -82, -82, -65, -82, -40);
+    path.lineTo(-82, 45);
+    path.bezierCurveTo(-82, 76, -70, 82, -42, 82);
+    path.lineTo(45, 82);
+    path.bezierCurveTo(78, 82, 82, 67, 82, 40);
+    path.lineTo(82, -43);
+    path.bezierCurveTo(82, -75, 70, -82, 42, -82);
+    path.closePath();
+  } else if (c.shape === 'triangle') {
+    path.moveTo(-15, -78);
+    path.quadraticCurveTo(0, -103, 16, -77);
+    path.lineTo(84, 52);
+    path.quadraticCurveTo(100, 80, 67, 82);
+    path.lineTo(-68, 82);
+    path.quadraticCurveTo(-100, 80, -84, 53);
+    path.closePath();
+  } else {
+    for (let i = 0; i <= 180; i++) {
+      const a = (i / 180) * TAU;
+      let radius = 83;
+      if (c.shape === 'pebble')
+        radius +=
+          7 * Math.sin(a * 3 + 0.7 + (Math.sin(phase) * c.motion) / 350) +
+          4 * Math.cos(a * 2 - 1);
+      if (c.shape === 'flower') radius += 10 * Math.cos(a * 5 + 0.5);
+      if (c.shape === 'diamond')
+        radius =
+          83 /
+          (Math.pow(Math.abs(Math.cos(a)), 1.35) +
+            Math.pow(Math.abs(Math.sin(a)), 1.35)) **
+            (1 / 1.35);
+      const x = Math.cos(a) * radius,
+        y = Math.sin(a) * radius;
+      if (i === 0) path.moveTo(x, y);
+      else path.lineTo(x, y);
+    }
+    path.closePath();
+  }
+  return path;
+}
+
+/** Colors here are editable artwork, independent of the surrounding UI theme. */
+export function drawAvatar(
+  ctx: DrawingContext,
+  c: AvatarConfig,
+  phase: number,
+  rig: FaceRig,
+  gaze: [number, number],
+  cssSize: number,
+  entranceSeconds = ENTRANCE_SECONDS,
+  workingSeconds = WORKING_SECONDS,
+  shapeMorph?: ShapeMorph,
+  workingCycles = 1,
+  backingSize = cssSize,
+) {
+  const size = backingSize;
+  ctx.save();
+  const entrance = entrancePose(entranceSeconds);
+  const entrySide = c.family === 'fold' && c.foldDirection === 'left' ? -1 : 1;
+  ctx.translate(100 + entrance.x * entrySide, 100 + entrance.y);
+  ctx.rotate(entrance.rotation * entrySide);
+  ctx.scale(entrance.scaleX, entrance.scaleY);
+  ctx.globalAlpha = entrance.opacity;
+  ctx.translate(-100, -100);
+  ctx.translate(
+    100 + (Math.sin(phase * 23) * rig.tremble * c.motion) / 28,
+    100 +
+      (Math.sin(phase) * c.motion) / 28 -
+      (Math.cos(phase * 2) * rig.bounce * c.motion) / 12,
+  );
+  ctx.rotate((Math.sin(phase) * c.motion) / 2400);
+  const breath = 1 + (Math.sin(phase) * c.motion) / 4000;
+  ctx.scale(breath, breath);
+  if (c.family === 'fold') {
+    const work = workingPose(workingSeconds, workingCycles);
+    ctx.translate(0, work.y);
+    ctx.rotate(work.tilt * entrySide);
+    drawFold(
+      ctx,
+      c,
+      phase,
+      rig,
+      gaze,
+      cssSize,
+      null,
+      entrance.fold,
+      entrance.faceOpacity,
+      work.turn,
+      shapeMorph,
+    );
+    ctx.restore();
+    return;
+  }
+  ctx.save();
+  ctx.clip(silhouette(c, phase));
+  const color = (offset: number, light: number, alpha = 1) =>
+    `hsla(${c.hue + offset},${c.saturation}%,${light}%,${alpha})`;
+  ctx.fillStyle = color(0, c.material === 'solid' ? 55 : 58);
+  ctx.fillRect(-110, -110, 220, 220);
+  const drift = c.motion / 100;
+  if (c.material === 'mist') {
+    for (let i = 0; i < c.complexity + 3; i++) {
+      const a = i * 2.399 + c.seed;
+      const x = Math.cos(a + Math.sin(phase + i) * drift) * 68;
+      const y = Math.sin(a * 1.7 + Math.cos(phase + i) * drift) * 74;
+      const radius = i % 3 === 0 ? 102 : 70;
+      const g = ctx.createRadialGradient(x, y, 0, x, y, radius);
+      const light = [82, 29, 62, 88, 39][i % 5]!;
+      const hue = ((i % 3) - 1) * c.spread;
+      g.addColorStop(0, color(hue, light, 0.95));
+      g.addColorStop(0.35, color(hue, light, 0.7));
+      g.addColorStop(1, color(hue, light, 0));
+      ctx.fillStyle = g;
+      ctx.fillRect(-110, -110, 220, 220);
+    }
+  } else if (c.material === 'ribbons' || c.material === 'prism') {
+    ctx.save();
+    ctx.rotate(c.seed * 0.12 + Math.sin(phase) * drift * 0.25);
+    const width = 240 / c.complexity;
+    for (let i = -8; i < c.complexity + 8; i++) {
+      const p = new DrawingPath();
+      for (let side = 0; side < 2; side++) {
+        for (let j = 0; j <= 50; j++) {
+          const y = ((side === 0 ? j : 50 - j) / 50) * 320 - 160;
+          const bend =
+            c.material === 'prism'
+              ? Math.abs(y) * 0.75
+              : Math.sin(y / 54 + Math.sin(phase) * drift) * 34;
+          const x = -120 + (i + side) * width + bend;
+          if (side === 0 && j === 0) p.moveTo(x, y);
+          else p.lineTo(x, y);
+        }
+      }
+      p.closePath();
+      const offset = ((((i % 3) + 3) % 3) - 1) * c.spread;
+      const g = ctx.createLinearGradient(-70, -100, 90, 100);
+      g.addColorStop(0, color(offset, 77));
+      g.addColorStop(0.5, color(offset + 12, 57));
+      g.addColorStop(1, color(offset, 39));
+      ctx.fillStyle = g;
+      ctx.fill(p);
+    }
+    ctx.restore();
+  }
+  if (c.grain > 0) {
+    ctx.save();
+    // Keep grain density consistent in CSS pixels at every rendered size.
+    ctx.scale(200 / size, 200 / size);
+    ctx.globalCompositeOperation = 'soft-light';
+    ctx.globalAlpha *= c.grain / 100;
+    ctx.fillStyle = ctx.createPattern(null, 'repeat')!;
+    ctx.fillRect(-size, -size, size * 2, size * 2);
+    ctx.restore();
+  }
+  ctx.restore();
+  if (c.face) {
+    ctx.save();
+    ctx.clip(silhouette(c, phase));
+    drawFace(ctx, c, phase, rig, gaze, cssSize);
+    ctx.restore();
+    if (c.idle) drawSleepMarks(ctx, c, phase, gaze);
+  }
+  ctx.restore();
+}

package/src/agent-avatar/attention.ts

@@ -0,0 +1,109 @@
+import type { FaceRig } from './face';
+import type { AvatarConfig } from './model';
+
+type Nuance = {
+  openness: number;
+  asymmetry: number;
+  tilt: number;
+  softness: number;
+};
+export type AttentionState = {
+  seed: number;
+  elapsed: number;
+  duration: number;
+  time: number;
+  offset: number;
+  from: Nuance;
+  to: Nuance;
+};
+const REST: Nuance = { openness: 0, asymmetry: 0, tilt: 0, softness: 0 };
+function random(state: AttentionState) {
+  state.seed = (Math.imul(state.seed, 1664525) + 1013904223) >>> 0;
+  return state.seed / 4294967296;
+}
+function nextNuance(state: AttentionState): Nuance {
+  return {
+    openness: (random(state) - 0.5) * 0.18,
+    asymmetry: (random(state) - 0.5) * 0.22,
+    tilt: (random(state) - 0.5) * 0.07,
+    softness: random(state) * 0.14,
+  };
+}
+export function createAttention(seed: number): AttentionState {
+  const state = {
+    seed,
+    elapsed: 0,
+    duration: 2.2,
+    time: 0,
+    offset: ((seed >>> 0) / 4294967296) * Math.PI * 2,
+    from: REST,
+    to: REST,
+  };
+  state.to = nextNuance(state);
+  state.duration = 1.8 + random(state) * 1.8;
+  return state;
+}
+
+/** Add small changes within the chosen emotion, without cycling through moods.
+ * This clock advances only while the avatar is visibly animating.
+ */
+export function advanceAttention(
+  state: AttentionState,
+  seconds: number,
+  base: FaceRig,
+  config: AvatarConfig,
+): FaceRig {
+  if (config.idle || config.eyes === 'sleepy' || config.motion === 0)
+    return base;
+  state.time = (state.time ?? 0) + Math.max(0, seconds);
+  state.elapsed += Math.max(0, seconds);
+  while (state.elapsed >= state.duration) {
+    state.elapsed -= state.duration;
+    state.from = state.to;
+    state.to = nextNuance(state);
+    state.duration = 1.8 + random(state) * 1.8;
+  }
+  const t = state.elapsed / state.duration;
+  const smooth = t * t * (3 - 2 * t);
+  const amount = Math.min(1, config.motion / 40);
+  const value = (key: keyof Nuance) =>
+    (state.from[key] + (state.to[key] - state.from[key]) * smooth) * amount;
+  const openness = value('openness'),
+    asymmetry = value('asymmetry');
+  // Overlapping rhythms keep happy lids gently changing even between glances.
+  // Each eye has its own timing; the expression blend eases this in and out.
+  const happy =
+    Math.max(0, (base.smile - 0.2) / 0.8) *
+    amount *
+    Math.min(1, state.time / 0.8);
+  const clock = state.time,
+    offset = state.offset ?? 0;
+  const left =
+    Math.sin(clock * 1.65 + offset) * 0.7 +
+    Math.sin(clock * 1.13 + offset * 0.7) * 0.3;
+  const right =
+    Math.sin(clock * 1.48 + offset + 0.9) * 0.7 +
+    Math.sin(clock * 2.05 + offset * 0.4) * 0.3;
+  const soften = (1 + Math.sin(clock * 1.31 + offset + 0.4)) * 0.5;
+  return {
+    ...base,
+    leftOpen: base.leftOpen * (1 + openness + asymmetry + left * happy * 0.13),
+    rightOpen:
+      base.rightOpen * (1 + openness - asymmetry + right * happy * 0.13),
+    width: base.width * (1 + (left + right) * happy * 0.035),
+    leftAngle: base.leftAngle + value('tilt') * 0.6 + left * happy * 0.045,
+    rightAngle: base.rightAngle + value('tilt') * 0.6 - right * happy * 0.045,
+    headTilt: base.headTilt + value('tilt'),
+    smile: Math.max(
+      0,
+      Math.min(
+        1,
+        base.smile -
+          soften * happy * 0.09 +
+          (config.eyes === 'neutral' || config.eyes === 'curious'
+            ? value('softness')
+            : 0),
+      ),
+    ),
+  };
+}

package/src/agent-avatar/blink.ts

@@ -0,0 +1,47 @@
+/** A private clock for each mounted avatar, independent of its motion loop. */
+export type BlinkState = {
+  seed: number;
+  wait: number;
+  elapsed: number;
+  duration: number;
+  blinking: boolean;
+  second: boolean;
+};
+function random(state: BlinkState) {
+  state.seed = (Math.imul(state.seed, 1664525) + 1013904223) >>> 0;
+  return state.seed / 4294967296;
+}
+export function createBlink(seed: number): BlinkState {
+  const state: BlinkState = {
+    seed,
+    wait: 0,
+    elapsed: 0,
+    duration: 0.18,
+    blinking: false,
+    second: false,
+  };
+  state.wait = 0.4 + random(state) * 4.4;
+  return state;
+}
+export function advanceBlink(state: BlinkState, seconds: number): number {
+  if (!state.blinking) {
+    state.wait -= seconds;
+    if (state.wait > 0) return 1;
+    state.blinking = true;
+    state.elapsed = 0;
+    state.duration = 0.14 + random(state) * 0.09;
+  }
+  state.elapsed += seconds;
+  const progress = state.elapsed / state.duration;
+  if (progress >= 1) {
+    state.blinking = false;
+    const double = !state.second && random(state) < 0.12;
+    state.second = double;
+    state.wait = double
+      ? 0.14 + random(state) * 0.12
+      : 2.1 + random(state) * 5.2;
+    return 1;
+  }
+  // A quicker close and a soft reopen, with no hard frame at the seam.
+  return Math.max(0.07, 1 - Math.sin(Math.PI * progress) ** 2);
+}

package/src/agent-avatar/context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import type { DrawingContext } from './drawing';
+
+/** Internal frame observer. A preview can retain its committed artwork for a handoff. */
+export const AvatarDrawingObserver = createContext<
+  ((drawing: DrawingContext) => void) | null
+>(null);

package/src/agent-avatar/drawing.ts

@@ -0,0 +1,276 @@
+/** Portable drawing commands. The artwork uses these on every platform; no DOM canvas. */
+export type Point = [number, number];
+export class DrawingMatrix {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+  constructor(values: number[] = [1, 0, 0, 1, 0, 0]) {
+    [this.a, this.b, this.c, this.d, this.e, this.f] = values as [
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+    ];
+  }
+  point(x: number, y: number): Point {
+    return [this.a * x + this.c * y + this.e, this.b * x + this.d * y + this.f];
+  }
+  multiply(m: DrawingMatrix) {
+    return new DrawingMatrix([
+      this.a * m.a + this.c * m.b,
+      this.b * m.a + this.d * m.b,
+      this.a * m.c + this.c * m.d,
+      this.b * m.c + this.d * m.d,
+      this.a * m.e + this.c * m.f + this.e,
+      this.b * m.e + this.d * m.f + this.f,
+    ]);
+  }
+  toString() {
+    return `matrix(${this.a} ${this.b} ${this.c} ${this.d} ${this.e} ${this.f})`;
+  }
+}
+type Command = { kind: 'M' | 'L' | 'C' | 'Q' | 'A' | 'Z'; values: number[] };
+export class DrawingPath {
+  commands: Command[] = [];
+  moveTo(x: number, y: number) {
+    this.commands.push({ kind: 'M', values: [x, y] });
+  }
+  lineTo(x: number, y: number) {
+    this.commands.push({ kind: 'L', values: [x, y] });
+  }
+  bezierCurveTo(...values: [number, number, number, number, number, number]) {
+    this.commands.push({ kind: 'C', values });
+  }
+  quadraticCurveTo(...values: [number, number, number, number]) {
+    this.commands.push({ kind: 'Q', values });
+  }
+  closePath() {
+    this.commands.push({ kind: 'Z', values: [] });
+  }
+  addPath(path: DrawingPath, matrix = new DrawingMatrix()) {
+    for (const command of path.commands) {
+      if (command.kind === 'A') {
+        const [rx, ry, degrees, large, sweep, x, y] = command.values as [
+          number,
+          number,
+          number,
+          number,
+          number,
+          number,
+          number,
+        ];
+        const angle = (degrees * Math.PI) / 180;
+        const ux =
+          rx * (matrix.a * Math.cos(angle) + matrix.c * Math.sin(angle));
+        const uy =
+          rx * (matrix.b * Math.cos(angle) + matrix.d * Math.sin(angle));
+        const vx =
+          ry * (-matrix.a * Math.sin(angle) + matrix.c * Math.cos(angle));
+        const vy =
+          ry * (-matrix.b * Math.sin(angle) + matrix.d * Math.cos(angle));
+        const xx = ux * ux + vx * vx,
+          yy = uy * uy + vy * vy,
+          xy = ux * uy + vx * vy;
+        const difference = Math.hypot(xx - yy, 2 * xy);
+        this.commands.push({
+          kind: 'A',
+          values: [
+            Math.sqrt((xx + yy + difference) / 2),
+            Math.sqrt(Math.max(0, (xx + yy - difference) / 2)),
+            (Math.atan2(2 * xy, xx - yy) * 90) / Math.PI,
+            large,
+            matrix.a * matrix.d - matrix.b * matrix.c < 0 ? 1 - sweep : sweep,
+            ...matrix.point(x, y),
+          ],
+        });
+      } else {
+        const values = command.values.flatMap((value, i) =>
+          i % 2 ? [] : matrix.point(value, command.values[i + 1]!),
+        );
+        this.commands.push({ kind: command.kind, values });
+      }
+    }
+  }
+  ellipse(
+    x: number,
+    y: number,
+    rx: number,
+    ry: number,
+    rotation: number,
+    start: number,
+    end: number,
+    reverse = false,
+  ) {
+    // SVG elliptical arcs retain the original profile exactly, including its
+    // winding through a rear-facing turn; a four-cubic circle is an approximation.
+    const span = Math.min(Math.PI * 2, Math.abs(end - start));
+    const segments = Math.ceil(span / Math.PI);
+    if (!segments) return;
+    const step = ((reverse ? -1 : 1) * span) / segments;
+    const point = (angle: number): Point => [
+      x +
+        rx * Math.cos(angle) * Math.cos(rotation) -
+        ry * Math.sin(angle) * Math.sin(rotation),
+      y +
+        rx * Math.cos(angle) * Math.sin(rotation) +
+        ry * Math.sin(angle) * Math.cos(rotation),
+    ];
+    this.moveTo(...point(start));
+    for (let i = 1; i <= segments; i++) {
+      this.commands.push({
+        kind: 'A',
+        values: [
+          rx,
+          ry,
+          (rotation * 180) / Math.PI,
+          Math.abs(step) > Math.PI ? 1 : 0,
+          reverse ? 0 : 1,
+          ...point(start + i * step),
+        ],
+      });
+    }
+    this.closePath();
+  }
+  toString() {
+    return this.commands.map((c) => `${c.kind}${c.values.join(' ')}`).join(' ');
+  }
+}
+export class DrawingGradient {
+  stops: { offset: number; color: string }[] = [];
+  constructor(
+    public kind: 'linear' | 'radial',
+    public coordinates: number[],
+    public matrix: DrawingMatrix,
+  ) {}
+  addColorStop(offset: number, color: string) {
+    this.stops.push({ offset, color });
+  }
+}
+export type DrawingPaint = string | DrawingGradient | { kind: 'grain' };
+export interface DrawingState {
+  matrix: DrawingMatrix;
+  clips: DrawingPath[];
+  fillStyle: DrawingPaint;
+  strokeStyle: DrawingPaint;
+  globalAlpha: number;
+  lineWidth: number;
+  lineCap: 'butt' | 'round' | 'square';
+  globalCompositeOperation: string;
+  font: string;
+  textAlign: string;
+  textBaseline: string;
+}
+export type DrawingNode = DrawingState & {
+  path?: DrawingPath;
+  stroke?: boolean;
+  text?: string;
+  x?: number;
+  y?: number;
+};
+export class DrawingContext implements DrawingState {
+  matrix = new DrawingMatrix();
+  clips: DrawingPath[] = [];
+  fillStyle: DrawingPaint = '#000';
+  strokeStyle: DrawingPaint = '#000';
+  globalAlpha = 1;
+  lineWidth = 1;
+  lineCap: 'butt' | 'round' | 'square' = 'butt';
+  globalCompositeOperation = 'source-over';
+  font = '10px sans-serif';
+  textAlign = 'left';
+  textBaseline = 'alphabetic';
+  nodes: DrawingNode[] = [];
+  private stack: DrawingState[] = [];
+  private current = new DrawingPath();
+  private snapshot(): DrawingState {
+    return {
+      matrix: this.matrix,
+      clips: [...this.clips],
+      fillStyle: this.fillStyle,
+      strokeStyle: this.strokeStyle,
+      globalAlpha: this.globalAlpha,
+      lineWidth: this.lineWidth,
+      lineCap: this.lineCap,
+      globalCompositeOperation: this.globalCompositeOperation,
+      font: this.font,
+      textAlign: this.textAlign,
+      textBaseline: this.textBaseline,
+    };
+  }
+  save() {
+    this.stack.push(this.snapshot());
+  }
+  restore() {
+    const state = this.stack.pop();
+    if (state) Object.assign(this, state);
+  }
+  transform(...m: [number, number, number, number, number, number]) {
+    this.matrix = this.matrix.multiply(new DrawingMatrix(m));
+  }
+  translate(x: number, y: number) {
+    this.transform(1, 0, 0, 1, x, y);
+  }
+  scale(x: number, y: number) {
+    this.transform(x, 0, 0, y, 0, 0);
+  }
+  rotate(a: number) {
+    this.transform(Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0);
+  }
+  beginPath() {
+    this.current = new DrawingPath();
+  }
+  moveTo(x: number, y: number) {
+    this.current.moveTo(x, y);
+  }
+  lineTo(x: number, y: number) {
+    this.current.lineTo(x, y);
+  }
+  bezierCurveTo(...p: [number, number, number, number, number, number]) {
+    this.current.bezierCurveTo(...p);
+  }
+  quadraticCurveTo(...p: [number, number, number, number]) {
+    this.current.quadraticCurveTo(...p);
+  }
+  closePath() {
+    this.current.closePath();
+  }
+  clip(path = this.current) {
+    const projected = new DrawingPath();
+    projected.addPath(path, this.matrix);
+    this.clips.push(projected);
+  }
+  fill(path = this.current) {
+    this.nodes.push({ ...this.snapshot(), path });
+  }
+  stroke(path = this.current) {
+    this.nodes.push({ ...this.snapshot(), path, stroke: true });
+  }
+  fillRect(x: number, y: number, width: number, height: number) {
+    const path = new DrawingPath();
+    path.moveTo(x, y);
+    path.lineTo(x + width, y);
+    path.lineTo(x + width, y + height);
+    path.lineTo(x, y + height);
+    path.closePath();
+    this.fill(path);
+  }
+  fillText(text: string, x: number, y: number) {
+    this.nodes.push({ ...this.snapshot(), text, x, y });
+  }
+  createLinearGradient(...coordinates: [number, number, number, number]) {
+    return new DrawingGradient('linear', coordinates, this.matrix);
+  }
+  createRadialGradient(
+    ...coordinates: [number, number, number, number, number, number]
+  ) {
+    return new DrawingGradient('radial', coordinates, this.matrix);
+  }
+  createPattern(_grain: unknown, _repeat: string): DrawingPaint {
+    return { kind: 'grain' };
+  }
+}

package/src/agent-avatar/entrance.ts

@@ -0,0 +1,25 @@
+export const ENTRANCE_SECONDS = 1;
+
+const smooth = (t: number) => {
+  const p = Math.max(0, Math.min(1, t));
+  return p * p * p * (p * (p * 6 - 15) + 10);
+};
+
+/** A curled arrival: the body rises first, then its tucked edge catches up. */
+export function entrancePose(seconds: number) {
+  const t = Math.max(0, Math.min(1, seconds / ENTRANCE_SECONDS));
+  const grow = 1 - (1 - t) ** 3;
+  const scale = 0.1 + 0.9 * grow;
+  const turn = 1 - smooth(t / 0.85);
+  const fold = 1 - smooth((t - 0.12) / 0.88);
+  return {
+    x: -22 * Math.sin(Math.PI * t) * (1 - t),
+    y: 46 * (1 - grow),
+    scaleX: scale,
+    scaleY: scale,
+    rotation: -0.32 * turn,
+    opacity: smooth(t / 0.2),
+    fold,
+    faceOpacity: smooth((t - 0.15) / 0.4),
+  };
+}