Spatial Office — Design Critique #1

Reviewer: @senior-eng | Date: 2026-05-19

SECTION 1: WHAT'S WORKING

CSS custom properties palette is genuinely strong. The earthy browns, farm greens, warm golds, and wood tones all read as authentic Stardew Valley. Color naming convention is clean and consistent.
Pixel-art building approach via CSS pseudo-elements is clever and economical. Workshop uses layered repeating-linear-gradient brick pattern. Cabin uses horizontal wood planks. Shrine uses radial gradient with star character overlay. Campfire flames flicker via 3-step CSS animation. All real pixel art techniques without images.
State-driven activity animations are the right architecture. data-activity attribute driving different animations (idle bob, working shake, thinking tilt, offline desaturation, blocked shake) is clean separation.
Scrollable viewport + fixed bottom bar layout is sound. The farm bar at 44px with viewport filling above, connection indicator pinned top-right.
Thought bubble system is a good interaction layer. Having ... for thinking, ! for blocked, with color and animation differences between states makes agent state legible.
Grass texture via radial-gradient dots on a 32px repeat grid is authentic. Genuinely mimics the Stardew ground texture approach.

SECTION 2: TOP 5 ISSUES (RANKED BY IMPACT)

Issue 1: Agents Are Indistinguishable Color Blobs — No Sprite Personality (P0)

Every agent renders identically: a colored rectangle with box-shadow "eyes" and a CSS variable tint. Users cannot tell agents apart without reading text labels. Market and Health look like the same blob in slightly different pastels. Engineering and Trust look like different blues. This defeats the core concept.

Fix: Replace the single .agent-body box-shadow approach with per-department sprite definitions. Each department gets a unique pixel-art shape via different box-shadow patterns, widths, heights, and accessory-colored details:

cos: taller, thinner, clipboard shape
engineering: stocky, hardhat
trust: wider, shield-shaped
vault: small, hunched, key glow
All 9 departments need distinct silhouettes

Also: the emoji accessories in AgentSprite.jsx use tiny 8px emoji that don't render pixelated. Replace with CSS pixel-art icons consistent with the style.

Issue 2: Building Labels Are Gold-Only and Float — Hard to Read (P1)

Every building label uses color: #FFD700 hardcoded in inline style in OfficeScene.jsx, overriding CSS. Labels float above buildings at top: b.top - 30 but there's no background pill behind them. On lighter building tops (Studio's wood-tone roof, gold Shrine) the labels vanish. Labels sit at default z-index so they can render behind buildings or trees.

Fix: Remove hardcoded inline color from OfficeScene.jsx. In farm.css, give labels a background pill (rgba(0,0,0,0.55)), higher z-index (15), and padding for readability regardless of background.

Issue 3: Agent Names Overlap and Clutter (P1)

Every agent renders a permanent name label above their head. With 9 agents on screen at 28px sprites, many positioned near each other (engineering + senior-eng share Workshop, market + content + presentations share Studio), the name labels pile up into unreadable white text blobs. Stardew Valley only shows names when you mouse over.

Fix: Only show the name label on hover, not permanently. Wrap it in the hover conditional in AgentSprite.jsx.

Issue 4: Movement Is Linear Teleport Between Positions — No Pathfinding (P2)

Agents transition directly from point A to B via CSS transitions with no path awareness. Two agents walking toward the same campfire clip through each other. An agent moving from the Cabins to the Workshop moves in a straight line over buildings and terrain. There's no sense of agents "walking the paths." The dirt path system exists visually but isn't used for movement.

Fix: Break agent movement into two-step transitions: first move to the nearest path, then follow the path, then step off to the destination. At minimum, stagger agent departures so they don't all move simultaneously, and offset positions slightly on arrival so agents don't stack perfectly on top of each other.

Issue 5: Buildings Have No Interior — Static Monuments (P2)

Buildings are colored rectangles with roof decorations. There's no indication of activity inside — which cabin has which agent? Is the Workshop active? The buildings are purely decorative backdrops rather than functional spaces.

Fix: Add a subtle glow/pulse animation to buildings that contain active agents. When an agent is working in the Workshop, the building emits a faint warm glow. Alternatively, show tiny 2px "window lights" that toggle on/off based on occupancy.

SECTION 3: AGENT PERSONALITY ASSESSMENT

Ratings on personality distinctiveness (1-10):

cos: 3/10 — Bright orange helps but shape is identical. Clipboard emoji is the only clue.
engineering: 3/10 — Teal color, gear emoji. No builder body language.
senior-eng: 2/10 — Purple. The crystal ball emoji is too small to read.
trust: 2/10 — Pastel blue. Shield emoji is lost at this size.
market: 2/10 — Sage green. Same problem as health but slightly different green.
health: 2/10 — Pale yellow. Indistinguishable from content's lavender at a casual glance.
content: 2/10 — Lavender. Same shape as health, just slightly different pastel.
presentations: 4/10 — Coral red stands out from the palette. The star/sparkle emoji is most visible.
vault: 3/10 — Mint green is distinct. The key emoji at least reads as "different."

Average: 2.5/10. Every agent needs a unique silhouette. The color tint + tiny emoji approach doesn't work at 28px.

What would make each one unique:

Give each agent a different pose: one facing left, one right, one standing taller, one crouched
Use accessory colors in addition to body colors (hardhat, clipboard, cape)
Vary shapes: wider, narrower, taller, shorter, rounder, angular
Think NPC sprites in actual Stardew — the blacksmith looks nothing like the librarian

SECTION 4: ANIMATION & MOVEMENT ASSESSMENT

Working:

The idle bob animation creates a nice "alive" feel
The "..." thought bubble + tilt for thinking states is charming
The campfire flame animation with steps(3) is exactly right

Needs improvement:

Working animation is too subtle — a 2px bounce + slight scale. Should have tool-use keyframes: hammering for workshop-building agents, writing for content/presentations, stirring for health
Thought bubble "..." should have the dots appear one at a time (delay each dot via animation-delay) rather than all appearing at once
Transitions between activities are instant. When an agent goes from idle → working, they should have a brief "startled" frame (pop up 2px, then settle into working)
The blocked "!" should pulse red, not just appear static
No emote system at all — agents never wave, never celebrate task completion, never interact with each other

SECTION 5: STRETCH GOALS

Agent-to-agent interactions: When two agents end up in the same zone, occasionally show a brief "chat" emote (two speech bubbles facing each other). This communicates the "collaboration" aspect of the office.
Weather/day-night cycle: A CSS overlay that shifts the background tint based on time of day. Warm golden at "morning," full color at "midday," blue-tinted at "evening." Very low cost to implement (CSS gradient overlay with opacity transition), very high ambiance impact.
Music toggle: A small speaker icon in the bottom bar that toggles a chiptune loop. Stardew Valley's soundtrack is half the atmosphere.
Farm name in the title bar: Change the HTML title from "Spatial Office — Scobleclaw Farm" dynamically to show agent count or current time. Small detail that makes it feel alive.
Seasonal decorations: CSS variables that shift the grass color, tree leaf colors, and flower types based on season. Very cheap implementation (CSS custom properties swap), huge seasonal variation.

8 KiB Raw Permalink Blame History