A Screen Made for Recording

"Nod, then smile, then nod: a listener, not a metronome." — a comment in the On Air frame director

The Screen Is Now the Set

Once Dad records a talk, whatever is on the screen is in the video. The voice screen had been designed for one person sitting in front of it: buttons where a thumb or a pointer wants them, a round face, a browser around it all. Filmed, every one of those is noise at best and a leak at worst, a tab title or a bookmark caught in the frame. So turning On Air on changes four things about the screen itself.

A Lamp, and Controls That Step Aside

Lit, a red ON AIR lamp sits above the face, the same signal a tally light gives a presenter: this is live. The controls (close, attach, On Air, Cut in, Captions, the language chip, Pause) fade out three seconds after the last pointer movement or touch, and come back the moment the pointer moves or a finger touches the screen. The recording shows her face and her cards; Dad still has every control one small movement away.

Full Screen, and Only What It Entered

On the WebUI, turning On Air on also enters the browser's full screen, so the tabs, the address bar and the Dock stay out of the recording. Browsers grant full screen only inside a user gesture, so the switch's own click asks for it; there is no other moment when the request would be allowed. Leaving On Air, or closing the voice screen, leaves the full screen On Air entered, and only that one: the helper remembers whether it did the entering, and if Dad had gone full screen himself before, he stays there. A sidekick panel inside a frame the browser refuses simply stays as it is.

On a wide screen, 1024 pixels and up, On Air also changes the layout: the face and the stage of shared files sit side by side and use the whole width, because Dad's own camera runs small in a corner of the video.

A Face Made for Broadcast

While On Air is on, the face is one dedicated set, whatever brain or avatar preset the conversation uses. Each set is a folder of frames under the soul's avatars, onair/<set>/<frame>, and it shows as a 16:9 frame instead of the round listening face. Sets are discovered: any folder there that holds a default frame is a set, so a new season is a new folder and never a code change. Admin picks the one in use, falling back to the first; the broadcast folder is never offered as an ordinary preset. Two seasons exist: fallwinter, a black blouse in a fireside study, and springsummer, a light blue blouse by a bright window.

EV v3 · 2026-09-30: The folders are now published copies. The same night, the family's avatar app, cwkAvatars, became the owner of every avatar original. Each set under onair/ carries a lineage manifest that binds every frame to an asset in Avatars, and a new season arrives as a reviewed publication from there, never as frames dropped into the folder by hand. Discovery is unchanged: a folder with a default frame is still a set.

Each set holds fifteen frames: the neutral default and the eight emotions she speaks in, plus six for listening: listening, blink, nod, smile, laugh and thinking. The first two sets, made that afternoon, edited every frame from the set's own neutral frame, a method proved before the set was made: outside the eyes, the blink differed from its base only by compression noise. By evening a stricter rule had replaced them. To keep her looking like herself, each frame now starts independently from the matching emotion in Dad's hand-tuned everyday avatars (a reaction frame from the closest one), and the season's reference supplies only the blouse and the room. It is Track 5's lineage rule in pictures: derive from the original Dad already approved, not from a copy of it. The two sets in use were Dad's pick from twenty candidates, and the thirty frames they replaced were backed up outside the avatars folder, with a hash manifest, before anything was overwritten.

A Director, Not a Slideshow

Fifteen still frames only look alive if something chooses among them the way attention moves. The frame director turns the talk's state into one frame at a time:

Listening: the last reply's emotion is held for 1.2 seconds, then listening. She blinks every 3 to 6.5 seconds, each blink 0.14 seconds long and snapped in 70 milliseconds; every other change is a 350-millisecond dissolve, because a blink that fades looks like a sigh.
His words landing: each committed piece of what Dad says gets a reaction, alternating a nod (0.9 seconds) and a smile (1.6 seconds). Always nodding would be a metronome.
Preparing a reply: thinking.
Speaking: her reply's emotion, opening with a 1.4-second laugh when that emotion arrives as playful, happy or excited.
Anything missing: a frame the set lacks falls back to the ordinary emotion rule, and to the default frame after that.

The blink times come from a small seeded generator, not from Math.random, so the same seed gives the same blinks on every surface and a test can pin them. The web and the phone held the same numbers and passed the same cases; when Firekeeper became the director's second native user, the phone's half moved into the shared voice kit, and Firekeeper's panel now plays the same set the same way.

Code

A frame director with seeded blinks, reactions and fallbacks·typescript

// The On Air frame director, reduced to its rules: signals in, one frame out.
type Mode = 'listening' | 'waiting' | 'speaking' | 'held';

