Documentation

REQUIREMENTS

Thronglets Project Status Board - Requirements

Project Codename: Thronglets Document Version: 1.0 Last Updated: 2026-01-24

Executive Summary

A web-based project status board inspired by the Black Mirror: Thronglets game aesthetic. Developer personas appear as yellow pixel creatures (Thronglets) who discuss the tasks and work they're doing. As tasks are implemented, items appear in a scrolling activity feed. The meta-twist: the characters are discussing building the very demo they exist in.

Core Concept

The Hook

Five developer characters (Jan, Dan, Priya, Marcus, Bill) are shown as Thronglet-style creatures on an isometric game board. They communicate via speech bubbles, discussing tasks, debating approaches, and celebrating completions. The project they're building is the application itself - creating a self-referential loop that's immediately obvious in a 2-minute demo.

Visual Reference

Source: Black Mirror: Thronglets (Netflix/Night School Studio)
Style: Retro pixel art, isometric perspective, yellow creatures
Fidelity: Exact clone of visual style (Bill Hartley to ensure authenticity)

Functional Requirements

FR-1: Thronglet Characters

ID	Requirement
FR-1.1	Display 5 Thronglet characters representing team personas
FR-1.2	Each character has distinct visual differentiation (accessories, colors, poses)
FR-1.3	Characters have idle animations (breathing, blinking, small movements)
FR-1.4	Characters have emotion states (neutral, happy, frustrated, thinking, celebrating)
FR-1.5	Characters positioned on isometric game board

FR-2: Speech Bubbles & Conversations

ID	Requirement
FR-2.1	Speech bubbles appear above characters when speaking
FR-2.2	Bubbles display text with character-appropriate styling
FR-2.3	Conversations follow a scripted sequence (JSON input)
FR-2.4	Support for multiple characters speaking in turn
FR-2.5	Typing animation effect for text appearance
FR-2.6	Bubbles auto-dismiss after configurable duration

FR-3: Conversation Input Format

Conversations provided as JSON array:

json

{
  "conversations": [
    {
      "id": "conv-001",
      "trigger": "task-complete:FR-2.1",
      "messages": [
        {
          "speaker": "jan",
          "text": "Speech bubbles are working. Did we write tests first?",
          "emotion": "stern",
          "duration": 3000
        },
        {
          "speaker": "dan",
          "text": "They work, don't they?",
          "emotion": "smug",
          "duration": 2500
        },
        {
          "speaker": "priya",
          "text": "Let's add the tests now before we forget.",
          "emotion": "diplomatic",
          "duration": 3000
        }
      ]
    }
  ]
}

FR-4: Project Status Board

ID	Requirement
FR-4.1	Project description panel (title, summary, team)
FR-4.2	Timeline visualization showing milestones
FR-4.3	Burndown chart (visual progress indicator)
FR-4.4	Scrolling activity feed showing completed items
FR-4.5	Task items animate into feed as "completed"
FR-4.6	Milestone markers with visual celebration when reached

FR-5: Audio & Sound

ID	Requirement
FR-5.1	Background ambient music (retro game style)
FR-5.2	Speech bubble appear sound effect
FR-5.3	Task completion sound effect
FR-5.4	Milestone achievement fanfare
FR-5.5	Character interaction sounds (optional)

FR-6: Web Server

ID	Requirement
FR-6.1	Simple HTTP server to serve static HTML/CSS/JS
FR-6.2	Hot reload during development (nice to have)
FR-6.3	Serves on configurable port (default: 3000)

Non-Functional Requirements

NFR-1: Technology Stack

Component	Technology
Frontend	HTML5, CSS3, Vanilla JavaScript (no framework required)
Graphics	Pixel art sprites (PNG), CSS animations
Audio	Web Audio API, MP3/OGG files
Build	None required (static files)
Server	Python `http.server` or Node.js `serve`

NFR-2: Browser Support

Modern browsers (Chrome, Firefox, Safari, Edge)
No IE11 support required

NFR-3: Performance

Smooth 60fps animations
Load time < 3 seconds on decent connection
Responsive to window resizing (within reason)

Visual Design Specifications

Color Palette (Authentic Thronglets)

Element	Color	Notes
Thronglet body	`#FFD93D`	Signature yellow
Thronglet outline	`#8B7355`	Brown/dark outline
Background	`#1A1A2E`	Dark blue-purple
UI panels	`#16213E`	Darker panels
Text	`#E8E8E8`	Off-white
Accent	`#4ECCA3`	Teal highlights

Sprite Specifications

Asset	Size	Frames
Character idle	32x32 px	4-8 frames
Character emotes	32x32 px	2-4 frames per emotion
Speech bubble	Variable	Static + tail variants
UI elements	16x16 px (icons)	As needed
Isometric tiles	64x32 px	Ground, decorations

Characters (The Five Thronglets)

Character	Persona	Visual Distinction	Typical Lines
Jan	Principal Engineer	Glasses, neat posture	"Did we write tests?"
Dan	Staff Engineer	Messy, relaxed pose	"Ship it!"
Priya	Senior Engineer	Headphones, calm	"Let's consider both approaches"
Marcus	Tech Lead	Laptop accessory	"What does the team think?"
Bill	Graphics Designer	Beret, artist palette	"The pixels need work"

Meta Project Tasks (In-Game Content)

The characters discuss building the application they're in. Example task flow:

Task ID	Task Description	Conversation Trigger
M0-001	Set up project structure	Characters discuss folder layout
M0-002	Create character sprites	Bill shows mockups, team reacts
M1-001	Implement speech bubbles	"Look, we can talk now!"
M1-002	Add idle animations	Characters notice they're moving
M1-003	Build activity feed	First task appears in scroll
M2-001	Add sound effects	"Did you hear that?"
M2-002	Connect conversation JSON	"We're following a script!"
M3-001	Complete demo	Team celebrates

Milestones

Milestone	Name	Description
M0	Foundation	Project setup, Bill's mockups, base HTML
M1	Core Mechanics	Characters, speech bubbles, activity feed
M2	Polish	Sound, animations, conversation system
M3	Demo Ready	2-minute demo video achievable

Deliverables

Static HTML/CSS/JS application - No build step required

Sprite assets - All character and UI graphics from Bill

Audio assets - Background music and sound effects

Conversation scripts - Sample JSON conversations

Web server script - Simple serve command

2-minute demo capability - Runnable demo showcasing concept

Out of Scope (v1.0)

User interaction (clicking characters, etc.)
Persistent state / save games
Real-time data integration
Mobile responsive design
Accessibility features (future consideration)
Multiplayer / networked features

Acceptance Criteria

Page loads and displays 5 Thronglet characters

Characters have idle animations

Speech bubbles appear and display conversation text

Conversations can be defined via JSON and played

Activity feed scrolls with completed tasks

Audio plays (music + sound effects)

Visual style matches Thronglets game aesthetic

Demo runs for ~2 minutes showcasing all features