Browser History

It was a pleasure to work with the Squarespace team on Browser History, Squarespace’s end of year review of some of their most notable sites in 2020 (the Best of the Worst Year).

The design vision was both very simple and very ambitious. Take a 2D painting in layers and move through it as if it was 3D. We realized early that to achieve the sensation of traveling forward through a painting, we'd need to know where each element in a portrait was, how "far" away it was from the camera, and then scale and move it as if a virtual camera was traveling through it. The first thing we did was build a custom react pixi-based engine to do just that: load the images and test how it felt when they scaled and moved. It was an eureka moment. The portrait really came to life.

But we realized that it was not sustainable. We had to make it work for multiple browsers and desktop/mobile with varying file formats. To generate the assets for a portrait, it would take at least a day to cut, crop, name the 6 files for each layer, and a manifest file. It was incredibly error prone, would take more time than we had, and would stifle the designers because they wouldn't be able to make many changes. So we automated the process. We wrote a python program to ingest the portraits, and generate the assets in parallel (for both desktop and mobile). Whenever there was a new portrait or a design change, the process would take minutes instead of days. This let us focus on fine tuning the user experience.

For example, the creative team proposed a great idea, to tie a camera drift to the mouse movement, enhancing the sense of depth and parallax. Since the engine simulated a camera moving forward, it would take very little effort to simulate it moving left and right. With the time we freed up from automating the asset generation, we could squeeze in these small changes that added a lot to the experience. We even added drift to device motion on mobile.