const T = {
  hold: 1.2, blinkMin: 3, blinkMax: 6.5, blink: 0.14, nod: 0.9, smile: 1.6, laugh: 1.4,
  snapMs: 70, fadeMs: 350, maxStep: 0.1, laughOn: ['playful', 'happy', 'excited'],
};

/** A linear congruential generator: the same seed gives the same blinks everywhere. */
const nextSeed = (seed: number) => (Math.imul(seed, 1664525) + 1013904223) >>> 0;

export class Director {
  private t = 0;
  private mode: Mode | null = null;
  private since = 0;
  private nextBlink: number;
  private blinkUntil = -1;
  private reaction: { frame: string; until: number } | null = null;
  private reactions = 0;
  private pieces: number | null = null;
  private emotion: string | null = null;
  private current = '';

  constructor(private frames: Set<string>, private seed = 1) {
    this.nextBlink = this.drawBlink();
  }

  private random() { this.seed = nextSeed(this.seed); return this.seed / 2 ** 32; }
  private drawBlink() { return this.t + T.blinkMin + this.random() * (T.blinkMax - T.blinkMin); }
  private has(frame: string | null): frame is string { return !!frame && this.frames.has(frame); }

  step(mode: Mode, replyEmotion: string | null, heardPieces: number, dt: number) {
    this.t += Math.max(0, Math.min(dt, T.maxStep));        // a hidden tab is not a jump
    if (mode !== this.mode) { this.mode = mode; this.since = this.t; this.reaction = null; }
    if (mode === 'listening' && this.pieces !== null && heardPieces > this.pieces) {
      const frame = this.reactions++ % 2 === 0 ? 'nod' : 'smile';
      if (this.has(frame)) this.reaction = { frame, until: this.t + (frame === 'nod' ? T.nod : T.smile) };
    }
    this.pieces = heardPieces;
    if (mode === 'speaking' && replyEmotion && replyEmotion !== this.emotion
        && T.laughOn.includes(replyEmotion) && this.has('laugh')) {
      this.reaction = { frame: 'laugh', until: this.t + T.laugh };
    }
    this.emotion = replyEmotion;
    if (this.reaction && this.t >= this.reaction.until) this.reaction = null;

    const settled = this.t - this.since >= T.hold;
    let frame: string;
    if (this.reaction) frame = this.reaction.frame;
    else if (mode === 'waiting' && this.has('thinking')) frame = 'thinking';
    else if (mode === 'listening' && settled && this.has('listening')) frame = 'listening';
    else {
      const wanted = mode === 'waiting' || (mode === 'listening' && settled) ? 'warm' : replyEmotion ?? 'warm';
      frame = this.has(wanted) ? wanted : 'default';        // a frame the set lacks falls back
    }
    if (frame === 'listening' && this.has('blink')) {
      if (this.t >= this.nextBlink) { this.blinkUntil = this.t + T.blink; this.nextBlink = this.drawBlink(); }
      if (this.t < this.blinkUntil) frame = 'blink';
    }
    const fadeMs = frame === 'blink' || this.current === 'blink' ? T.snapMs : T.fadeMs;
    this.current = frame;
    return { frame, fadeMs };
  }
}

const set = new Set(['default', 'warm', 'happy', 'playful', 'listening', 'blink',
  'nod', 'smile', 'laugh', 'thinking']);
const director = new Director(set, 42);
let pieces = 0;
let shown = '';
for (let i = 0; i <= 200; i += 1) {                         // 20 seconds at 10 frames a second
  const t = i / 10;
  const mode: Mode = t < 12 ? 'listening' : t < 14 ? 'waiting' : 'speaking';
  if (i === 50 || i === 80) pieces += 1;                     // two pieces of his words land
  const out = director.step(mode, t < 14 ? 'happy' : 'playful', pieces, 0.1);
  if (out.frame !== shown) {
    console.log(`${t.toFixed(1).padStart(5)}s  ${mode.padEnd(9)} -> ${out.frame} (${out.fadeMs} ms)`);
    shown = out.frame;
  }
}

Exercise

Run the director with npx tsx and read the timeline. Then take 'laugh' out of the set and run it again; take 'listening' out too and see what the fallback shows. Finally write the test that makes the determinism useful: two directors built with the same seed, fed the same signals, must blink at exactly the same times, and a different seed must not.

Hint

Without 'laugh', the playful reply simply opens in its own emotion, and without 'listening' the listening face falls back to the emotion rule's warm. For the test, collect the times where the frame becomes 'blink' over a minute of listening and compare the two lists. If you used Math.random anywhere, the test tells you at once.

The Screen Is Now the Set

A Lamp, and Controls That Step Aside

Full Screen, and Only What It Entered

A Face Made for Broadcast

A Director, Not a Slideshow

Code

External links

Exercise

Progress

Comments 0