Interactive platform for visualizing and understanding sorting algorithms through real-time animations and dynamic comparisons.
VisualSort helps users explore how different sorting algorithms work step-by-step using smooth visual transitions, interactive controls, and customizable arrays. The project is designed to simplify DSA learning by making algorithm behavior easier to observe and understand.
- Step-by-step sorting visualization
- Interactive array input (custom or random)
- Adjustable sorting speed & array size
- Dynamic comparison highlighting with glow effects
- Smooth real-time animations powered by Framer Motion
- Algorithm complexity information (time, space, stability)
- Pause, resume, and reset controls
- Dark / Light mode toggle
- Fully responsive design
| Algorithm | Best | Average | Worst | Space | Stable |
|---|---|---|---|---|---|
| Bubble Sort | O(n) | O(n²) | O(n²) | O(1) | ✅ |
| Selection Sort | O(n²) | O(n²) | O(n²) | O(1) | ❌ |
| Insertion Sort | O(n) | O(n²) | O(n²) | O(1) | ✅ |
| Merge Sort | O(n log n) | O(n log n) | O(n log n) | O(n) | ✅ |
| Quick Sort | O(n log n) | O(n log n) | O(n²) | O(log n) | ❌ |
| Heap Sort | O(n log n) | O(n log n) | O(n log n) | O(1) | ❌ |
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5.7 |
| UI Library | React 19 |
| Styling | Tailwind CSS v4 |
| Animations | Framer Motion 12 |
| UI Components | shadcn/ui (Radix UI primitives) |
| Icons | Lucide React |
| Theming | next-themes |
| Build Tool | Turbopack |
├── app/
│ ├── globals.css # Theme, colors, glassmorphism
│ ├── layout.tsx # Root layout with theme provider
│ └── page.tsx # Entry point
├── components/
│ ├── sorting-visualizer/
│ │ ├── index.tsx # Main visualizer logic
│ │ ├── bar.tsx # Animated bar component
│ │ ├── bars-container.tsx
│ │ ├── controls.tsx # Play, pause, reset buttons
│ │ ├── algorithm-selector.tsx
│ │ ├── speed-slider.tsx
│ │ ├── array-size-slider.tsx
│ │ ├── array-input.tsx
│ │ ├── complexity-info.tsx
│ │ └── navbar.tsx
│ ├── theme-provider.tsx
│ ├── theme-toggle.tsx
│ └── ui/ # shadcn/ui components
│ ├── button.tsx
│ ├── input.tsx
│ ├── select.tsx
│ └── slider.tsx
├── lib/
│ ├── sorting-algorithms.ts # All sorting algorithm generators
│ └── utils.ts # cn() utility
└── public/ # Icons and favicons
Clone the repository:
git clone https://github.com/Abhishek-2973/VisualSort.git
cd VisualSortInstall dependencies:
npm installRun the development server:
npm run devOpen http://localhost:3000 in your browser.
npm run build
npm startThis project is open source and available under the MIT License.