Add Kernel Convolution Visualizer - Phase 1 complete

- Next.js 14+ with TypeScript, Tailwind CSS
- 32 predefined kernels across 6 categories
- Step-by-step convolution visualization with Canvas
- Zustand state management
- Custom kernel editor (3x3 to 9x9)
- 4 padding modes (zero, reflect, replicate, wrap)
- Playback controls (play, pause, step, speed)
- Comparison views (side-by-side, split)
- Dark mode, responsive layout
- Export functionality

.gitignore

@@ -3,21 +3,39 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

AGENTS.md

@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

README.md

@@ -1,81 +1,155 @@
----
-title: Kernel Convolution Visualizer
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: build/index.html
----
-
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+# Interactive Kernel Convolution Visualizer
+
+An educational web application that demonstrates how image convolution works in real-time. Upload any image, choose from predefined kernels or create your own, and watch the convolution process step-by-step with detailed mathematical visualization.
+
+## Features
+
+### Core Visualization
+- **Step-by-step convolution animation** - Watch the kernel matrix move across the image pixel by pixel
+- **Real-time mathematical display** - See element-wise multiplication and summation for each output pixel
+- **Current patch highlighting** - Visual indication of the image region under the kernel
+- **Progressive output rendering** - Output image builds up as computation completes
+
+### Kernel Library
+- **Blur Filters**: Box Blur (3×3, 5×5), Gaussian Blur (3×3, 5×5)
+- **Sharpen Filters**: Standard Sharpen, Strong Sharpen, Unsharp Mask
+- **Edge Detection**: Sobel X/Y/Combined, Prewitt, Roberts Cross, Laplacian
+- **Emboss**: Multiple directional emboss effects
+- **Special Effects**: Motion Blur, Outline, Ridge Detection
+- **Custom Kernel Builder**: Create your own kernels (3×3 to 9×9)
+
+### Interactive Controls
+- Play, Pause, Step Forward, Stop, Reset
+- Adjustable animation speed (0.1x - 10x)
+- Zoom and pan for pixel-level inspection
+- Step mode for manual frame-by-frame advancement
+
+### Comparison & Analysis
+- Side-by-side original vs processed view
+- Split-view slider with draggable divider
+- Synchronized zoom/pan between views
+- Multiple kernel comparison tabs
+
+### Educational Features
+- Real-time convolution equation with current values
+- Kernel purpose and effect descriptions
+- Padding strategy visualization (Zero, Reflect, Replicate, Wrap)
+- Channel-wise processing explanation (RGB)
+- Mathematical formula display
+
+### Export & Sharing
+- Save processed images (PNG)
+- Download convolution computation logs
+- Shareable application state
+
+## Tech Stack
+
+- **Framework**: Next.js 14+ (App Router) with TypeScript
+- **State Management**: Zustand
+- **Animation**: Framer Motion + Custom Canvas Animation Loop
+- **Styling**: Tailwind CSS
+- **Visualization**: HTML5 Canvas API
+- **Icons**: Lucide React
+- **UI Components**: Radix UI primitives
+
+## Getting Started
+
+### Prerequisites
+- Node.js 18+
+- npm, yarn, pnpm, or bun
+
+### Installation
+
+```bash
+# Clone the repository
+git clone <repository-url>
+cd kernel-convolution-visualizer
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Available Scripts
+
+```bash
+npm run dev       # Start development server
+npm run build     # Build for production
+npm run start     # Start production server
+npm run lint      # Run ESLint
+npm run type-check # Run TypeScript type checking
+```
+
+## Project Structure
+
+```
+src/
+├── app/                    # Next.js App Router pages
+├── components/
+│   ├── canvas/            # Canvas-based visualization components
+│   ├── controls/          # Playback, zoom, overlay controls
+│   ├── kernel/            # Kernel selector, editor, library
+│   ├── comparison/        # Split view, side-by-side comparison
+│   ├── education/         # Math display, kernel info panels
+│   └── ui/                # Reusable UI components
+├── hooks/                 # Custom React hooks
+├── lib/
+│   ├── convolution/       # Core convolution algorithms
+│   ├── kernels/           # Predefined kernel definitions
+│   ├── image/             # Image loading, processing utilities
+│   └── export/            # Export functionality
+├── store/                 # Zustand state management
+├── types/                 # TypeScript definitions
+└── utils/                 # Helper functions
+```
+
+## Usage Guide
+
+1. **Upload an Image**: Drag & drop or click the upload area in the left sidebar
+2. **Select a Kernel**: Choose from categories (Blur, Sharpen, Edge Detection, etc.) or create a custom kernel
+3. **Watch Convolution**: Press Play to see the kernel move across the image
+4. **Inspect Details**: Zoom in to see pixel values, multiplications, and summation
+5. **Compare Results**: Click "Show Comparison" for side-by-side or split view
+6. **Experiment**: Try different padding strategies, toggle overlays, adjust speed
+7. **Export**: Download the processed image
+
+## Convolution Visualization Explained
+
+The visualization shows the mathematical operation at each step:
+
+```
+For each output pixel (x, y) and channel c:
+1. Extract input patch: P[i][j] = image[x+i][y+j][c] for i,j in kernel
+2. Element-wise multiply: M[i][j] = P[i][j] × K[i][j]
+3. Sum: S = Σ M[i][j]
+4. Normalize: output = S / Σ K[i][j] (if normalized)
+```
+
+## Padding Strategies
+
+- **Zero Padding**: Fill outside with zeros (default)
+- **Reflect Padding**: Mirror the image at boundaries
+- **Replicate Padding**: Repeat edge pixels outward
+- **Wrap Padding**: Tile the image (torus topology)
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Run tests and linting
+5. Submit a pull request
+
+## License
+
+MIT License - feel free to use for educational and commercial purposes.
+
+## Acknowledgments
+
+- Inspired by convolution visualizations in computer vision education
+- Kernel definitions from standard image processing literature
+- Built with Next.js, React, and modern web technologies

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,21 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // Disable Turbopack for now due to webpack config
+  turbopack: {},
+  // Enable experimental features for better performance
+  experimental: {
+    optimizePackageImports: ['lucide-react'],
+  },
+  // Allow cross-origin images for development
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package.json

@@ -1,39 +1,38 @@
 {
-  "name": "react-template",
+  "name": "kernel-convolution-visualizer",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "clsx": "^2.1.1",
+    "framer-motion": "^13.0.0",
+    "lucide-react": "^1.28.0",
+    "next": "16.3.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "tailwind-merge": "^3.6.0",
+    "zustand": "^5.0.14"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/offscreencanvas": "^2019.7.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
-}
+}

plan.md

@@ -0,0 +1,339 @@
+# Interactive Kernel Convolution Visualizer - Project Plan
+
+## Project Overview
+Build an interactive web application that demonstrates how image convolution works in real time. The application serves both as an image-processing tool and an educational visualization platform for understanding convolution kernels, their mathematical operations, and their effects on images.
+
+## Target Audience
+- Students learning computer vision and digital image processing
+- Developers learning about CNNs and kernel operations
+- Educators teaching image processing concepts
+- Anyone curious about how image filters work
+
+## Core Features
+
+### 1. Image Management
+- Upload any image (drag & drop, file picker)
+- Support common formats: PNG, JPEG, WebP, BMP
+- Display original image with zoom/pan capabilities
+- Image metadata display (dimensions, file size, color channels)
+
+### 2. Kernel Library
+Predefined kernels:
+- **Blur Filters**: Box Blur (3×3, 5×5, 7×7), Gaussian Blur (3×3, 5×5)
+- **Sharpen Filters**: Sharpen, Unsharp Mask
+- **Edge Detection**: Sobel X, Sobel Y, Sobel Combined, Prewitt, Roberts, Laplacian
+- **Emboss**: Emboss (multiple directions)
+- **Special Effects**: Motion Blur, Outline, Ridge Detection
+- **Custom Kernel Builder**: User-defined matrix with size selector (3×3, 5×5, 7×7, 9×9)
+
+### 3. Convolution Visualization (Core Feature)
+- **Step-by-step Animation**: Kernel matrix moves across image pixel by pixel
+- **Current Patch Highlight**: Visual indication of image region under kernel
+- **Element-wise Multiplication**: Show kernel values × pixel values
+- **Summation Display**: Real-time calculation of output pixel value
+- **Continuous Animation**: Smooth traversal across entire image
+- **Progressive Output Rendering**: Output image builds up as computation completes
+
+### 4. Interactive Controls
+- Play / Pause / Restart / Step Forward / Step Backward
+- Animation speed slider (0.5x - 10x)
+- Zoom controls for pixel-level inspection
+- Toggle overlays:
+  - Kernel boundary visualization
+  - Pixel value display
+  - Multiplication calculation overlay
+  - Summation formula display
+
+### 5. Comparison & Analysis
+- Side-by-side original vs processed view
+- Split-view slider (before/after)
+- Synchronized zoom/pan between views
+- Multiple kernel comparison mode (tabbed results)
+- Processing statistics: execution time, operations count, memory usage
+
+### 6. Padding Strategies
+- Visual demonstration of padding effects
+- Options: Zero Padding, Reflect Padding, Replicate Padding, Wrap Padding
+- Border handling visualization at image edges
+
+### 7. Educational Insights
+- Real-time mathematical equation display
+- Kernel purpose/effect description
+- Convolution formula with current values
+- Channel-wise processing explanation (RGB)
+- Links to learning resources
+
+### 8. Export & Sharing
+- Save processed image (PNG, JPEG)
+- Export visualization as GIF/MP4
+- Shareable URL with current state
+- Download convolution computation log (CSV/JSON)
+
+## Technical Architecture
+
+### Frontend Stack
+- **Framework**: Next.js 14+ (App Router) with TypeScript
+- **State Management**: Zustand or React Context
+- **Animation**: Framer Motion for UI, custom Canvas/WebGL for convolution viz
+- **Styling**: Tailwind CSS
+- **Canvas**: HTML5 Canvas API (primary), WebGL fallback for performance
+- **Image Processing**: Custom JavaScript implementation (no heavy deps)
+
+### Component Structure
+```
+src/
+├── app/                    # Next.js App Router pages
+├── components/
+│   ├── canvas/            # Canvas-based visualization components
+│   ├── controls/          # Playback, speed, zoom controls
+│   ├── kernel/            # Kernel selector, editor, library
+│   ├── comparison/        # Split view, side-by-side comparison
+│   ├── education/         # Math display, kernel info panels
+│   └── ui/                # Reusable UI components (buttons, sliders, etc.)
+├── hooks/                 # Custom React hooks
+├── lib/
+│   ├── convolution/       # Core convolution algorithms
+│   ├── kernels/           # Predefined kernel definitions
+│   ├── image/             # Image loading, processing utilities
+│   └── export/            # Export functionality
+├── store/                 # State management
+├── types/                 # TypeScript definitions
+└── utils/                 # Helper functions
+```
+
+### Core Algorithms
+
+#### Convolution Engine
+```typescript
+interface ConvolutionOptions {
+  kernel: number[][];
+  padding: 'zero' | 'reflect' | 'replicate' | 'wrap';
+  normalize: boolean;
+  stride: number;
+}
+
+function convolve(
+  imageData: ImageData,
+  kernel: number[][],
+  options: ConvolutionOptions,
+  onProgress?: (progress: ConvolutionProgress) => void
+): Promise<ImageData>;
+```
+
+#### Step-by-step Generator
+```typescript
+interface ConvolutionStep {
+  x: number;
+  y: number;
+  inputPatch: number[][][];
+  kernel: number[][];
+  multiplications: number[][][];
+  sum: number;
+  outputValue: number;
+  channel: number;
+}
+
+function* convolutionSteps(
+  imageData: ImageData,
+  kernel: number[][],
+  options: ConvolutionOptions
+): Generator<ConvolutionStep>;
+```
+
+### Animation System
+- RequestAnimationFrame-based loop
+- Configurable frame rate (target 60fps)
+- Step batching for performance (process N pixels per frame)
+- Pause/resume without losing state
+- Step-by-step mode with manual advancement
+
+### Performance Considerations
+- Web Workers for heavy computation
+- Canvas pooling to reduce GC pressure
+- TypedArrays for numerical computation
+- Progressive rendering (don't block UI)
+- Lazy evaluation for comparison views
+
+## Development Phases
+
+### Phase 1: Foundation (Week 1-2)
+- [ ] Project setup (Next.js, TypeScript, Tailwind, ESLint, Prettier)
+- [ ] Basic project structure and component architecture
+- [ ] Image upload and display component
+- [ ] Basic Canvas rendering setup
+- [ ] Kernel data structure and predefined kernels library
+
+### Phase 2: Core Convolution (Week 2-3)
+- [ ] Implement convolution algorithm (CPU)
+- [ ] Implement padding strategies
+- [ ] Create step-by-step generator
+- [ ] Basic convolution visualization (static)
+- [ ] Output image generation
+
+### Phase 3: Animation & Visualization (Week 3-4)
+- [ ] Animation loop with play/pause/step controls
+- [ ] Speed control implementation
+- [ ] Current patch highlighting
+- [ ] Element-wise multiplication visualization
+- [ ] Summation process display
+- [ ] Progressive output rendering
+
+### Phase 4: Interactive Controls (Week 4-5)
+- [ ] Zoom/pan functionality
+- [ ] Overlay toggles (kernel boundary, values, math)
+- [ ] Kernel selector UI with categories
+- [ ] Custom kernel editor
+- [ ] Padding strategy selector with visualization
+
+### Phase 5: Comparison & Analysis (Week 5-6)
+- [ ] Side-by-side comparison view
+- [ ] Split slider component
+- [ ] Synchronized zoom/pan
+- [ ] Multi-kernel comparison tabs
+- [ ] Statistics panel (time, ops, memory)
+
+### Phase 6: Educational Features (Week 6-7)
+- [ ] Real-time equation display
+- [ ] Kernel information panels
+- [ ] Channel processing visualization
+- [ ] Tooltip/explanation system
+- [ ] Learning resource links
+
+### Phase 7: Export & Polish (Week 7-8)
+- [ ] Save processed image
+- [ ] Export animation (GIF/Video)
+- [ ] Shareable state URLs
+- [ ] Performance optimization
+- [ ] Mobile responsiveness
+- [ ] Accessibility improvements
+- [ ] Documentation & help system
+
+### Phase 8: Advanced Features (Week 8+)
+- [ ] WebGL acceleration option
+- [ ] Web Worker for computation
+- [ ] Batch processing multiple images
+- [ ] Kernel composition (sequential filters)
+- [ ] Frequency domain visualization (FFT)
+- [ ] 3D kernel visualization
+
+## Data Structures
+
+### Kernel Definition
+```typescript
+interface Kernel {
+  id: string;
+  name: string;
+  category: 'blur' | 'sharpen' | 'edge' | 'emboss' | 'custom' | 'other';
+  matrix: number[][];
+  size: number;
+  normalize: boolean;
+  description: string;
+  formula?: string;
+  reference?: string;
+}
+```
+
+### Convolution State
+```typescript
+interface ConvolutionState {
+  status: 'idle' | 'running' | 'paused' | 'completed' | 'error';
+  currentStep: ConvolutionStep | null;
+  progress: number; // 0-1
+  startTime: number;
+  elapsedTime: number;
+  processedPixels: number;
+  totalPixels: number;
+  outputImageData: ImageData | null;
+}
+```
+
+### App Settings
+```typescript
+interface AppSettings {
+  animationSpeed: number; // 0.5 - 10
+  showOverlay: {
+    kernelBoundary: boolean;
+    pixelValues: boolean;
+    multiplications: boolean;
+    summation: boolean;
+  };
+  padding: 'zero' | 'reflect' | 'replicate' | 'wrap';
+  zoomLevel: number;
+  panOffset: { x: number; y: number };
+  comparisonMode: 'side-by-side' | 'split' | 'overlay';
+}
+```
+
+## Testing Strategy
+
+### Unit Tests
+- Convolution algorithm correctness
+- Padding strategy implementations
+- Kernel normalization
+- Step generator accuracy
+- Export functionality
+
+### Integration Tests
+- Image upload → convolution → output pipeline
+- Animation playback controls
+- Comparison view synchronization
+- State persistence/restoration
+
+### Visual Regression Tests
+- Canvas rendering at different zoom levels
+- Overlay accuracy
+- Split slider positions
+- Kernel matrix display
+
+### Performance Benchmarks
+- Convolution speed (pixels/second)
+- Animation frame rate
+- Memory usage during large image processing
+- Web Worker vs main thread performance
+
+## Accessibility
+- Keyboard navigation for all controls
+- Screen reader announcements for animation state
+- High contrast mode support
+- Reduced motion preference respect
+- Focus indicators
+- Alt text for all visual elements
+
+## Browser Support
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+- Mobile browsers (iOS Safari, Chrome Android)
+
+## Deployment
+- Static export to Vercel/Netlify
+- CDN for kernel definitions and assets
+- PWA support for offline use
+- Analytics (privacy-friendly)
+
+## Success Metrics
+- Frame rate ≥ 30fps during animation
+- Convolution of 1MP image < 2 seconds
+- Time to interactive < 3 seconds
+- Lighthouse score > 90
+- Zero critical accessibility violations
+
+## Risk Mitigation
+| Risk | Mitigation |
+|------|------------|
+| Performance on large images | Web Workers, progressive rendering, WebGL fallback |
+| Animation smoothness | RequestAnimationFrame, frame budgeting, step batching |
+| Memory leaks | Canvas pooling, proper cleanup, WeakRef for caches |
+| Cross-browser canvas differences | Feature detection, polyfills, fallback rendering |
+| Complex state management | Zustand with devtools, immutable updates |
+
+## Future Extensions
+- Video convolution visualization
+- 3D convolution (volumetric data)
+- CNN layer visualization (multiple kernels, feature maps)
+- Interactive kernel design with real-time preview
+- Frequency domain analysis
+- Integration with ML frameworks (TensorFlow.js, ONNX.js)
+- Collaborative annotation/sharing
+- Plugin system for custom kernels/effects

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/app/globals.css

@@ -0,0 +1,115 @@
+@import "tailwindcss";
+
+:root {
+  --background: #f9fafb;
+  --foreground: #111827;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #111827;
+    --foreground: #f9fafb;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #9ca3af;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+/* Focus visible styles */
+:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Animations */
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out;
+}
+
+/* Canvas styles */
+canvas {
+  display: block;
+}
+
+/* Selection styles */
+::selection {
+  background: #3b82f6;
+  color: white;
+}
+
+/* Input range styles */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: 2px solid white;
+}
+
+/* Number input arrows */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  opacity: 1;
+}

src/app/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Interactive Kernel Convolution Visualizer",
+  description: "Learn how image convolution works with interactive step-by-step visualization",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,389 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { useAppStore, useImageStore, useUIStore } from '@/store'
+import { KernelSelector } from '@/components/kernel/KernelSelector'
+import { PlaybackControls } from '@/components/controls/PlaybackControls'
+import { OverlayControls, PaddingControls, KernelInfoPanel } from '@/components/controls/OverlayControls'
+import { ConvolutionCanvas } from '@/components/canvas/ConvolutionCanvas'
+import { SplitView } from '@/components/canvas/SplitView'
+import { ImageCanvas } from '@/components/canvas/ImageCanvas'
+import { Button, Card, CardContent, Badge } from '@/components/ui'
+import { useImageLoader, useDragAndDrop } from '@/hooks/useImageLoader'
+import { useConvolution } from '@/hooks/useConvolution'
+import { cn, formatNumber } from '@/utils/helpers'
+import {
+  Upload,
+  Image as ImageIcon,
+  Download,
+  RotateCcw,
+  HelpCircle,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react'
+
+export default function Home() {
+  const {
+    originalImageData,
+    processedImageData,
+    selectedKernel,
+    convolution,
+    settings,
+    isLoading,
+    error,
+    showHelp,
+    showSettings,
+    setOriginalImage,
+    setError,
+    toggleHelp,
+    toggleSettings,
+    resetConvolution,
+  } = useAppStore()
+
+  const { runConvolution, pause, resume, stop, step, reset, isRunning, isPaused, canRun } = useConvolution()
+  const { fileInputRef, openFileDialog, handleFileSelect } = useImageLoader()
+  const { handleDragOver, handleDragLeave, handleDrop, isDragging } = useDragAndDrop((image, imageData) => {
+    setOriginalImage(image, imageData)
+    resetConvolution()
+  })
+
+  const [showComparison, setShowComparison] = useState(false)
+  const [sidebarWidth, setSidebarWidth] = useState(320)
+
+  const handleImageLoad = useCallback((data: { image: HTMLImageElement; imageData: ImageData }) => {
+    setOriginalImage(data.image, data.imageData)
+    resetConvolution()
+  }, [setOriginalImage, resetConvolution])
+
+  const handleDownload = useCallback(() => {
+    if (!processedImageData) return
+    const canvas = document.createElement('canvas')
+    canvas.width = processedImageData.width
+    canvas.height = processedImageData.height
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    ctx.putImageData(processedImageData, 0, 0)
+    const link = document.createElement('a')
+    link.download = 'convolved-image.png'
+    link.href = canvas.toDataURL('image/png')
+    link.click()
+  }, [processedImageData])
+
+  const handleReset = useCallback(() => {
+    reset()
+    resetConvolution()
+  }, [reset, resetConvolution])
+
+  if (isLoading) {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-900 z-50">
+        <div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent" />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="h-screen w-screen flex flex-col bg-gray-50 dark:bg-gray-900 overflow-hidden"
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {/* Header */}
+      <header className="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-800 border-b dark:border-gray-700 z-10">
+        <div className="flex items-center gap-4">
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            Kernel Convolution Visualizer
+          </h1>
+          <Badge variant="outline" className="text-xs">
+            Educational Tool
+          </Badge>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="icon" onClick={toggleHelp} className="relative">
+            <HelpCircle className="h-5 w-5" />
+          </Button>
+          <Button variant="ghost" size="icon" onClick={toggleSettings}>
+            <Settings className="h-5 w-5" />
+          </Button>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 flex overflow-hidden">
+        {/* Left Sidebar - Controls */}
+        <aside
+          className={cn(
+            'flex flex-col bg-white dark:bg-gray-800 border-r dark:border-gray-700 overflow-y-auto transition-all duration-200',
+            'min-w-[280px] max-w-[400px]'
+          )}
+          style={{ width: sidebarWidth }}
+        >
+          {/* Image Upload */}
+          <Card className="m-3">
+            <CardContent className="p-4">
+              <div
+                className={cn(
+                  'relative border-2 dashed rounded-lg p-6 text-center transition-colors',
+                  'cursor-pointer',
+                  isDragging
+                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                    : 'border-gray-300 dark:border-gray-600 hover:border-blue-400'
+                )}
+                onClick={openFileDialog}
+              >
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                  onChange={(e) => handleFileSelect(e, handleImageLoad)}
+                />
+                <ImageIcon className="h-12 w-12 mx-auto text-gray-400 mb-3" />
+                <p className="text-gray-600 dark:text-gray-400">
+                  {originalImageData ? 'Click to change image' : 'Drag & drop or click to upload'}
+                </p>
+                <p className="text-sm text-gray-400 mt-1">PNG, JPG, WebP, BMP</p>
+              </div>
+
+              {originalImageData && (
+                <div className="mt-3 flex items-center justify-between text-sm">
+                  <span className="text-gray-600 dark:text-gray-400">
+                    {originalImageData.width} × {originalImageData.height}
+                  </span>
+                  <div className="flex gap-2">
+                    <Button variant="outline" size="sm" onClick={handleDownload}>
+                      <Download className="h-4 w-4" />
+                      Save
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={handleReset}>
+                      <RotateCcw className="h-4 w-4" />
+                      Reset
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Kernel Selector */}
+          <div className="flex-1 m-3 min-h-0">
+            <KernelSelector />
+          </div>
+
+          {/* Playback Controls */}
+          <div className="m-3">
+            <PlaybackControls />
+          </div>
+        </aside>
+
+        {/* Resizer */}
+        <div
+          className="w-1 cursor-col-resize bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 active:bg-blue-600 flex items-center justify-center"
+          onMouseDown={(e) => {
+            const startX = e.clientX
+            const startWidth = sidebarWidth
+            const onMouseMove = (e: MouseEvent) => {
+              setSidebarWidth(Math.max(280, Math.min(400, startWidth + (e.clientX - startX))))
+            }
+            const onMouseUp = () => {
+              document.removeEventListener('mousemove', onMouseMove)
+              document.removeEventListener('mouseup', onMouseUp)
+            }
+            document.addEventListener('mousemove', onMouseMove)
+            document.addEventListener('mouseup', onMouseUp)
+          }}
+        >
+          <div className="w-px h-8 bg-gray-300 dark:bg-gray-600 rounded" />
+        </div>
+
+        {/* Center - Visualization */}
+        <section className="flex-1 flex flex-col overflow-hidden p-4 min-w-0">
+          {originalImageData ? (
+            <>
+              {/* Convolution Visualization */}
+              <div className="flex-1 min-h-0 relative">
+                <ConvolutionCanvas
+                  width={originalImageData.width}
+                  height={originalImageData.height}
+                  className="w-full h-full"
+                />
+              </div>
+
+              {/* Comparison View Toggle */}
+              <div className="flex items-center justify-center gap-4 mt-4">
+                <Button
+                  variant={showComparison ? 'primary' : 'outline'}
+                  onClick={() => setShowComparison(!showComparison)}
+                >
+                  {showComparison ? <ChevronLeft className="h-4 w-4 mr-2" /> : <ChevronRight className="h-4 w-4 mr-2" />}
+                  {showComparison ? 'Hide Comparison' : 'Show Comparison'}
+                </Button>
+
+                {selectedKernel && (
+                  <Badge variant="secondary">
+                    {selectedKernel.name} ({selectedKernel.size}×{selectedKernel.size})
+                  </Badge>
+                )}
+
+                {convolution.status !== 'idle' && (
+                  <Badge variant={convolution.status === 'completed' ? 'success' : 'default'}>
+                    {convolution.status}
+                  </Badge>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg">
+              <div className="text-center text-gray-500">
+                <ImageIcon className="h-16 w-16 mx-auto mb-4 opacity-50" />
+                <p className="text-lg">Upload an image to begin</p>
+                <p className="text-sm mt-2">Drag & drop or click the upload area</p>
+              </div>
+            </div>
+          )}
+
+          {/* Comparison View */}
+          {showComparison && processedImageData && (
+            <div className="mt-4 h-96 flex-1">
+              <SplitView
+                width={originalImageData?.width || 800}
+                height={originalImageData?.height || 600}
+                className="w-full h-full"
+              />
+            </div>
+          )}
+        </section>
+
+        {/* Right Sidebar - Info Panels */}
+        <aside className="w-80 flex flex-col bg-white dark:bg-gray-800 border-l dark:border-gray-700 overflow-y-auto">
+          <div className="p-4 space-y-4">
+            <KernelInfoPanel />
+            <OverlayControls />
+            <PaddingControls />
+          </div>
+        </aside>
+      </main>
+
+      {/* Error Toast */}
+      {error && (
+        <div className="fixed bottom-4 right-4 z-50 animate-slide-in">
+          <div className="bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 max-w-md">
+            <span className="flex-1 text-sm">{error}</span>
+            <Button variant="ghost" size="sm" onClick={() => setError(null)}>
+              Dismiss
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Help Modal */}
+      {showHelp && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto">
+            <div className="p-6">
+              <h2 className="text-xl font-bold mb-4">How to Use</h2>
+              <div className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
+                <div>
+                  <h3 className="font-medium mb-2">1. Upload an Image</h3>
+                  <p>Drag & drop or click the upload area in the left sidebar.</p>
+                </div>
+                <div>
+                  <h3 className="font-medium mb-2">2. Select a Kernel</h3>
+                  <p>Choose from predefined kernels (Blur, Sharpen, Edge Detection, etc.) or create your own custom kernel.</p>
+                </div>
+                <div>
+                  <h3 className="font-medium mb-2">3. Watch the Convolution</h3>
+                  <p>Press Play to see the kernel move across the image pixel by pixel. The visualization shows:</p>
+                  <ul className="list-disc list-inside mt-1 space-y-1">
+                    <li>Current image patch under the kernel</li>
+                    <li>Element-wise multiplication of kernel and pixel values</li>
+                    <li>Summation that produces the output pixel</li>
+                  </ul>
+                </div>
+                <div>
+                  <h3 className="font-medium mb-2">4. Control Playback</h3>
+                  <ul className="list-disc list-inside mt-1 space-y-1">
+                    <li>Play/Pause/Step through the animation</li>
+                    <li>Adjust animation speed</li>
+                    <li>Zoom and pan for pixel-level inspection</li>
+                  </ul>
+                </div>
+                <div>
+                  <h3 className="font-medium mb-2">5. Compare Results</h3>
+                  <p>Click &ldquo;Show Comparison&rdquo; to see side-by-side or split view of original vs processed image.</p>
+                </div>
+                <div>
+                  <h3 className="font-medium mb-2">6. Experiment</h3>
+                  <ul className="list-disc list-inside mt-1 space-y-1">
+                    <li>Try different padding strategies (Zero, Reflect, Replicate, Wrap)</li>
+                    <li>Toggle overlays to see different visualization aspects</li>
+                    <li>Create custom kernels with the editor</li>
+                    <li>Download the processed image</li>
+                  </ul>
+                </div>
+              </div>
+              <div className="mt-6 flex justify-end">
+                <Button onClick={toggleHelp}>Got it</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Settings Modal */}
+      {showSettings && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full mx-4">
+            <div className="p-6">
+              <h2 className="text-xl font-bold mb-4">Settings</h2>
+              <div className="space-y-4">
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={settings.showOverlay.kernelBoundary}
+                    onChange={() => useAppStore.getState().toggleOverlay('kernelBoundary')}
+                    className="rounded border-gray-300"
+                  />
+                  <span>Show Kernel Boundary</span>
+                </label>
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={settings.showOverlay.pixelValues}
+                    onChange={() => useAppStore.getState().toggleOverlay('pixelValues')}
+                    className="rounded border-gray-300"
+                  />
+                  <span>Show Pixel Values</span>
+                </label>
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={settings.showOverlay.multiplications}
+                    onChange={() => useAppStore.getState().toggleOverlay('multiplications')}
+                    className="rounded border-gray-300"
+                  />
+                  <span>Show Multiplications</span>
+                </label>
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={settings.showOverlay.summation}
+                    onChange={() => useAppStore.getState().toggleOverlay('summation')}
+                    className="rounded border-gray-300"
+                  />
+                  <span>Show Summation</span>
+                </label>
+              </div>
+              <div className="mt-6 flex justify-end">
+                <Button onClick={toggleSettings}>Close</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/canvas/ConvolutionCanvas.tsx

@@ -0,0 +1,255 @@
+'use client'
+
+import { useRef, useEffect, useCallback, useMemo } from 'react'
+import { useAppStore, useConvolutionStore, useSettingsStore } from '@/store'
+import type { ConvolutionStep } from '@/types'
+import { cn } from '@/utils/helpers'
+
+interface ConvolutionCanvasProps {
+  width?: number
+  height?: number
+  className?: string
+}
+
+export function ConvolutionCanvas({ width = 800, height = 600, className }: ConvolutionCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const animationRef = useRef<number | null>(null)
+
+  const { originalImageData, processedImageData, convolution } = useAppStore()
+  const { showOverlay, zoomLevel, panOffset, padding } = useSettingsStore()
+  const currentStep = convolution.currentStep
+
+  const drawCanvas = useCallback(() => {
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d', { willReadFrequently: true })
+    if (!canvas || !ctx) return
+
+    const displayWidth = Math.round(width * zoomLevel)
+    const displayHeight = Math.round(height * zoomLevel)
+
+    canvas.width = displayWidth
+    canvas.height = displayHeight
+
+    ctx.clearRect(0, 0, displayWidth, displayHeight)
+    ctx.imageSmoothingEnabled = false
+
+    // Draw original image as background (dimmed)
+    if (originalImageData) {
+      const tempCanvas = document.createElement('canvas')
+      tempCanvas.width = originalImageData.width
+      tempCanvas.height = originalImageData.height
+      const tempCtx = tempCanvas.getContext('2d')
+      if (tempCtx) {
+        tempCtx.putImageData(originalImageData, 0, 0)
+        ctx.globalAlpha = 0.3
+        ctx.drawImage(
+          tempCanvas,
+          0,
+          0,
+          originalImageData.width,
+          originalImageData.height,
+          panOffset.x,
+          panOffset.y,
+          originalImageData.width * zoomLevel,
+          originalImageData.height * zoomLevel
+        )
+        ctx.globalAlpha = 1
+      }
+    }
+
+    // Draw processed image progressively
+    if (processedImageData) {
+      const tempCanvas = document.createElement('canvas')
+      tempCanvas.width = processedImageData.width
+      tempCanvas.height = processedImageData.height
+      const tempCtx = tempCanvas.getContext('2d')
+      if (tempCtx) {
+        tempCtx.putImageData(processedImageData, 0, 0)
+        ctx.drawImage(
+          tempCanvas,
+          0,
+          0,
+          processedImageData.width,
+          processedImageData.height,
+          panOffset.x,
+          panOffset.y,
+          processedImageData.width * zoomLevel,
+          processedImageData.height * zoomLevel
+        )
+      }
+    }
+
+    // Draw convolution visualization overlays
+    if (currentStep && currentStep.x >= 0 && currentStep.y >= 0) {
+      drawConvolutionOverlay(ctx, currentStep, zoomLevel, panOffset, showOverlay)
+    }
+
+    // Draw progress indicator
+    if (convolution.status === 'running' || convolution.status === 'paused') {
+      drawProgressBar(ctx, displayWidth, displayHeight, convolution.progress)
+    }
+  }, [
+    originalImageData,
+    processedImageData,
+    currentStep,
+    convolution.status,
+    convolution.progress,
+    zoomLevel,
+    panOffset,
+    showOverlay,
+    width,
+    height,
+  ])
+
+  useEffect(() => {
+    drawCanvas()
+  }, [drawCanvas])
+
+  // Animation loop for smooth rendering
+  useEffect(() => {
+    const animate = () => {
+      drawCanvas()
+      animationRef.current = requestAnimationFrame(animate)
+    }
+    animationRef.current = requestAnimationFrame(animate)
+    return () => {
+      if (animationRef.current) cancelAnimationFrame(animationRef.current)
+    }
+  }, [drawCanvas])
+
+  return (
+    <div className={cn('relative overflow-hidden bg-gray-100 dark:bg-gray-900 rounded-lg', className)}>
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        className="block"
+        style={{ touchAction: 'none' }}
+      />
+    </div>
+  )
+}
+
+function drawConvolutionOverlay(
+  ctx: CanvasRenderingContext2D,
+  step: ConvolutionStep,
+  zoom: number,
+  pan: { x: number; y: number },
+  showOverlay: {
+    kernelBoundary: boolean
+    pixelValues: boolean
+    multiplications: boolean
+    summation: boolean
+  }
+) {
+  const { x, y, inputPatch, kernel, multiplications, sum, normalizedValue, channel } = step
+  const kernelSize = kernel.length
+  const halfKernel = Math.floor(kernelSize / 2)
+  const cellSize = Math.max(20, Math.min(60, 40 * zoom))
+
+  const centerX = pan.x + x * zoom
+  const centerY = pan.y + y * zoom
+
+  // Draw kernel boundary
+  if (showOverlay.kernelBoundary) {
+    ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)'
+    ctx.lineWidth = 2
+    ctx.setLineDash([5, 5])
+    ctx.strokeRect(
+      centerX - halfKernel * cellSize * zoom,
+      centerY - halfKernel * cellSize * zoom,
+      kernelSize * cellSize * zoom,
+      kernelSize * cellSize * zoom
+    )
+    ctx.setLineDash([])
+  }
+
+  // Draw kernel matrix with values
+  if (showOverlay.pixelValues || showOverlay.multiplications) {
+    const fontSize = Math.max(10, Math.min(14, 12 * zoom))
+    ctx.font = `${fontSize}px monospace`
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    for (let ky = 0; ky < kernelSize; ky++) {
+      for (let kx = 0; kx < kernelSize; kx++) {
+        const cellX = centerX + (kx - halfKernel) * cellSize * zoom
+        const cellY = centerY + (ky - halfKernel) * cellSize * zoom
+
+        // Cell background
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
+        ctx.fillRect(cellX - cellSize / 2, cellY - cellSize / 2, cellSize, cellSize)
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)'
+        ctx.strokeRect(cellX - cellSize / 2, cellY - cellSize / 2, cellSize, cellSize)
+
+        if (showOverlay.multiplications && multiplications[ky]?.[kx] !== undefined) {
+          // Show multiplication: pixel × kernel
+          const pixelVal = inputPatch[ky]?.[kx] ?? 0
+          const kernelVal = kernel[ky]?.[kx] ?? 0
+          const mult = multiplications[ky][kx]
+
+          ctx.fillStyle = '#1e40af'
+          ctx.fillText(`${pixelVal.toFixed(2)}×${kernelVal.toFixed(2)}`, cellX, cellY - fontSize / 2)
+          ctx.fillStyle = '#dc2626'
+          ctx.fillText(`=${mult.toFixed(3)}`, cellX, cellY + fontSize / 2)
+        } else if (showOverlay.pixelValues) {
+          // Show kernel value
+          const kernelVal = kernel[ky]?.[kx] ?? 0
+          ctx.fillStyle = '#1e40af'
+          ctx.fillText(kernelVal.toFixed(2), cellX, cellY)
+        }
+      }
+    }
+  }
+
+  // Draw summation display
+  if (showOverlay.summation) {
+    const fontSize = Math.max(12, Math.min(16, 14 * zoom))
+    ctx.font = `bold ${fontSize}px monospace`
+    ctx.textAlign = 'left'
+    ctx.textBaseline = 'top'
+
+    const sumX = centerX + (halfKernel + 1) * cellSize * zoom
+    const sumY = centerY - halfKernel * cellSize * zoom
+
+    // Background
+    const padding = 8
+    const textWidth = ctx.measureText(`Σ = ${sum.toFixed(3)}`).width + padding * 2
+    const textHeight = fontSize * 3 + padding * 2
+
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.95)'
+    ctx.fillRect(sumX - padding, sumY - padding, textWidth, textHeight)
+    ctx.strokeStyle = '#3b82f6'
+    ctx.lineWidth = 2
+    ctx.strokeRect(sumX - padding, sumY - padding, textWidth, textHeight)
+
+    ctx.fillStyle = '#1e40af'
+    ctx.fillText(`Channel: ${['R', 'G', 'B', 'A'][channel] ?? channel}`, sumX, sumY)
+    ctx.fillText(`Sum: ${sum.toFixed(3)}`, sumX, sumY + fontSize + 4)
+    ctx.fillStyle = '#16a34a'
+    ctx.fillText(`Output: ${normalizedValue.toFixed(3)}`, sumX, sumY + (fontSize + 4) * 2)
+  }
+}
+
+function drawProgressBar(
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  progress: number
+) {
+  const barHeight = 4
+  const barWidth = width * 0.8
+  const x = (width - barWidth) / 2
+  const y = height - 20
+
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
+  ctx.fillRect(x, y, barWidth, barHeight)
+
+  ctx.fillStyle = '#3b82f6'
+  ctx.fillRect(x, y, barWidth * progress, barHeight)
+
+  ctx.fillStyle = '#fff'
+  ctx.font = '12px monospace'
+  ctx.textAlign = 'center'
+  ctx.fillText(`${Math.round(progress * 100)}%`, width / 2, y - 4)
+}

src/components/canvas/ImageCanvas.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useRef, useEffect, useCallback } from 'react'
+import { useAppStore } from '@/store'
+import { cn } from '@/utils/helpers'
+
+interface ImageCanvasProps {
+  imageData: ImageData | null
+  title: string
+  width?: number
+  height?: number
+  className?: string
+  onWheel?: (e: React.WheelEvent) => void
+  onMouseDown?: (e: React.MouseEvent) => void
+  onMouseMove?: (e: React.MouseEvent) => void
+  onMouseUp?: (e: React.MouseEvent) => void
+}
+
+export function ImageCanvas({
+  imageData,
+  title,
+  width = 400,
+  height = 300,
+  className,
+  onWheel,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+}: ImageCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const { settings } = useAppStore()
+
+  const drawCanvas = useCallback(() => {
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d', { willReadFrequently: true })
+    if (!canvas || !ctx || !imageData) return
+
+    const { zoomLevel, panOffset } = settings
+    const displayWidth = Math.round(imageData.width * zoomLevel)
+    const displayHeight = Math.round(imageData.height * zoomLevel)
+
+    canvas.width = displayWidth
+    canvas.height = displayHeight
+
+    ctx.clearRect(0, 0, displayWidth, displayHeight)
+    ctx.imageSmoothingEnabled = zoomLevel < 2
+
+    const tempCanvas = document.createElement('canvas')
+    tempCanvas.width = imageData.width
+    tempCanvas.height = imageData.height
+    const tempCtx = tempCanvas.getContext('2d')
+    if (tempCtx) {
+      tempCtx.putImageData(imageData, 0, 0)
+      ctx.drawImage(
+        tempCanvas,
+        0,
+        0,
+        imageData.width,
+        imageData.height,
+        panOffset.x,
+        panOffset.y,
+        displayWidth,
+        displayHeight
+      )
+    }
+
+    // Draw grid at high zoom
+    if (zoomLevel >= 4) {
+      drawGrid(ctx, imageData.width, imageData.height, zoomLevel, panOffset)
+    }
+  }, [imageData, settings.zoomLevel, settings.panOffset])
+
+  useEffect(() => {
+    drawCanvas()
+  }, [drawCanvas])
+
+  return (
+    <div className={cn('relative bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden', className)}>
+      <div className="absolute top-2 left-2 z-10 px-2 py-1 bg-black/50 text-white text-xs rounded">
+        {title}
+      </div>
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        className="block cursor-grab active:cursor-grabbing"
+        style={{ touchAction: 'none' }}
+        onWheel={onWheel}
+        onMouseDown={onMouseDown}
+        onMouseMove={onMouseMove}
+        onMouseUp={onMouseUp}
+      />
+    </div>
+  )
+}
+
+function drawGrid(
+  ctx: CanvasRenderingContext2D,
+  imgWidth: number,
+  imgHeight: number,
+  zoom: number,
+  pan: { x: number; y: number }
+) {
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'
+  ctx.lineWidth = 0.5
+
+  for (let x = 0; x <= imgWidth; x++) {
+    const px = pan.x + x * zoom
+    ctx.beginPath()
+    ctx.moveTo(px, 0)
+    ctx.lineTo(px, imgHeight * zoom)
+    ctx.stroke()
+  }
+
+  for (let y = 0; y <= imgHeight; y++) {
+    const py = pan.y + y * zoom
+    ctx.beginPath()
+    ctx.moveTo(0, py)
+    ctx.lineTo(imgWidth * zoom, py)
+    ctx.stroke()
+  }
+}

src/components/canvas/SplitView.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+import { useRef, useEffect, useCallback, useState } from 'react'
+import { useAppStore } from '@/store'
+import { cn } from '@/utils/helpers'
+
+interface SplitViewProps {
+  width?: number
+  height?: number
+  className?: string
+}
+
+export function SplitView({ width = 800, height = 600, className }: SplitViewProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const { originalImageData, processedImageData } = useAppStore()
+  const { splitPosition, mode, setComparisonViewMode, setSplitPosition } = useAppStore((state) => ({
+    splitPosition: state.comparison.splitPosition,
+    mode: state.comparison.mode,
+    setComparisonViewMode: state.setComparisonViewMode,
+    setSplitPosition: state.setSplitPosition,
+  }))
+  const [isDragging, setIsDragging] = useState(false)
+
+  const drawCanvas = useCallback(() => {
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d', { willReadFrequently: true })
+    if (!canvas || !ctx || !originalImageData) return
+
+    const displayWidth = width
+    const displayHeight = height
+
+    canvas.width = displayWidth
+    canvas.height = displayHeight
+    ctx.clearRect(0, 0, displayWidth, displayHeight)
+
+    const splitX = displayWidth * splitPosition
+
+    if (mode === 'split' || mode === 'overlay') {
+      // Draw original on left
+      if (originalImageData) {
+        const tempCanvas = document.createElement('canvas')
+        tempCanvas.width = originalImageData.width
+        tempCanvas.height = originalImageData.height
+        const tempCtx = tempCanvas.getContext('2d')
+        if (tempCtx) {
+          tempCtx.putImageData(originalImageData, 0, 0)
+          ctx.drawImage(
+            tempCanvas,
+            0,
+            0,
+            originalImageData.width,
+            originalImageData.height,
+            0,
+            0,
+            splitX,
+            displayHeight
+          )
+        }
+      }
+
+      // Draw processed on right
+      if (processedImageData) {
+        const tempCanvas = document.createElement('canvas')
+        tempCanvas.width = processedImageData.width
+        tempCanvas.height = processedImageData.height
+        const tempCtx = tempCanvas.getContext('2d')
+        if (tempCtx) {
+          tempCtx.putImageData(processedImageData, 0, 0)
+          ctx.drawImage(
+            tempCanvas,
+            splitX * (originalImageData.width / displayWidth),
+            0,
+            processedImageData.width - splitX * (originalImageData.width / displayWidth),
+            processedImageData.height,
+            splitX,
+            0,
+            displayWidth - splitX,
+            displayHeight
+          )
+        }
+      }
+
+      // Draw divider
+      ctx.strokeStyle = '#fff'
+      ctx.lineWidth = 3
+      ctx.setLineDash([10, 5])
+      ctx.beginPath()
+      ctx.moveTo(splitX, 0)
+      ctx.lineTo(splitX, displayHeight)
+      ctx.stroke()
+      ctx.setLineDash([])
+
+      // Draw handle
+      ctx.fillStyle = '#3b82f6'
+      ctx.beginPath()
+      ctx.arc(splitX, displayHeight / 2, 12, 0, Math.PI * 2)
+      ctx.fill()
+      ctx.strokeStyle = '#fff'
+      ctx.lineWidth = 2
+      ctx.stroke()
+    } else if (mode === 'side-by-side') {
+      // Side by side view
+      const halfWidth = displayWidth / 2
+      if (originalImageData) {
+        const tempCanvas = document.createElement('canvas')
+        tempCanvas.width = originalImageData.width
+        tempCanvas.height = originalImageData.height
+        const tempCtx = tempCanvas.getContext('2d')
+        if (tempCtx) {
+          tempCtx.putImageData(originalImageData, 0, 0)
+          ctx.drawImage(tempCanvas, 0, 0, halfWidth, displayHeight)
+        }
+      }
+      if (processedImageData) {
+        const tempCanvas = document.createElement('canvas')
+        tempCanvas.width = processedImageData.width
+        tempCanvas.height = processedImageData.height
+        const tempCtx = tempCanvas.getContext('2d')
+        if (tempCtx) {
+          tempCtx.putImageData(processedImageData, 0, 0)
+          ctx.drawImage(tempCanvas, halfWidth, 0, halfWidth, displayHeight)
+        }
+      }
+      // Draw center line
+      ctx.strokeStyle = 'rgba(255,255,255,0.5)'
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      ctx.moveTo(halfWidth, 0)
+      ctx.lineTo(halfWidth, displayHeight)
+      ctx.stroke()
+    }
+  }, [originalImageData, processedImageData, splitPosition, mode, width, height])
+
+  useEffect(() => {
+    drawCanvas()
+  }, [drawCanvas])
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (mode !== 'split') return
+    const rect = canvasRef.current?.getBoundingClientRect()
+    if (!rect) return
+    const x = e.clientX - rect.left
+    if (Math.abs(x - width * splitPosition) < 20) {
+      setIsDragging(true)
+    }
+  }, [mode, splitPosition, width])
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isDragging || mode !== 'split') return
+      const rect = canvasRef.current?.getBoundingClientRect()
+      if (!rect) return
+      const x = e.clientX - rect.left
+      const newPosition = Math.max(0.1, Math.min(0.9, x / width))
+      setSplitPosition(newPosition)
+    },
+    [isDragging, mode, width, setSplitPosition]
+  )
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false)
+  }, [])
+
+  return (
+    <div className={cn('relative bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden', className)}>
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        className="block"
+        style={{ cursor: isDragging ? 'ew-resize' : mode === 'split' ? 'ew-resize' : 'default' }}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      />
+      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-2">
+        <button
+          className={cn('px-3 py-1 text-xs rounded', mode === 'split' && 'bg-blue-600 text-white')}
+          onClick={() => setComparisonViewMode('split')}
+        >
+          Split
+        </button>
+        <button
+          className={cn('px-3 py-1 text-xs rounded', mode === 'side-by-side' && 'bg-blue-600 text-white')}
+          onClick={() => setComparisonViewMode('side-by-side')}
+        >
+          Side by Side
+        </button>
+        <button
+          className={cn('px-3 py-1 text-xs rounded', mode === 'overlay' && 'bg-blue-600 text-white')}
+          onClick={() => setComparisonViewMode('overlay')}
+        >
+          Overlay
+        </button>
+      </div>
+    </div>
+  )
+}

src/components/canvas/index.ts

@@ -0,0 +1,3 @@
+export { ConvolutionCanvas } from './ConvolutionCanvas'
+export { ImageCanvas } from './ImageCanvas'
+export { SplitView } from './SplitView'

src/components/controls/OverlayControls.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { useAppStore } from '@/store'
+import { PADDING_MODES } from '@/lib/kernels'
+import { Select, Card, CardContent, Slider, Button } from '@/components/ui'
+import { cn } from '@/utils/helpers'
+import { Settings, Layers, Grid } from 'lucide-react'
+
+export function OverlayControls() {
+  const { settings, updateSettings, toggleOverlay, setPadding } = useAppStore()
+  const { showOverlay, padding } = settings
+
+  return (
+    <Card className="w-full">
+      <CardContent className="p-4 space-y-4">
+        <h3 className="font-medium flex items-center gap-2">
+          <Settings className="h-4 w-4" />
+          Visualization Overlays
+        </h3>
+
+        <div className="grid grid-cols-2 gap-2">
+          {Object.entries(showOverlay).map(([key, value]) => (
+            <label key={key} className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={value}
+                onChange={() => toggleOverlay(key as keyof typeof showOverlay)}
+                className="rounded border-gray-300"
+              />
+              <span className="text-sm capitalize">{key.replace(/([A-Z])/g, ' $1')}</span>
+            </label>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function PaddingControls() {
+  const { settings, setPadding } = useAppStore()
+  const { padding } = settings
+
+  return (
+    <Card className="w-full">
+      <CardContent className="p-4 space-y-4">
+        <h3 className="font-medium flex items-center gap-2">
+          <Grid className="h-4 w-4" />
+          Padding Strategy
+        </h3>
+
+        <Select
+          value={padding}
+          onChange={(e) => setPadding(e.target.value as typeof padding)}
+          options={PADDING_MODES.map((p) => ({ value: p.value, label: p.label }))}
+          placeholder="Select padding mode"
+        />
+
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          {PADDING_MODES.find((p) => p.value === padding)?.description}
+        </div>
+
+        {/* Padding visualization would go here */}
+      </CardContent>
+    </Card>
+  )
+}
+
+export function KernelInfoPanel() {
+  const { selectedKernel } = useAppStore()
+
+  if (!selectedKernel) {
+    return (
+      <Card className="w-full">
+        <CardContent className="p-4 text-center text-gray-500">
+          No kernel selected
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const { name, category, matrix, size, normalize, description, formula, reference } = selectedKernel
+
+  return (
+    <Card className="w-full">
+      <CardContent className="p-4 space-y-4">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h3 className="font-medium">{name}</h3>
+            <div className="flex items-center gap-2 mt-1">
+              <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded dark:bg-blue-900/30 dark:text-blue-300">
+                {category}
+              </span>
+              <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-800 rounded dark:bg-gray-800 dark:text-gray-300">
+                {size}×{size}
+              </span>
+              {normalize && (
+                <span className="px-2 py-0.5 text-xs bg-green-100 text-green-800 rounded dark:bg-green-900/30 dark:text-green-300">
+                  Normalized
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <p className="text-sm text-gray-600 dark:text-gray-400">{description}</p>
+
+        {formula && (
+          <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded font-mono text-sm">
+            <span className="text-gray-500">Formula: </span>
+            <span>{formula}</span>
+          </div>
+        )}
+
+        <div className="space-y-2">
+          <h4 className="text-sm font-medium">Kernel Matrix</h4>
+          <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${size}, 1fr)` }}>
+            {matrix.map((row, i) =>
+              row.map((val, j) => (
+                <div
+                  key={`${i}-${j}`}
+                  className={cn(
+                    'p-2 text-center text-sm font-mono rounded',
+                    val > 0 ? 'bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300'
+                  )}
+                >
+                  {val.toFixed(val === Math.round(val) ? 0 : 2)}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {reference && (
+          <a
+            href={reference}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-blue-600 hover:underline flex items-center gap-1"
+          >
+            <Layers className="h-3 w-3" />
+            Reference
+          </a>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/controls/PlaybackControls.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { useAppStore } from '@/store'
+import { useConvolution } from '@/hooks/useConvolution'
+import { Button, Slider, Card, CardContent } from '@/components/ui'
+import { cn } from '@/utils/helpers'
+import { Play, Pause, RotateCcw, StepForward, ZoomIn, ZoomOut, Maximize } from 'lucide-react'
+
+export function PlaybackControls() {
+  const {
+    convolution,
+    settings,
+    startConvolution,
+    pauseConvolution,
+    resumeConvolution,
+    stopConvolution,
+    updateConvolutionStep,
+    updateConvolutionProgress,
+    completeConvolution,
+    setConvolutionError,
+    resetConvolution,
+    setAnimationSpeed,
+    setZoomLevel,
+    setPanOffset,
+    toggleOverlay,
+    setPadding,
+    setComparisonMode,
+    setStepMode,
+  } = useAppStore()
+
+  const { runConvolution, pause, resume, stop, step, reset, isRunning, isPaused, canRun, toggleStepMode } = useConvolution()
+
+  const { status, progress, elapsedTime } = convolution
+  const { animationSpeed, zoomLevel, stepMode } = settings
+
+  const isCompleted = status === 'completed'
+  const isActive = isRunning || isPaused || isCompleted
+
+  const formatTime = (ms: number) => {
+    if (ms < 1000) return `${ms}ms`
+    return `${(ms / 1000).toFixed(1)}s`
+  }
+
+  return (
+    <Card className="w-full">
+      <CardContent className="p-4 space-y-4">
+        {/* Main Controls */}
+        <div className="flex items-center gap-2 flex-wrap">
+          <Button
+            variant={isRunning ? 'secondary' : 'primary'}
+            size="lg"
+            onClick={isRunning ? pause : runConvolution}
+            disabled={!canRun}
+            className="min-w-[100px]"
+          >
+            {isRunning ? (
+              <>
+                <Pause className="h-4 w-4" />
+                Pause
+              </>
+            ) : (
+              <>
+                <Play className="h-4 w-4" />
+                {isPaused ? 'Resume' : 'Play'}
+              </>
+            )}
+          </Button>
+
+          <Button variant="outline" size="lg" onClick={step} disabled={isRunning || isCompleted}>
+            <StepForward className="h-4 w-4" />
+            Step
+          </Button>
+
+          <Button variant="outline" size="lg" onClick={stop} disabled={status === 'idle'}>
+            <RotateCcw className="h-4 w-4" />
+            Stop
+          </Button>
+
+          <Button variant="outline" size="lg" onClick={reset} disabled={status === 'idle'}>
+            <RotateCcw className="h-4 w-4" />
+            Reset
+          </Button>
+        </div>
+
+        {/* Speed Control */}
+        <div>
+          <label className="flex items-center justify-between text-sm mb-1">
+            <span>Animation Speed</span>
+            <span className="font-mono text-blue-600">{animationSpeed.toFixed(1)}x</span>
+          </label>
+          <Slider
+            min={0.1}
+            max={10}
+            step={0.1}
+            value={animationSpeed}
+            onValueChange={setAnimationSpeed}
+            showValue
+            valueFormat={(v: number) => `${v.toFixed(1)}x`}
+          />
+        </div>
+
+        {/* Zoom Controls */}
+        <div>
+          <label className="flex items-center justify-between text-sm mb-1">
+            <span>Zoom</span>
+            <span className="font-mono text-blue-600">{Math.round(zoomLevel * 100)}%</span>
+          </label>
+          <Slider
+            min={0.1}
+            max={20}
+            step={0.1}
+            value={zoomLevel}
+            onValueChange={setZoomLevel}
+            showValue
+            valueFormat={(v: number) => `${Math.round(v * 100)}%`}
+          />
+          <div className="flex gap-2 mt-2">
+            <Button variant="outline" size="sm" onClick={() => setZoomLevel(Math.min(20, zoomLevel * 1.2))}>
+              <ZoomIn className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => setZoomLevel(Math.max(0.1, zoomLevel / 1.2))}>
+              <ZoomOut className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => { setZoomLevel(1); setPanOffset({ x: 0, y: 0 }) }}>
+              <Maximize className="h-4 w-4" />
+              Fit
+            </Button>
+          </div>
+        </div>
+
+        {/* Progress */}
+        {isActive && (
+          <div className="space-y-2 pt-2 border-t dark:border-gray-700">
+            <div className="flex items-center justify-between text-sm">
+              <span>Progress</span>
+              <span className="font-mono">{Math.round(progress * 100)}%</span>
+            </div>
+            <div className="h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
+              <div
+                className="h-full bg-blue-600 transition-all duration-300"
+                style={{ width: `${progress * 100}%` }}
+              />
+            </div>
+            <div className="flex justify-between text-xs text-gray-500">
+              <span>Elapsed: {formatTime(elapsedTime)}</span>
+              <span>{status === 'running' ? 'Running' : status === 'paused' ? 'Paused' : 'Completed'}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Step Mode Toggle */}
+        <div className="flex items-center justify-between pt-2 border-t dark:border-gray-700">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={stepMode}
+              onChange={(e) => toggleStepMode(e.target.checked)}
+              className="rounded border-gray-300"
+            />
+            <span className="text-sm">Step Mode (manual advance)</span>
+          </label>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/controls/index.ts

@@ -0,0 +1,2 @@
+export { PlaybackControls } from './PlaybackControls'
+export { OverlayControls, PaddingControls, KernelInfoPanel } from './OverlayControls'

src/components/kernel/KernelSelector.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { useState } from 'react'
+import { useAppStore } from '@/store'
+import { PREDEFINED_KERNELS, KERNEL_CATEGORIES, getKernelsByCategory } from '@/lib/kernels'
+import type { KernelCategory } from '@/lib/kernels'
+import { Button, Card, CardContent, Badge, Input } from '@/components/ui'
+import { cn } from '@/utils/helpers'
+import { Search, SlidersHorizontal, Plus } from 'lucide-react'
+
+export function KernelSelector() {
+  const { selectedKernel, setSelectedKernel, customKernelMatrix, customKernelSize, customKernelNormalize, setCustomKernel, setCustomKernelSize, setCustomKernelNormalize, updateCustomKernelCell } = useAppStore()
+  const [activeCategory, setActiveCategory] = useState<KernelCategory>('blur')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [showCustom, setShowCustom] = useState(false)
+
+  const filteredKernels = PREDEFINED_KERNELS.filter(
+    (k) =>
+      k.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      k.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      k.description.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const kernelsByCategory = KERNEL_CATEGORIES.map((cat) => ({
+    ...cat,
+    kernels: getKernelsByCategory(cat.value).filter((k) =>
+      k.name.toLowerCase().includes(searchQuery.toLowerCase())
+    ),
+  }))
+
+  const handleKernelSelect = (kernel: typeof PREDEFINED_KERNELS[0]) => {
+    setSelectedKernel(kernel)
+    setShowCustom(false)
+  }
+
+  const handleCustomKernelSubmit = () => {
+    const kernel = {
+      id: `custom-${Date.now()}`,
+      name: `Custom ${customKernelSize}×${customKernelSize}`,
+      category: 'custom' as KernelCategory,
+      matrix: customKernelMatrix,
+      size: customKernelSize,
+      normalize: customKernelNormalize,
+      description: 'User-defined custom kernel',
+    }
+    setSelectedKernel(kernel)
+  }
+
+  return (
+    <Card className="w-full max-w-2xl">
+      <div className="flex items-center justify-between p-4 border-b dark:border-gray-700">
+        <h2 className="text-lg font-semibold">Kernel Selector</h2>
+        <Button variant="ghost" size="icon" onClick={() => setShowCustom(!showCustom)}>
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <CardContent className="p-4">
+        {/* Search */}
+        <div className="relative mb-4">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <input
+            type="text"
+            placeholder="Search kernels..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          />
+        </div>
+
+        {/* Category Tabs */}
+        <div className="flex gap-1 mb-4 overflow-x-auto pb-2">
+          {KERNEL_CATEGORIES.map((cat) => (
+            <button
+              key={cat.value}
+              onClick={() => setActiveCategory(cat.value)}
+              className={cn(
+                'px-3 py-1.5 text-sm rounded-full whitespace-nowrap transition-colors',
+                activeCategory === cat.value
+                  ? 'bg-blue-600 text-white'
+                  : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'
+              )}
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Custom Kernel Editor */}
+        {showCustom && (
+          <div className="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border dark:border-gray-700">
+            <h3 className="font-medium mb-3">Custom Kernel Editor</h3>
+            <div className="flex items-center gap-4 mb-3">
+              <Input
+                type="number"
+                label="Size"
+                value={customKernelSize}
+                onChange={(e) => setCustomKernelSize(Math.max(3, Math.min(9, parseInt(e.target.value) || 3)))}
+                min={3}
+                max={9}
+                step={2}
+                className="w-24"
+              />
+              <label className="flex items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={customKernelNormalize}
+                  onChange={(e) => setCustomKernelNormalize(e.target.checked)}
+                  className="rounded border-gray-300"
+                />
+                Normalize
+              </label>
+            </div>
+            <div className="grid gap-1 mb-3" style={{ gridTemplateColumns: `repeat(${customKernelSize}, 1fr)` }}>
+              {Array.from({ length: customKernelSize }, (_, row) =>
+                Array.from({ length: customKernelSize }, (_, col) => (
+                  <input
+                    key={`${row}-${col}`}
+                    type="number"
+                    step="0.1"
+                    value={customKernelMatrix[row]?.[col] ?? 0}
+                    onChange={(e) => updateCustomKernelCell(row, col, parseFloat(e.target.value) || 0)}
+                    className="w-full h-8 text-center text-sm border border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700"
+                  />
+                ))
+              )}
+            </div>
+            <Button onClick={handleCustomKernelSubmit} className="w-full">
+              Apply Custom Kernel
+            </Button>
+          </div>
+        )}
+
+        {/* Kernel List */}
+        <div className="space-y-3 max-h-96 overflow-y-auto">
+          {kernelsByCategory
+            .filter((cat) => cat.kernels.length > 0)
+            .map((cat) => (
+              <div key={cat.value} className="space-y-2">
+                <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+                  {cat.label}
+                </h4>
+                <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))' }}>
+                  {cat.kernels.map((kernel) => (
+                    <button
+                      key={kernel.id}
+                      onClick={() => handleKernelSelect(kernel)}
+                      className={cn(
+                        'p-3 text-left rounded-lg border transition-all',
+                        'hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20',
+                        selectedKernel?.id === kernel.id
+                          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                          : 'border-gray-200 dark:border-gray-700'
+                      )}
+                    >
+                      <div className="font-medium text-sm">{kernel.name}</div>
+                      <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
+                        {kernel.description}
+                      </div>
+                      <div className="flex items-center gap-1 mt-2">
+                        <Badge variant="outline" className="text-xs">
+                          {kernel.size}×{kernel.size}
+                        </Badge>
+                        {kernel.normalize && (
+                          <Badge variant="secondary" className="text-xs">
+                            Normalized
+                          </Badge>
+                        )}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          {filteredKernels.length === 0 && (
+            <div className="text-center py-8 text-gray-500">
+              No kernels found matching &ldquo;{searchQuery}&rdquo;
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/ui/Badge.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { forwardRef, HTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: 'default' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline'
+}
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    const variants = {
+      default: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300',
+      secondary: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
+      success: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
+      warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
+      danger: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+      outline: 'border border-gray-300 text-gray-700 dark:border-gray-600 dark:text-gray-300',
+    }
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
+          variants[variant],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    )
+  }
+)
+
+Badge.displayName = 'Badge'

src/components/ui/Button.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { forwardRef, ButtonHTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+  size?: 'sm' | 'md' | 'lg' | 'icon'
+  loading?: boolean
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'primary', size = 'md', loading, disabled, children, ...props }, ref) => {
+    const baseStyles =
+      'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
+
+    const variants = {
+      primary: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500',
+      secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700',
+      outline: 'border border-gray-300 bg-transparent hover:bg-gray-100 focus-visible:ring-gray-500 dark:border-gray-600 dark:hover:bg-gray-800',
+      ghost: 'bg-transparent hover:bg-gray-100 focus-visible:ring-gray-500 dark:hover:bg-gray-800',
+      danger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500',
+    }
+
+    const sizes = {
+      sm: 'h-8 px-3 text-sm gap-1.5',
+      md: 'h-10 px-4 text-sm gap-2',
+      lg: 'h-12 px-6 text-base gap-2',
+      icon: 'h-10 w-10',
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(baseStyles, variants[variant], sizes[size], className)}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="animate-spin h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {children}
+      </button>
+    )
+  }
+)
+
+Button.displayName = 'Button'

src/components/ui/Card.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { forwardRef, HTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'outlined' | 'elevated'
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    const variants = {
+      default: 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
+      outlined: 'bg-transparent border-2 border-gray-300 dark:border-gray-600',
+      elevated: 'bg-white dark:bg-gray-800 shadow-lg border-none',
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn('rounded-lg', variants[variant], className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Card.displayName = 'Card'
+
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('px-6 py-4 border-b border-gray-200 dark:border-gray-700', className)} {...props}>
+      {children}
+    </div>
+  )
+)
+
+CardHeader.displayName = 'CardHeader'
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => (
+    <h3 ref={ref} className={cn('text-lg font-semibold text-gray-900 dark:text-gray-100', className)} {...props}>
+      {children}
+    </h3>
+  )
+)
+
+CardTitle.displayName = 'CardTitle'
+
+export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-gray-500 dark:text-gray-400 mt-1', className)} {...props}>
+      {children}
+    </p>
+  )
+)
+
+CardDescription.displayName = 'CardDescription'
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('px-6 py-4', className)} {...props}>
+      {children}
+    </div>
+  )
+)
+
+CardContent.displayName = 'CardContent'
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center gap-2', className)} {...props}>
+      {children}
+    </div>
+  )
+)
+
+CardFooter.displayName = 'CardFooter'

src/components/ui/Input.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { forwardRef, InputHTMLAttributes, LabelHTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  helperText?: string
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, error, helperText, id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, '-')
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+          >
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={cn(
+            'flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm',
+            'placeholder:text-gray-400',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+            'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-100',
+            'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500',
+            error && 'border-red-500 focus:ring-red-500',
+            className
+          )}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined}
+          {...props}
+        />
+        {error && (
+          <p id={`${inputId}-error`} className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={`${inputId}-helper`} className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Input.displayName = 'Input'
+
+// Removed empty LabelProps interface - using LabelHTMLAttributes directly

src/components/ui/Select.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { forwardRef, SelectHTMLAttributes, OptionHTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string
+  error?: string
+  options: { value: string; label: string }[]
+  placeholder?: string
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, label, error, options, placeholder, id, ...props }, ref) => {
+    const selectId = id || label?.toLowerCase().replace(/\s+/g, '-')
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={selectId}
+            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+          >
+            {label}
+          </label>
+        )}
+        <select
+          ref={ref}
+          id={selectId}
+          className={cn(
+            'flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent',
+            'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-100',
+            'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100',
+            error && 'border-red-500 focus:ring-red-500',
+            className
+          )}
+          aria-invalid={error ? 'true' : 'false'}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error && (
+          <p id={`${selectId}-error`} className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Select.displayName = 'Select'

src/components/ui/Slider.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { forwardRef, InputHTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string
+  min: number
+  max: number
+  step?: number
+  value: number
+  onValueChange: (value: number) => void
+  showValue?: boolean
+  valueFormat?: (value: number) => string
+}
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, label, min, max, step = 1, value, onValueChange, showValue = false, valueFormat, ...props }, ref) => {
+    const sliderId = label?.toLowerCase().replace(/\s+/g, '-')
+
+    return (
+      <div className={cn('w-full', className)}>
+        {label && (
+          <div className="flex items-center justify-between mb-1">
+            <label htmlFor={sliderId} className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {label}
+            </label>
+            {showValue && (
+              <span className="text-sm text-gray-500 dark:text-gray-400 font-mono">
+                {valueFormat ? valueFormat(value) : value}
+              </span>
+            )}
+          </div>
+        )}
+        <input
+          ref={ref}
+          id={sliderId}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(e) => onValueChange(Number(e.target.value))}
+          className={cn(
+            'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer',
+            'accent-blue-600 dark:bg-gray-700',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+
+Slider.displayName = 'Slider'

src/components/ui/Tooltip.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { forwardRef, HTMLAttributes } from 'react'
+import { cn } from '@/utils/helpers'
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  content: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  children: React.ReactElement
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  ({ className, content, position = 'top', children, ...props }, ref) => {
+    if (!React.isValidElement(children)) {
+      return <>{children}</>
+    }
+
+    const positions = {
+      top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+      bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+      left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+      right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+    }
+
+    return (
+      <div ref={ref} className={cn('relative inline-block', className)} {...props}>
+        {children}
+        <div
+          className={cn(
+            'absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg',
+            'opacity-0 invisible transition-all duration-200',
+            'group-hover:opacity-100 group-hover:visible',
+            'whitespace-nowrap',
+            positions[position]
+          )}
+          role="tooltip"
+        >
+          {content}
+          <div
+            className={cn(
+              'absolute w-0 h-0 border-4 border-transparent',
+              position === 'top' && 'bottom-[-8px] left-1/2 -translate-x-1/2 border-t-gray-900',
+              position === 'bottom' && 'top-[-8px] left-1/2 -translate-x-1/2 border-b-gray-900',
+              position === 'left' && 'right-[-8px] top-1/2 -translate-y-1/2 border-l-gray-900',
+              position === 'right' && 'left-[-8px] top-1/2 -translate-y-1/2 border-r-gray-900'
+            )}
+          />
+        </div>
+      </div>
+    )
+  }
+)
+
+Tooltip.displayName = 'Tooltip'
+
+// Need to import React
+import React from 'react'

src/components/ui/index.ts

@@ -0,0 +1,7 @@
+export { Button } from './Button'
+export { Input } from './Input'
+export { Select } from './Select'
+export { Slider } from './Slider'
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
+export { Badge } from './Badge'
+export { Tooltip } from './Tooltip'

src/hooks/useCanvas.ts

@@ -0,0 +1,143 @@
+import { useCallback, useRef, useEffect } from 'react'
+import { useAppStore } from '@/store'
+
+export function useCanvas() {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const contextRef = useRef<CanvasRenderingContext2D | null>(null)
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      contextRef.current = canvasRef.current.getContext('2d', { willReadFrequently: true })
+    }
+  }, [])
+
+  const drawImage = useCallback((imageData: ImageData) => {
+    const ctx = contextRef.current
+    const canvas = canvasRef.current
+    if (!ctx || !canvas) return
+
+    canvas.width = imageData.width
+    canvas.height = imageData.height
+    ctx.putImageData(imageData, 0, 0)
+  }, [])
+
+  const drawImageScaled = useCallback(
+    (imageData: ImageData, scale: number, offsetX: number, offsetY: number) => {
+      const ctx = contextRef.current
+      const canvas = canvasRef.current
+      if (!ctx || !canvas) return
+
+      const displayWidth = Math.round(imageData.width * scale)
+      const displayHeight = Math.round(imageData.height * scale)
+
+      canvas.width = displayWidth
+      canvas.height = displayHeight
+
+      ctx.imageSmoothingEnabled = false
+      ctx.drawImage(
+        createImageBitmapFromImageData(imageData),
+        0,
+        0,
+        imageData.width,
+        imageData.height,
+        offsetX,
+        offsetY,
+        displayWidth,
+        displayHeight
+      )
+    },
+    []
+  )
+
+  const clear = useCallback(() => {
+    const ctx = contextRef.current
+    const canvas = canvasRef.current
+    if (!ctx || !canvas) return
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+  }, [])
+
+  const getCanvas = useCallback(() => canvasRef.current, [])
+  const getContext = useCallback(() => contextRef.current, [])
+
+  return {
+    canvasRef,
+    drawImage,
+    drawImageScaled,
+    clear,
+    getCanvas,
+    getContext,
+  }
+}
+
+function createImageBitmapFromImageData(imageData: ImageData): ImageBitmap {
+  const canvas = document.createElement('canvas')
+  canvas.width = imageData.width
+  canvas.height = imageData.height
+  const ctx = canvas.getContext('2d')
+  if (!ctx) throw new Error('Failed to create canvas context')
+  ctx.putImageData(imageData, 0, 0)
+  // Note: createImageBitmap is async, this is a synchronous fallback
+  return canvas as unknown as ImageBitmap
+}
+
+export function useZoomPan() {
+  const { settings, setZoomLevel, setPanOffset } = useAppStore()
+  const zoomRef = useRef(settings.zoomLevel)
+  const panRef = useRef(settings.panOffset)
+
+  useEffect(() => {
+    zoomRef.current = settings.zoomLevel
+    panRef.current = settings.panOffset
+  }, [settings.zoomLevel, settings.panOffset])
+
+  const zoomIn = useCallback(() => {
+    const newZoom = Math.min(zoomRef.current * 1.2, 20)
+    setZoomLevel(newZoom)
+  }, [setZoomLevel])
+
+  const zoomOut = useCallback(() => {
+    const newZoom = Math.max(zoomRef.current / 1.2, 0.1)
+    setZoomLevel(newZoom)
+  }, [setZoomLevel])
+
+  const resetZoom = useCallback(() => {
+    setZoomLevel(1)
+    setPanOffset({ x: 0, y: 0 })
+  }, [setZoomLevel, setPanOffset])
+
+  const setZoom = useCallback(
+    (zoom: number) => {
+      setZoomLevel(Math.max(0.1, Math.min(20, zoom)))
+    },
+    [setZoomLevel]
+  )
+
+  const pan = useCallback(
+    (deltaX: number, deltaY: number) => {
+      const newPan = {
+        x: panRef.current.x + deltaX,
+        y: panRef.current.y + deltaY,
+      }
+      setPanOffset(newPan)
+    },
+    [setPanOffset]
+  )
+
+  const panTo = useCallback(
+    (x: number, y: number) => {
+      setPanOffset({ x, y })
+    },
+    [setPanOffset]
+  )
+
+  return {
+    zoom: settings.zoomLevel,
+    panOffset: settings.panOffset,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    setZoom,
+    pan,
+    panTo,
+  }
+}

src/hooks/useConvolution.ts

@@ -0,0 +1,171 @@
+import { useCallback, useRef, useEffect } from 'react'
+import { useAppStore } from '@/store'
+import { convolutionSteps, convolveImage } from '@/lib/convolution/engine'
+import type { PaddingMode, ConvolutionStep } from '@/types'
+
+export function useConvolution() {
+  const {
+    originalImageData,
+    selectedKernel,
+    customKernelMatrix,
+    customKernelNormalize,
+    settings,
+    convolution,
+    startConvolution,
+    pauseConvolution,
+    resumeConvolution,
+    stopConvolution,
+    updateConvolutionStep,
+    updateConvolutionProgress,
+    completeConvolution,
+    setConvolutionError,
+    resetConvolution,
+  } = useAppStore()
+
+  const animationRef = useRef<number | null>(null)
+  const generatorRef = useRef<Generator<ConvolutionStep> | null>(null)
+  const isPausedRef = useRef(false)
+  const stepModeRef = useRef(false)
+
+  const kernel = selectedKernel?.matrix ?? customKernelMatrix
+  const normalize = selectedKernel?.normalize ?? customKernelNormalize
+  const padding = settings.padding
+
+  const runConvolution = useCallback(async () => {
+    if (!originalImageData || !kernel) return
+
+    try {
+      startConvolution()
+
+      const extendedImage = {
+        data: originalImageData.data,
+        width: originalImageData.width,
+        height: originalImageData.height,
+        channels: 4,
+      }
+
+      const gen = convolutionSteps(extendedImage, kernel, padding, normalize, (progress) => {
+        const totalPixels = originalImageData.width * originalImageData.height * 4
+        const processedPixels = Math.round(progress * totalPixels)
+        const elapsedTime = Date.now() - convolution.startTime
+        updateConvolutionProgress(progress, processedPixels, elapsedTime)
+      })
+
+      generatorRef.current = gen
+
+      const processBatch = () => {
+        if (isPausedRef.current || stepModeRef.current) {
+          animationRef.current = requestAnimationFrame(processBatch)
+          return
+        }
+
+        const batchSize = Math.max(1, Math.floor(1000 * settings.animationSpeed))
+        let lastStep: ConvolutionStep | null = null
+
+        for (let i = 0; i < batchSize; i++) {
+          const result = gen.next()
+          if (result.done) {
+            if (lastStep && lastStep.x === -1) {
+              // Final step with output image
+              const outputImageData = new ImageData(
+                new Uint8ClampedArray(originalImageData.data.length),
+                originalImageData.width,
+                originalImageData.height
+              )
+              // We need to reconstruct from the generator's final output
+              // For now, use the direct convolution
+              const output = convolveImage(originalImageData, kernel, padding, normalize)
+              completeConvolution(output)
+            }
+            return
+          }
+          lastStep = result.value
+          updateConvolutionStep(result.value)
+        }
+
+        animationRef.current = requestAnimationFrame(processBatch)
+      }
+
+      animationRef.current = requestAnimationFrame(processBatch)
+    } catch (error) {
+      setConvolutionError(error instanceof Error ? error.message : 'Convolution failed')
+    }
+  }, [
+    originalImageData,
+    kernel,
+    normalize,
+    padding,
+    settings.animationSpeed,
+    convolution.startTime,
+    startConvolution,
+    updateConvolutionStep,
+    updateConvolutionProgress,
+    completeConvolution,
+    setConvolutionError,
+  ])
+
+  const pause = useCallback(() => {
+    isPausedRef.current = true
+    pauseConvolution()
+  }, [pauseConvolution])
+
+  const resume = useCallback(() => {
+    isPausedRef.current = false
+    resumeConvolution()
+  }, [resumeConvolution])
+
+  const stop = useCallback(() => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current)
+      animationRef.current = null
+    }
+    isPausedRef.current = false
+    stepModeRef.current = false
+    generatorRef.current = null
+    stopConvolution()
+  }, [stopConvolution])
+
+  const step = useCallback(() => {
+    if (!generatorRef.current) return
+    stepModeRef.current = true
+    const result = generatorRef.current.next()
+    if (!result.done) {
+      updateConvolutionStep(result.value)
+    } else if (result.value && result.value.x === -1) {
+      const output = convolveImage(originalImageData!, kernel, padding, normalize)
+      completeConvolution(output)
+    }
+  }, [originalImageData, kernel, padding, normalize, updateConvolutionStep, completeConvolution])
+
+  const reset = useCallback(() => {
+    stop()
+    resetConvolution()
+  }, [stop, resetConvolution])
+
+  const toggleStepMode = useCallback((enabled: boolean) => {
+    stepModeRef.current = enabled
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    convolution,
+    runConvolution,
+    pause,
+    resume,
+    stop,
+    step,
+    reset,
+    toggleStepMode,
+    isRunning: convolution.status === 'running',
+    isPaused: convolution.status === 'paused',
+    isCompleted: convolution.status === 'completed',
+    canRun: !!originalImageData && !!kernel && convolution.status !== 'running',
+  }
+}

