Autoplaying video previews for the web

If a picture is worth a thousand words, and a video is made of several pictures in a sequence, then a video is worth several thousand words.
A great way to show a preview of online content is by using video thumbnails – an ambiguous term that can both refer to a static image, usually depicting one frame of the video (also known as poster image), or, more interestingly, a video preview that’s a smaller and shorter version of the referenced content.

If you arrived to this page through the homepage of my website, you might have noticed that every post on it features an animated thumbnail. It was a natural choice since most of my work on display is some form of animated media, or at least accompanied by video assets.
For a long time my thumbnails have been simple animated GIFs – one of those ancient formats that managed to maintain popularity for longer than expected – but there now is a good selection of modern, more efficient formats to display motion content on the web.

Continue reading Autoplaying video previews for the web

Lost in the Woulds

I don’t play video games anymore, but I’ve always been fascinated by their hybrid nature, crossing artistic expression and a constant push for technical evolution.
When I was a kid and the Commodore 64 was popular, game making had just become accessible to everyone.
Now that the video game industry is larger than all the other entertainment industries combined, games contain universes, and spending time making a small game might feel pointless. However, these days ‘indie’ game development is thriving, its community is very active, and the resources required do make a game by yourself are freely available online.
I can make things move on a screen, tell the computer what to do, make it beep.
And I had a story to tell. A journey that’s emotional, profound, dramatic, and darkly mysterious.

Continue reading Lost in the Woulds

Picbag

I worked on the UX/UI and brand identity for Picbag, a visual organization app at prototype stage.

Picbag lets users collect inspiration, intelligently tag and sort photos and image snippets, and create moodboards they can share.

Continue reading Picbag

Procedural Circular Animations

I always found generative art mesmerizing, so I experimented with a few JavaScript rendering libraries to create something of my own.

Click on the images to launch the real-time animations

The first one is created with the impressive rendering library PIXI.js. The other three are drawn with Two.js, which defaults to a SVG output.

Earboard – Web App

Earboard is an ear trainer for musicians whose purpose is to generate note intervals to play along with. Its layout is modeled on the fretboards and standard tuning of stringed instruments like guitar and bass.

See it in action here: Earboard

It’s a responsive JavaScript web app. Source code

HTML5 interactive banners

I worked a few months for Tag Worldwide producing interactive and animated HTML5 banners for Nike, Sony, Jameson Irish Whiskey, HTC, Argos, Boots, Amazon.
Flash was cool, but the 2000s are over.

AXE/Lynx ads

I designed and animated a series of rich media creatives for AXE/Lynx, for digital agency AddictivePixel at BBH, London.