Algos, Visualized

An interactive algorithm visualizer that brings computer science concepts to life through smooth animations and user interaction. Built with Framer Motion and CSS animations, it helps users understand Quick Sort, Dijkstra's, and Convex Hull through visual representation.

Technologies

React TypeScript Framer Motion CSS Animations

Links

Live Demo GitHub

Screenshots

Technical Overview

Key Features

  • Step-by-step algorithm walkthroughs with visualizations and animations
  • Responsive rendering with dynamic layout algorithms, including HTML Canvas rendering

Technical Challenges

  • Synchronizing animation timelines with algorithm execution steps
  • Gathering useful 'snapshots' of algorithm states to visualize

Implementation

  • Framer Motion orchestration for coordinated multi-element animations in Quick Sort Visualization
  • TypeScript generics for reusable algorithm visualization components
  • Canvas API integration for high-performance rendering of convex hull and Dijkstra's algorithms