# Conway Life Demo Design

Date: 2026-03-17
Status: Approved

## Goal

Build a pure HTML/CSS/JS demo page for Conway's Game of Life that opens directly from `index.html`, balances teaching and interaction, and presents the simulation with a modern visualization aesthetic.

## Audience and Use Case

- Learners seeing cellular automata for the first time
- Users who want to experiment by drawing patterns and watching them evolve
- Anyone who wants a polished, shareable standalone demo page

## Product Direction

- Topic: Conway's Game of Life
- Page type: balanced demo page
- Delivery: direct-open HTML/CSS/JS page
- Feature scope: enhanced version with preset patterns
- Visual style: modern visualization
- Default state: load a preset pattern and remain paused

## Layout

### 1. Hero

- Full-width first screen with an atmospheric simulation-inspired background
- Title, short explanatory subtitle, and a clear entry action that scrolls to the lab
- Visual treatment based on luminous grid lines, soft glow, and scientific/data-art styling

### 2. Main Lab

- Large simulation canvas as the primary focus
- Side control panel on desktop; stacked layout on mobile
- Status area showing running/paused state and current speed

### 3. Rules Section

- Three compact rule cards explaining survival, birth, and death
- Short copy only; no heavy educational text blocks
- Small visual motifs to keep the explanation approachable

### 4. Preset Pattern Section

- Presets: glider, pulsar, and Gosper glider gun
- Clicking a preset loads it into the simulation and pauses playback
- Section doubles as both a teaching aid and a quick demo launcher

## Interaction Design

### Controls

- Start/Pause
- Step one generation
- Clear
- Randomize
- Reset to selected preset
- Speed adjustment

### Canvas Interaction

- Click a cell to toggle it
- Drag to paint cells continuously
- Keep the simulation paused when loading or editing presets so the user stays in control

### Simulation Rules

- Classic Conway rules
- Finite grid with non-wrapping edges
- Default opening preset: pulsar

## Visual System

- Deep dark background with cool white text
- Cyan and acid-green highlights for live-state emphasis
- Semi-transparent panels, subtle borders, soft bloom, and layered gradients
- Refined motion: gentle glow, state transitions, and staggered reveal rather than flashy arcade effects

## Technical Approach

- Use `canvas` for the simulation surface to keep updates smooth and visually polished
- Keep simulation rules in pure functions so they can be tested outside the browser
- Keep page assets local so `index.html` can open directly without a build step

## Responsiveness

- Desktop: wide lab layout with canvas first and controls beside it
- Mobile: stacked layout with the canvas above controls
- Preset cards become horizontally scrollable on narrower screens

## Usability Details

- Disable actions when they should not apply, such as disabling step while running
- Show the active preset and speed tier clearly
- Short helper copy explaining that each cell looks at its eight neighbors

## Verification Targets

- Conway rule updates are correct
- Start/pause and single-step work as expected
- Presets load correctly
- Editing cells updates the simulation state correctly
- Layout remains usable after resizing