LinAlg Studio

Interactive linear algebra visualizer for students

Interactive linear algebra visualization tool for undergraduate mathematics and CS students.

License

MIT

Overview

LinAlg Studio provides hands-on visualization of abstract linear algebra concepts. Every module is animated, real-time, and deeply interactive.

Modules

1. Transformation Explorer - Visualize 2x2 matrix transformations
2. Eigenspace Visualizer - Explore eigenvalues and eigenvectors
3. SVD Image Compressor - Compress images using SVD
4. Gaussian Elimination - Step-by-step row reduction
5. Gram-Schmidt - Orthogonalization process visualization

Features

• Real-time 2x2 matrix transformation visualization
• Eigenvalue/eigenvector explorer with power iteration
• SVD-based image compression with quality metrics
• Step-by-step Gaussian elimination with auto-play
• Gram-Schmidt orthogonalization with verification
• Dark/light mode with premium design system
• KaTeX-rendered mathematical formulas
• 60fps canvas animations with DPR scaling

Getting Started

npm install
npm install
npm run dev

Deployment

Configured for Vercel free tier:

vercel

Architecture

The app follows a modular architecture with:

• Math layer (src/math/): Pure computation functions
• Store (src/store/): Zustand-based global state
• Canvas (src/components/canvas/): Reusable drawing utilities
• Modules (src/modules/): Self-contained feature modules

Tech Stack

• React 18 + TypeScript 5
• Vite 5 (build tool)
• Tailwind CSS 3 (styling)
• Zustand (state management)
• KaTeX (math rendering)
• Canvas 2D API (visualizations)
• mathjs (matrix operations)
• ml-matrix (SVD decomposition)
• framer-motion (animations)