Technical Specification: 1D Rule 110 Cellular Automata Simulator

Overview

A high-performance, responsive, browser-based sandbox for exploring Rule 110. This tool allows users to visualize how a simple one-dimensional rule set produces complex, Turing-complete behavior over time.

Core Features

• Live Simulation Canvas: A real-time rendering engine using HTML5 Canvas for performance.
• Interactive Initial State: Users can click individual cells on the top row to toggle their state (on/off) before running the simulation.
• Playback Controls: Play, pause, step-forward, and clear buttons.
• Simulation Speed Control: Adjustable frame rate (updates per second) to view the emergence of gliders and chaotic structures.
• Responsive Resizing: The grid automatically scales based on the viewport width.
• Instruction Overlay: A clean, modal-based guide explaining the rules of Rule 110.

Technical Constraints & Requirements

• Architecture: Single-file HTML5 (HTML + CSS + Vanilla JS).
• Storage: ABSOLUTELY NO usage of localStorage, sessionStorage, or cookies. All simulation states must be stored in volatile JS memory objects/arrays.
• Theme: Strict Light Mode. Use a clean, professional SaaS aesthetic (whites, light grays, vibrant primary color for 'On' cells).
• Frameworks: Minimal dependencies. Tailwind CSS (via CDN) for responsive layout. Google Fonts (Inter/Roboto) for typography.
• Compatibility: Must function within a sandboxed iframe. No alert(), prompt(), or confirm(). All dialogs must be custom HTML/CSS modals.

UI Layout

1. Header: Title, simple simulation stats (generation count).
2. Toolbar: Floating control bar with buttons: [Play/Pause], [Step], [Clear], [Reset], [Settings].
3. Main Content: A full-width/centered container holding the <canvas> element. The grid should be responsive.
4. Info Section: Below the canvas, a brief, non-intrusive explanation of Rule 110 and the current generation count.

Color Palette

• Background: #FFFFFF (pure white)
• Grid Line/Inactive Cell: #F3F4F6 (light gray)
• Active Cell (On): #2563EB (vibrant blue)
• UI Text: #1F2937 (dark slate)
• Button Colors: #FFFFFF background, #2563EB border/text.

Animations & Interactions

• Grid Updates: Instantaneous rendering per generation. No CSS transitions on individual cell drawing to ensure performance.
• UI Interactions: Subtle 200ms transitions on button hover states (opacity and scale).
• Responsive Design: Re-calculate grid width/height on window resize, maintaining aspect ratio.