Code, UX, IxD, AI – Turi Scandurra

VoxEase – Communication Aid Web App

Launch the web app: turisc.github.io/voxease

A couple of months ago a family friend had a very serious health issue that left him temporarily unable to speak or move much.

So I put together a web app connected to a game controller, in a way that he could just select phrases from a list to communicate. Luckily this person got better quickly, and this app was no longer needed, but I decided to improve this experiment and publish it as an Open Source project.

So, this is VoxEase. It can be operated with a mouse, a touch screen, a computer keyboard, a game controller using a single hand, or you can set it to scan the list of phrases automatically so you only need to press one button to pick your phrase.

VoxEase only requires a modern browser and once downloaded it works offline. It is free and open source, has no dependencies, and sends absolutely no data to external servers or trackers.

It supports multiple languages and it can also be used by people with sight impairments (it works well with screen readers).

Source code: github.com/TuriSc/voxease

Chromelette – Turn a webcam feed into a mood-setting backdrop

Chromelette turns your webcam into a real-time color sampler, painting your entire screen with the dominant hue from whatever you point your camera at. Perfect for ambient lighting, creative photography, and immersive color experiences.

Try it here!

Features

Smart Radius Control: Adjustable sampling radius
Color Palette: Save your favorite colors to persistent swatches
Clean UI: Tap anywhere to hide/show controls
Responsive Design: Works seamlessly across devices and screen sizes
Instant Feedback: Real-time RGB and HEX color values display
Pure HTML/CSS/JavaScript: No dependencies, runs anywhere

Source code

https://github.com/TuriSc/chromelette

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.

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.

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.

Interactive Framework

I worked on the CIPD Profession Map, a framework used by HR and people professionals to guide them in their work, career planning and development.
My role focused on interaction design and actual development of the interactive version of the map diagram. I also created a large set of illustrations centered around diversity and inclusion.

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.

Etna – amsynth skin

Etna is a GUI skin I designed for amsynth, or Analog Modelling Synthesizer, a virtual instrument by Nick Dowell for Linux and MacOS.

Here’s a demo video of the two in action.

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

This archived content does not reflect my current skills

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

This archived content does not reflect my current skills

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

Assets and UI elements for Barclays Code Playground

This archived content does not reflect my current skills

I created some assets and UI elements for Barclays Code Playground. I also animated the little eye-guy at the bottom.
Agency: Addictive Pixel/BBH, London.