DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Alejandro TardΓ­n
Alejandro TardΓ­n

Posted on

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:

GitHub logo 4lejandrito / creepyface

A Javascript library that makes your face follow the pointer. πŸ€ͺπŸ–±οΈπŸ‘†

Creepyface Β· GitHub license npm version Build Coverage Status Follow on Twitter

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.

Example animated gif of a face looking at the pointer

Creepyface in the wild:

Usage

<script src="https://creepyface.io/creepyface.js"></script>
<img
  data-creepyface
  src="https://creepyface.io/img/0/serious"
  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"
/>

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 add…

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!

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.