I’ve been interested in creating a simple in-browser “screensaver” app for a long time. This early beta, currently supported only in Chrome, creates a “Ken Burns effect” for selected images from your local network with an optional custom soundtrack: use the controls above to start the demo. If you don’t have Chrome, a video is included below.

The app uses a few features that I’ve talked about previously, including the color input and Fullscreen API. It also has a few I’ve yet to talk about in depth, such as the Web Animation API and the file input. I’ll leave technical details for discussion in future articles, including the interesting fact that, despite appearances and common assertion, we can access local files via the file input.

There are many improvements I’ve yet to make to the code:

• Despite the enhanced performance of the Web Animation API, there are still sometimes a few janky moments during the translation of the images across the screen. My first priority is tracking down the source of those issues
• Obviously cross-browser support is important: unfortunately the polyfill for Web Animation seems to have some issues at the moment. This is not quite the issue it might be, as I assume that presenters have a choice in which browser they’d like to use for a screensaver presentation.
• The random motion of the images needs to be refined: sometimes it is too random, sometimes not enough.
• A sort and edit option as well and drag and drop for media would be useful, as would the ability to add video.

Right now you can contribute to or fork the GitHub or CodePen repos; I look forward to reading your feedback!

Music in the video is “Ashokan Farewell” covered by Alex Bonesteel; images are by Jeff Pang, Lip Jin Lee, Stewart Baird and Kamil Porembiński. All works are licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/MYKRLg