This project is visualising how sorting algorithms work. A sorting algorithm is an algorithm that puts elements of a list into order. There are many different sorting algorithms and this project is meant to visualise how some of those work. It helps to understand each step. Users can pause the visualization at any moment and go both forward and backward step by step.

• Bubble sort
• Selection sort
• Insertion sort
• Merge sort
• Quick sort

While other sorting visualisers can be found online, I couldn’t find any that allowed users to pause and manually navigate each step. As a result, I implemented it and believe it will help to understand how each sorting method is performed.

Furthermore, the animation can be sped up or slowed down during playback.

To make the animations visually attractive I used Framer Motion as the animation library. It simulates spring physics for realistic motion. To keep the algorithmic layer separate from visualisation it works in a way that the given set is first sorted by the algorithm and each step is saved in an array that later on is iterated with Framer Motion to draw the animation.

The user interface is built with Chakra UI library.

At first, a user sees a modal with detailed instructions.