Meet Creepyface, my little side project

Hi all,

I want to introduce Creepyface, my side project. Creepyface is a small JavaScript library I made to make my face follow the mouse pointer on my online resumé. I decided to share it with everyone and here it is:

4lejandrito / creepyface

The JavaScript library that makes your face look at the pointer. 🤪🖱️👆

Creepyface ·

Creepyface is a little JavaScript library that makes your face look at the pointer (or dance 💃).

See it in action at creepyface.io and create your own one using the wizard.

If you use React, check out <Creepyface />. If you like fireflies, check out creepyface-firefly.

Creepyface in the wild:

• https://www.patrickcampbell.dev
• https://atroshenkonikita.com
• https://noemivillegascalonge.com
• https://github.com/reflog/mattermost-plugin-creepy

Usage

<script src="https://creepyface.io/creepyface.js"></script>

<img
  data-creepyface
  src="https://creepyface.io/img/nala/serious"
  data-src-hover="https://creepyface.io/img/nala/hover"
  data-src-look-0="https://creepyface.io/img/nala/0"
  data-src-look-45="https://creepyface.io/img/nala/45"
  data-src-look-90="https://creepyface.io/img/nala/90"
  data-src-look-135="https://creepyface.io/img/nala/135"
  data-src-look-180="https://creepyface.io/img/nala/180"
  data-src-look-225="https://creepyface.io/img/nala/225"
  data-src-look-270="https://creepyface.io/img/nala/270"
  data-src-look-315="https://creepyface.io/img/nala/315"
/>

Run this example on codepen.

Creepyface will automatically detect your image (thanks to the data-creepyface attribute) and make it look at the mouse or fingers depending on which device you are using.

You can…

View on GitHub

I tried to design Creepyface to be as easy to use as possible. This is all you need to make your face become alive:

<script src="https://creepyface.io/creepyface.js"></script>

<img 
  data-creepyface
  src="https://creepyface.io/img/0"
  data-src-hover="https://creepyface.io/img/0/hover"
  data-src-look-0="https://creepyface.io/img/0/0"
  data-src-look-45="https://creepyface.io/img/0/45"
  data-src-look-90="https://creepyface.io/img/0/90"
  data-src-look-135="https://creepyface.io/img/0/135"
  data-src-look-180="https://creepyface.io/img/0/180"
  data-src-look-225="https://creepyface.io/img/0/225"
  data-src-look-270="https://creepyface.io/img/0/270"
  data-src-look-315="https://creepyface.io/img/0/315" 
/>

You can use Creepyface's wizard to take your own pictures looking at each direction.

For more information visit Creepyface's GitHub.

Please let me know if you find Creepyface useful. Any feedback is welcome.

Thanks!