A vibrant and interactive sorting algorithm visualizer built with React and Vite, featuring sound effects, particle animations, real-time statistics, and sleek visuals. Ideal for learning, teaching, or showcasing sorting algorithms.
Live demo available at:
https://sortify-sorting-visualizer.vercel.app
- Visualize and Compare: Explore a wide range of sorting algorithms with animated, intuitive presentations.
- Sound Effects: Hear critical steps—comparisons, swaps, and completion chords—that make the visualizer feel alive.
- Animated Backgrounds: Dynamic particles and geometric patterns add visual depth and flair.
- Interactive Controls:
- Choose algorithm from categorized groups (e.g. Basic, Advanced, Hybrid, Non‑Comparison).
- Adjust array size and speed on the fly.
- Start, pause, resume, or reset the sorting process in real time.
- Live Metrics:
- Track comparisons, swaps, and elapsed time.
- View time and space complexity for each algorithm.
- Stylish UI: A sleek dark-mode aesthetic with glowing bars, animated icons, and responsive layout.
- Framework: React + Vite (Fast HMR, optimized build)
- Icons: lucide-react
- Sounds: Web Audio API-powered beeps and chords from
utils/sound.js - Animation: React hooks, CSS transitions, keyframes, and requestAnimationFrame
- Sorting Logic: Implementations include Bubble, Selection, Insertion, Quick, Merge, Heap, Shell, Cocktail, Gnome, Counting, Odd‑Even, Comb, Cycle, Radix, Bucket, Pigeonhole, and more.
- Styling: Tailwind CSS + custom gradients and effects
Clone the repo
git clone https://github.com/bhaveshsharmaaa/Sortify-sorting-visualizer
cd Sortify-sorting-visualizer
npm install
npm run dev