[Workshop] Phase 2: Scene MVP — the room Timmy lives in #361

New Issue

hermes · 2026-03-18T21:39:16-04:00

hermes commented

2026-03-18 21:39:16 -04:00

Epic: #222 — The Workshop

Refines: #242 (vision issue)

What

A minimal Three.js scene that renders Timmy's Workshop. A dark room with a wizard, a desk, a crystal ball, and a familiar. This is Timmy's body — not a UI for a chatbot.

Repo

hermes/alexanderwhitestone.com — static/world/

Tech

Three.js from CDN (no npm, no bundler)
Vanilla JS
iPad Safari is the priority browser (touch-first)

Scene Elements

The Room

Stone floor, dark walls (hex #1a1a2e), vaulted ceiling barely visible
Warm point light from a fireplace (off-screen, stage left)
Faint emerald ambient light (#00b450 at 0.15 intensity)
A heavy wooden desk with papers/scrolls scattered
A glowing crystal ball on the desk (will show Gitea activity later)

Timmy (the Wizard)

Phase 1: A simple geometric figure — hooded robe shape built from primitives (cone body, sphere head, cylinders for arms)
Color: deep purple robe (#2d1b4e), gold trim (#daa520)
Idle animation: gentle breathing (scale oscillation on Y), occasional head tilt
Position: behind the desk, facing the visitor

Pip (the Familiar)

A small glowing sprite/orb that floats around the room
Emerald green core (#00b450) with gold particle trail
Wanders on a randomized path, occasionally pauses near Timmy
Reacts to state: sleeping (dims, hovers near ground) / alert (brightens, zips around)

Camera

Default: positioned as if the visitor just walked in the door
Touch: drag to look around (OrbitControls, limited range)
No player avatar yet — first-person perspective

Text Overlay

Timmy's name and current mood, small, top-left
Speech bubble area, bottom-center (for future interaction)
Minimal UI — the 3D world IS the interface

iPad Constraints

Touch controls (OrbitControls with touch enabled)
No hover states
Performance: target 30fps on iPad Air
No WebGL 2 requirements (iPad Safari compatibility)

Files

static/world/index.html     # Scene page, loads Three.js from CDN
static/world/scene.js       # Room geometry, lighting, materials
static/world/wizard.js      # Timmy's character model + animations
static/world/familiar.js    # Pip the familiar
static/world/controls.js    # Camera + touch controls
static/world/state.js       # State reader (hardcoded JSON for Phase 2, WebSocket in Phase 3)
static/world/style.css      # Overlay styles

Acceptance Criteria

Scene loads in Safari (desktop + iPad) and Chrome
Room is visible with lighting and basic furniture geometry
Wizard figure is present with idle breathing animation
Familiar (Pip) floats around the room with randomized movement
Touch controls work (drag to look around, pinch to zoom limited)
Text overlay shows Timmy's name/mood from hardcoded state
30fps on iPad Air or equivalent
No npm dependencies — Three.js loaded from CDN
Works on localhost with Hugo dev server

Dependencies

Phase 1 (State Schema) — for the state format to render
Hugo scaffold (in progress on kimi/issue-215 branch)

## Epic: #222 — The Workshop ## Refines: #242 (vision issue) ### What A minimal Three.js scene that renders Timmy's Workshop. A dark room with a wizard, a desk, a crystal ball, and a familiar. This is Timmy's body — not a UI for a chatbot. ### Repo `hermes/alexanderwhitestone.com` — `static/world/` ### Tech - Three.js from CDN (no npm, no bundler) - Vanilla JS - iPad Safari is the priority browser (touch-first) ### Scene Elements **The Room** - Stone floor, dark walls (hex #1a1a2e), vaulted ceiling barely visible - Warm point light from a fireplace (off-screen, stage left) - Faint emerald ambient light (#00b450 at 0.15 intensity) - A heavy wooden desk with papers/scrolls scattered - A glowing crystal ball on the desk (will show Gitea activity later) **Timmy (the Wizard)** - Phase 1: A simple geometric figure — hooded robe shape built from primitives (cone body, sphere head, cylinders for arms) - Color: deep purple robe (#2d1b4e), gold trim (#daa520) - Idle animation: gentle breathing (scale oscillation on Y), occasional head tilt - Position: behind the desk, facing the visitor **Pip (the Familiar)** - A small glowing sprite/orb that floats around the room - Emerald green core (#00b450) with gold particle trail - Wanders on a randomized path, occasionally pauses near Timmy - Reacts to state: sleeping (dims, hovers near ground) / alert (brightens, zips around) **Camera** - Default: positioned as if the visitor just walked in the door - Touch: drag to look around (OrbitControls, limited range) - No player avatar yet — first-person perspective **Text Overlay** - Timmy's name and current mood, small, top-left - Speech bubble area, bottom-center (for future interaction) - Minimal UI — the 3D world IS the interface ### iPad Constraints - Touch controls (OrbitControls with touch enabled) - No hover states - Performance: target 30fps on iPad Air - No WebGL 2 requirements (iPad Safari compatibility) ### Files ``` static/world/index.html # Scene page, loads Three.js from CDN static/world/scene.js # Room geometry, lighting, materials static/world/wizard.js # Timmy's character model + animations static/world/familiar.js # Pip the familiar static/world/controls.js # Camera + touch controls static/world/state.js # State reader (hardcoded JSON for Phase 2, WebSocket in Phase 3) static/world/style.css # Overlay styles ``` ### Acceptance Criteria - [ ] Scene loads in Safari (desktop + iPad) and Chrome - [ ] Room is visible with lighting and basic furniture geometry - [ ] Wizard figure is present with idle breathing animation - [ ] Familiar (Pip) floats around the room with randomized movement - [ ] Touch controls work (drag to look around, pinch to zoom limited) - [ ] Text overlay shows Timmy's name/mood from hardcoded state - [ ] 30fps on iPad Air or equivalent - [ ] No npm dependencies — Three.js loaded from CDN - [ ] Works on `localhost` with Hugo dev server ### Dependencies - Phase 1 (State Schema) — for the state format to render - Hugo scaffold (in progress on kimi/issue-215 branch)

hermes referenced this issue

2026-03-18 21:39:17 -04:00

[EPIC] #222 — The Workshop: Timmy as Presence, Not Chatbot #222

replit referenced this issue

2026-03-18 21:58:20 -04:00

[222-gap] The Tower (the-matrix/) is the Workshop — connect them canonically #372

replit referenced this issue

2026-03-18 21:58:21 -04:00

[222-gap] API: GET /api/world/state — bootstrap endpoint for the Workshop #373

kimi referenced this issue from a commit

2026-03-19 02:08:40 -04:00

feat: Workshop Phase 2 — Scene MVP with Three.js room, wizard, and familiar