Display full width + Resizing consistency

Sep 28, 2022

I wanted the experience to be closer to an original browsing experience on a webpage.

Problem

With the previous prototype, the image was contained in the window. Therefore, using screenshots of long images like landing pages, the result was mediocre. It resulted in small content for long images likes landing pages (see below).

Solution

Now, images render as wide as possible, which gives a feeling of being browsing content naturally. You can now (finally) read the content if the image has a landing page-like ratio.

Moreover, zooming, or resizing the window, does not impact the message position. Once you place a message on the image, it keeps its focus on the point of the memo where you put it.

The main reason for this is that I relied on a 3p library to render the hotspot. I needed to rebuild this rendering from scratch. 👋 Ciao react-image-hotspots. It was great for delivering the last version on short notice, but this new code base is a better fit for vero.

Extra-bonus

→ One last thing: it now renders properly on all the major browsers! Yewwwwww!