A Menu Overlay Simulating a Camera Changing Focus

Taking inspiration from video game interface embellishments.

About a year ago, I bought a PlayStation 4. I hadn't really played video games since high school, and was curious to see what modern console games were like. It has been a fascinating experience to look at games after going through design school and spending some years working as a designer without having done so. The aesthetic of video game interfaces often calls for heavy use of decoration, ornament, and just-make-it-look-coolness that we generally don't get to use when designing pracitcal websites and apps.

While shooting games aren't usually my thing, I had to try a game called Overwatch. I was a big fan of Blizzard's games when I was younger and it looked beautifully made.

animated gif showing menu effect

I found this menu transition particularly lovely. When the menu is toggled, the content in the foreground changes, and rather than a hard change on the background, the camera moves and refocuses to create a soft blur.

While there's a lot going on, I wanted to see how a similar effect might feel in a more gentle environment. To fake this effect, I have a full-screen background image, and on toggle of the menu, the container is scaled up, moved to the side, and the image cross-fades with a blurred duplicate. This could be done with a blur filter instead to only load a single image, but this way will have better browser support.

Check it out on CodePen