Lenticular Photos

Growing up, I always loved those lenticular cards—ones that had two photos that transitioned as you rotated from side to side. Maybe it was a hockey player taking a shot or a superhero transforming from mild mannered day job to caped crusader.

Since Apple released Live Photos, I’ve always felt like they could be used to create a similar effect and yet, no photo app that I’ve seen has implemented it, from what I’ve come across.

Building an entire app just to get one feature that I want is a bit silly. Instead, I built a prototype to see whether the idea would work.

Mobile Safari doesn’t support live photos natively, so I exported them as three second videos. Then I used the DeviceOrientation API to detect rotation over one of the axes to scrub the video forwards and backwards.

It’s a very rudimentary prototype but I’m surprisingly pleased by how well the concept turned out. I’ve only tested it on iPhone and iPad. Theoretically, it’ll work on Android but I haven’t tested it.

Things I learned

The DeviceOrientation API requires authentication through an action. Perhaps annoyingly, Safari remembers this authentication in the web cache. Therefore, to clear the settings, I had to go into Safari settings and remove the cache for the web site. It was easier to test in a private browser window and close/reopen the window each time I tested the authentication workflow.

I ran into some performance issues where it was really jerky. My assumption is that the video would be playing but constantly scrubbing on rotation. In the first version of the prototype, I had a default video specified but added the autoplay attribute to force the video to load. I just gave up and users have to specify a video to load first. When a video is loaded, I pause it right away to avoid the performance issue.

Crossing over the middle of forward/backward axis causes the value of the left/right axis to flip. I could account for this but I’m honestly too lazy. It’s just a prototype, after all.

Make it exist

I wish I could have it take actual live photos to play with. Instead, I’ve put the prototype out into the world in hopes that maybe one day, some photo platform will build this feature for me to enjoy. It’s either that or I get a job somewhere, work on this one feature, and then quit afterwards.

In the meantime, enjoy some “lenticular photos”!

Published January 30, 2024
Categorized as JavaScript
Short URL: https://snook.ca/s/1195