src/hooks/useImageLoader.ts

@@ -0,0 +1,135 @@
+import { useCallback, useRef, useEffect, useState, useReducer } from 'react'
+
+export function useImageLoader() {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const loadImage = useCallback(
+    (file: File): Promise<{ image: HTMLImageElement; imageData: ImageData }> => {
+      return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(file)
+        const img = new Image()
+        img.onload = () => {
+          const canvas = document.createElement('canvas')
+          canvas.width = img.width
+          canvas.height = img.height
+          const ctx = canvas.getContext('2d')
+          if (!ctx) {
+            URL.revokeObjectURL(url)
+            reject(new Error('Failed to get canvas context'))
+            return
+          }
+          ctx.drawImage(img, 0, 0)
+          const imageData = ctx.getImageData(0, 0, img.width, img.height)
+          URL.revokeObjectURL(url)
+          resolve({ image: img, imageData })
+        }
+        img.onerror = () => {
+          URL.revokeObjectURL(url)
+          reject(new Error('Failed to load image'))
+        }
+        img.src = url
+      })
+    },
+    []
+  )
+
+  const openFileDialog = useCallback(() => {
+    fileInputRef.current?.click()
+  }, [])
+
+  const handleFileSelect = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>, onLoad: (data: { image: HTMLImageElement; imageData: ImageData }) => void) => {
+      const file = event.target.files?.[0]
+      if (!file) return
+
+      if (!file.type.startsWith('image/')) {
+        alert('Please select an image file')
+        return
+      }
+
+      loadImage(file).then(onLoad).catch((error) => {
+        alert(`Failed to load image: ${error.message}`)
+      })
+    },
+    [loadImage]
+  )
+
+  return {
+    fileInputRef,
+    loadImage,
+    openFileDialog,
+    handleFileSelect,
+  }
+}
+
+export function useDragAndDrop(onLoad: (image: HTMLImageElement, imageData: ImageData) => void) {
+  const [isDragging, setIsDragging] = useState(false)
+
+  const loadImageFromFile = useCallback(
+    (file: File): Promise<{ image: HTMLImageElement; imageData: ImageData }> => {
+      return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(file)
+        const img = new Image()
+        img.onload = () => {
+          const canvas = document.createElement('canvas')
+          canvas.width = img.width
+          canvas.height = img.height
+          const ctx = canvas.getContext('2d')
+          if (!ctx) {
+            URL.revokeObjectURL(url)
+            reject(new Error('Failed to get canvas context'))
+            return
+          }
+          ctx.drawImage(img, 0, 0)
+          const imageData = ctx.getImageData(0, 0, img.width, img.height)
+          URL.revokeObjectURL(url)
+          resolve({ image: img, imageData })
+        }
+        img.onerror = () => {
+          URL.revokeObjectURL(url)
+          reject(new Error('Failed to load image'))
+        }
+        img.src = url
+      })
+    },
+    []
+  )
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragging(false)
+
+      const file = e.dataTransfer.files[0]
+      if (!file || !file.type.startsWith('image/')) return
+
+      try {
+        const { image, imageData } = await loadImageFromFile(file)
+        onLoad(image, imageData)
+      } catch (error) {
+        alert(`Failed to load image: ${error instanceof Error ? error.message : 'Unknown error'}`)
+      }
+    },
+    [onLoad, loadImageFromFile]
+  )
+
+  return {
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    isDragging,
+  }
+}

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/lib/convolution/engine.ts

