Kiosk and Avatar

Kiosk & Avatar

The avatar renderer. Chromium in kiosk mode on the Pi, driven entirely by bridge messages (Contracts — Bridge ↔ Kiosk).

Phase 1 ships a 2D renderer: the ComStar starburst as live inline SVG on a dark field. No background image, no WebGL required, no GLB, nothing fetched from the internet. The mark is the avatar.

---

Layout

terminal/kiosk/
├── index.html          production entry
├── debug.html          standalone harness, no bridge
├── avatar.js           renderer
├── presets.js          swappable emblem designs
└── bridge_client.js    envelope + reconnect

Production is typically served by the bridge at http://127.0.0.1:8776/kiosk/. Dev: make kiosk-dev → :5173.

---

How it animates

Channel	Driven by
Ring rotation, brightness, scale	attention state (~300 ms damp)
Halo swell and meter arc	listening message level
Core pulse	speech amplitude from AnalyserNode on the audio element
Emblem drift	setGazeFromBox() with CPAI face bounding box
Counter-rotation	thinking message

Amplitude is read from the waveform actually being played — it cannot drift. Audio sink: ADR 0001.

---

Emblem presets

Preset	Character
starburst	The ComStar mark — default
reactor	Hexagonal containment rings — industrial
sentinel	Vertical sensor slit — watchful, minimal
spectrum	Radial waveform — most reactive to speech
instrument	Navigational dial — precise and quiet

---

Panel tuning

Option	Default	Failure mode
emblemScale	0.62	Too high → star points leave the edges
bloom	9	Too high → halo becomes a white mass

Also available as query params ?scale= and ?bloom=. Bloom is SVG feGaussianBlur in user units (not CSS blur), so it is invariant to panel size.

Demo mode: ?demo overlays state / fps / gaze / amplitude.

---

TalkingHead / GLB (next)

When avatar.model (.glb) is present and WebGL is healthy, load TalkingHead into #avatar with the same public API (setState, speak, …). On WebGL context loss, fall back to HTMLAudioElement and keep speak.* events. The avatar must never take down the voice assistant.

Render path decision: ADR 0002.

---

Debug harness

cd terminal/kiosk
python3 -m http.server 5173
# open http://localhost:5173/debug.html

Must be served over HTTP (ES module CORS).

---

Related pages

• ADR 0001
• ADR 0002
• Contracts — Bridge ↔ Kiosk
• Dev Loop — Loop A hot reload