With technologies like Git, we can easily access the history of a repository, and see how the code is build up over time. I've been wondering if we can do the same with designs, visualizing the evolution of an application from a visual perspective.

With that in mind I wrote a script that checked out every commit of a JavaScript app I wrote called Stylo, and took a screenshot using WebKit2png. Then I spliced all those images together and the result is the video below.

My design process is pretty iterative, and I'm constantly tweaking colors and positions to see what looks good. As well as being an interesting perspective into an applications evolution, I think this is also useful from a QA and regression testing perspective.

for commit in $(git rev-list master)
do
  $(git checkout $commit)
  $(webkit2png public/index.html)
done

Unfortunately this particularly method of generation visualizations is probably not going to be ideal for most applications. Stylo is a static JS app, and therefore I don't have to worry about database migrations or other state that's not synconrized with Git commits. The ideal solution is probably taking a screenshot with a pre-commit hook.