@@ -0,0 +1,186 @@
+import { PaddingMode, ConvolutionStep, ImageDataExtended } from '@/types'
+
+export function getPixel(
+  image: ImageDataExtended,
+  x: number,
+  y: number,
+  channel: number,
+  padding: PaddingMode
+): number {
+  const { width, height, channels, data } = image
+
+  let px = x
+  let py = y
+
+  switch (padding) {
+    case 'zero':
+      if (px < 0 || px >= width || py < 0 || py >= height) return 0
+      break
+    case 'replicate':
+      px = Math.max(0, Math.min(px, width - 1))
+      py = Math.max(0, Math.min(py, height - 1))
+      break
+    case 'reflect':
+      if (px < 0) px = -px
+      if (px >= width) px = 2 * width - px - 2
+      if (py < 0) py = -py
+      if (py >= height) py = 2 * height - py - 2
+      px = Math.max(0, Math.min(px, width - 1))
+      py = Math.max(0, Math.min(py, height - 1))
+      break
+    case 'wrap':
+      px = ((px % width) + width) % width
+      py = ((py % height) + height) % height
+      break
+  }
+
+  const index = (py * width + px) * channels + channel
+  return data[index] / 255
+}
+
+export function setPixel(
+  image: ImageDataExtended,
+  x: number,
+  y: number,
+  channel: number,
+  value: number
+): void {
+  const { width, channels, data } = image
+  if (x < 0 || x >= width || y < 0 || y >= image.height) return
+  const index = (y * width + x) * channels + channel
+  data[index] = Math.max(0, Math.min(255, Math.round(value * 255)))
+}
+
+export function* convolutionSteps(
+  image: ImageDataExtended,
+  kernel: number[][],
+  padding: PaddingMode,
+  normalize: boolean,
+  onProgress?: (progress: number) => void
+): Generator<ConvolutionStep> {
+  const { width, height, channels } = image
+  const kernelSize = kernel.length
+  const halfKernel = Math.floor(kernelSize / 2)
+
+  const totalPixels = width * height * channels
+  let processedPixels = 0
+
+  const kernelSum = kernel.flat().reduce((a, b) => a + b, 0)
+  const normalizeFactor = normalize && kernelSum !== 0 ? 1 / kernelSum : 1
+
+  const outputData = new Float32Array(width * height * channels)
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      for (let c = 0; c < channels; c++) {
+        const inputPatch: number[][] = []
+        const multiplications: number[][] = []
+        let sum = 0
+
+        for (let ky = 0; ky < kernelSize; ky++) {
+          const patchRow: number[] = []
+          const multRow: number[] = []
+          for (let kx = 0; kx < kernelSize; kx++) {
+            const px = x + kx - halfKernel
+            const py = y + ky - halfKernel
+            const pixelValue = getPixel(image, px, py, c, padding)
+            const kernelValue = kernel[ky][kx]
+            patchRow.push(pixelValue)
+            const mult = pixelValue * kernelValue
+            multRow.push(mult)
+            sum += mult
+          }
+          inputPatch.push(patchRow)
+          multiplications.push(multRow)
+        }
+
+        const outputValue = sum
+        const normalizedValue = sum * normalizeFactor
+
+        const outputIndex = (y * width + x) * channels + c
+        outputData[outputIndex] = normalizedValue
+
+        processedPixels++
+        const progress = processedPixels / totalPixels
+
+        yield {
+          x,
+          y,
+          channel: c,
+          inputPatch,
+          kernel,
+          multiplications,
+          sum: outputValue,
+          outputValue: normalizedValue,
+          normalizedValue,
+          progress,
+        }
+
+        if (onProgress) onProgress(progress)
+      }
+    }
+  }
+
+  // Convert output to ImageData
+  const outputImageData = new ImageData(width, height)
+  for (let i = 0; i < outputData.length; i++) {
+    outputImageData.data[i] = Math.max(0, Math.min(255, Math.round(outputData[i] * 255)))
+  }
+
+  // Final yield with complete output
+  yield {
+    x: -1,
+    y: -1,
+    channel: -1,
+    inputPatch: [],
+    kernel,
+    multiplications: [],
+    sum: 0,
+    outputValue: 0,
+    normalizedValue: 0,
+    progress: 1,
+  }
+}
+
+export function convolveImage(
+  imageData: ImageData,
+  kernel: number[][],
+  padding: PaddingMode = 'zero',
+  normalize: boolean = true
+): ImageData {
+  const extended: ImageDataExtended = {
+    data: imageData.data,
+    width: imageData.width,
+    height: imageData.height,
+    channels: 4,
+  }
+
+  const { width, height } = imageData
+  const kernelSize = kernel.length
+  const halfKernel = Math.floor(kernelSize / 2)
+  const kernelSum = kernel.flat().reduce((a, b) => a + b, 0)
+  const normalizeFactor = normalize && kernelSum !== 0 ? 1 / kernelSum : 1
+
+  const outputData = new Uint8ClampedArray(imageData.data.length)
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      for (let c = 0; c < 3; c++) {
+        let sum = 0
+        for (let ky = 0; ky < kernelSize; ky++) {
+          for (let kx = 0; kx < kernelSize; kx++) {
+            const px = x + kx - halfKernel
+            const py = y + ky - halfKernel
+            const pixelValue = getPixel(extended, px, py, c, padding)
+            sum += pixelValue * kernel[ky][kx]
+          }
+        }
+        const outputIndex = (y * width + x) * 4 + c
+        outputData[outputIndex] = Math.max(0, Math.min(255, Math.round(sum * normalizeFactor * 255)))
+      }
+      outputData[(y * width + x) * 4 + 3] = 255
+    }
+  }
+
+  return new ImageData(outputData, imageData.width, imageData.height)
+}