Multiplication Matrix · Interactive Operations Plane

An interactive, infinite canvas for exploring multiplication and addition matrices. Built with Canvas 2D, TypeScript, Tailwind CSS v4, and Vite.

Features

• Infinite Canvas: Smooth pan and zoom powered by frame-rate independent exponential easing.
• Dual Operation Modes: Seamlessly toggle between Multiplication ($\times$) and Addition ($+$).
• Adaptive Grid: Logarithmic grid and text step sizing (niceStep) that adapts dynamically to scale.
• Touch & Mouse Support: Smooth multi-touch pinch-to-zoom, touch-drag panning, and real-time touch cell highlighting.
• Theme Following: Automatic OS theme synchronization (prefers-color-scheme) with persistent user override.
• Live Readout: Real-time accessible HUD readout (aria-live="polite") displaying hovered cell coordinates and mathematical calculations.
• PWA & Offline Ready: Service worker caching and web manifest for offline operation and home screen installation.
• Keyboard Control: Intuitive hotkeys for navigation, zooming, theme, mode, and view reset.

Keyboard Shortcuts

Key	Action
Drag / Arrow Keys	Pan around the plane
Scroll / Pinch / + / -	Zoom in / out
M	Toggle Operation Mode ($\times$ / $+$)
T	Toggle Light / Dark Theme
H / 0	Reset Camera View to Origin $(0,0)$

Tech Stack

• Runtime & Package Manager: Bun / Node.js
• Build Tool: Vite 8
• Language: TypeScript 7
• Styling: Tailwind CSS v4
• Testing: Vitest + Happy-DOM

Getting Started

Installation

bun install

Scripts

• Development Server: bun run dev
• Type Checking: bun run typecheck
• Unit Tests: bun run test
• Production Build: bun run build
• Preview Build: bun run preview

License

This project is licensed under the MIT License.