Creepy Face

A while ago I came across a weird little tool posted on Slacker News that got the hug of death, so I bookmarked it to look at on a rainy day. Well, currently Storm Ciara is battering the UK, so what better time to check it out.

The purpose of the tool is to create a “Creepy Face”, a series of images of your own face that appear to follow the mouse around the screen. All you have to do is give them access to your webcam, follow some simple directions and approve the use of your data in the impending singularity and you get a nice little page with your creepy face on it.

After giving it a go I thought the results were quite amusing, so I decided to see if I could import the tool and create a little React component for my experiments page. Turns out there’s an NPM package and a some documentation on Github, so it didn’t take too long to get this running.

Here’s what it looks like when I’m looking at the mouse in the top right hand side of my screen…

…head over to the experiments page if you want to try it out, or go to creepyface.io to get one of your own.

Addendum

Well, this quick little job turned into a debugging fun-fest, as I experienced for the first time one of the problems you can encounter using third party NPM modules in React/Gatsby.

When I ran my gatsby build command to get the site ready for deployment, it kept coming up with this error:

WebpackError: ReferenceError: document is not defined

It turns out some modules fall over in the build process when certain variables are not present. There were a few different solutions available, but per the Gatsby documentation I opted to use the react-loadable plugin, it was an absolute doddle to use and it has cut down my cursing by at least 75% in the last hour.

I’m sure I’ll come across this issue again, so it’s good to know there’s a component at hand in my package that can be imported to save the day. Now I just need to work on adding a nicer “loading” component!