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
A Javascript library that makes your face follow 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://atroshenkonikita.com
- https://www.yitzi.dev
- https://1aville.ch/about.html
- https://github.com/reflog/mattermost-plugin-creepy
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)