Free Digital Rain & Cellular Automata Visual Sandbox

Overview

A high-performance, single-file browser tool that combines the classic "digital rain" aesthetic with procedural cellular automata logic. Built for a modern, clean light-mode aesthetic, this tool serves as a creative visual experiment, meditation aid, and educational platform for generative art.

Core Features

• Hybrid Simulation Engine: Switch between standard vertical "rain" mode and "automata" growth mode using a real-time toggle.
• Dynamic Control Panel: Adjustable sliders for simulation speed, character density, font size, and trail length (persistence).
• High-Key Aesthetic: A carefully curated light-mode palette featuring crisp, high-contrast slate-blue and charcoal glyphs on a clean, soft-white background.
• Responsive Canvas: Automatic scaling for any viewport, ensuring a perfect full-screen experience on phones, tablets, and desktops.
• Zero-Dependency Core: Pure Vanilla JavaScript with direct HTML5 Canvas rendering for maximum performance and compatibility.

UI Layout

• Header: A minimalist navigation bar at the top, housing the App Title and a subtle "Info" button that opens a custom modal for instructions.
• Main Canvas: The primary container occupying 100% of the viewport. It renders the characters in real-time.
• Floating Control Overlay: A semi-transparent, modern "glassmorphism" panel positioned in the bottom-left corner. Contains sliders and toggles. It collapses on smaller devices to save space.

Design & Aesthetics

• Color Palette: #FFFFFF (Background), #475569 (Slate-text), #3B82F6 (Primary accent for active state), #F1F5F9 (Control panel background).
• Animations:
  • Micro-interactions: Smooth fade-in effects for the control panel when hovering.
  • Transition: CSS transitions on all toggle states (300ms ease-in-out).
  • Generative: The canvas animation is limited to 60FPS to prevent CPU spikes while maintaining fluid motion.

Technical Directives

• Architecture: Must be a single-file .html document (inline <style> and <script> blocks).
• Persistence: Absolutely NO use of localStorage, sessionStorage, or cookies. Maintain state using plain JS objects.
• Performance: Use requestAnimationFrame for rendering loops. Avoid heavy DOM manipulation; draw entirely to the canvas.
• Sandboxing: The app must handle potential null origin errors gracefully. Do not use any external network calls except for standard font CDNs.