Website :- https://tracealgo.netlify.app/

It's a high-performance, visually stunning web application designed to help students and developers visualize the inner workings of common sorting algorithms. Built with a modern Glassmorphism aesthetic, it provides real-time feedback on comparisons, swaps, and sorted states.

• Bubble Sort: Simple comparison-based sorting.
• Insertion Sort: Build a sorted array one element at a time.
• Selection Sort: Find the minimum and move it to the start.
• Quick Sort: Efficient divide-and-conquer with pivoting.
• Heap Sort: Binary tree-based sorting structure.
• Merge Sort: Stable divide-and-conquer via recursive merging.
• Shell Sort: Optimized version of insertion sort.

• Modern UI: Dark-themed glassmorphism design with neon cyan accents.
• Dynamic Sizing: Automatically calculates the number of bars based on your screen size to prevent overflow.
• Real-Time Visualization: Uses async/await to provide smooth, adjustable animations.
• Responsive Design: Adapts to any screen size, from mobile phones to ultra-wide monitors.
• State Coloring:
  • Teal (#39A6A3): Elements currently being compared.
  • Yellow (#FFE268): Elements in their correct relative positions.
  • Gold (#FFC93C): Final verified sorted state.

• HTML5: Semantic structure.
• CSS3: Custom properties (variables), Flexbox, and Glassmorphism (backdrop-blur).
• Vanilla JavaScript: Pure logic with no heavy frameworks.
• Bootstrap 5: Used for the off-canvas navigation and layout grid.

├── index.html          # Landing Page
├── shared.style.css    # Modern UI styles used across all pages
├── shared.js           # Core logic (generate array, disable buttons)
├── sorting algorithms/
│   ├── all algos       # separate folder for all algos
└── assets/             # Icons and images