• Stars
    star
    487
  • Rank 90,352 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The JavaScript library that makes your face look at the pointer. πŸ€ͺπŸ–±οΈπŸ‘†

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

The Creepyface logo with a background full of faces looking at the pointer

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/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 add as many Creepyfaces as you want as long as they all have the data-creepyface attribute.

If you want to stop Creepyface on a given image:

creepyface.cancel(document.querySelector('img'))

Full list of data attributes

Name Description
data-creepyface Add this to automatically attach creepyface to your image when the page loads.
data-src-hover The URL of the image to use when the pointer is over your image.
data-src-look-<angle> The URL of the image to use when the pointer forms the specified angle (in degrees) with the center of your image. Add as many as you want.
data-timetodefault The amount of time (in milliseconds) after which the default src is restored if no pointer events are received. 1 second by default. 0 means it will never be restored (the image will always look at the pointer).
data-fieldofvision The angle (in degrees) inside which the pointer will be detected by a given direction. 150 by default.
data-points Optionally, a comma-separated list of point provider names to make your face look at things other than the pointer. See Super advanced usage for more information.

Advanced usage

For more advanced use cases Creepyface can also be set up via a programmatic API:

<img src="https://creepyface.io/img/nala/serious" />
import creepyface from 'creepyface'

const img = document.querySelector('img')

const cancel = creepyface(img, {
  // Image URL to display on hover
  hover: 'https://creepyface.io/img/nala/hover',
  // Each of the images looking at a given direction
  looks: [
    { angle: 0, src: 'https://creepyface.io/img/nala/0' },
    { angle: 45, src: 'https://creepyface.io/img/nala/45' },
    { angle: 90, src: 'https://creepyface.io/img/nala/90' },
    { angle: 135, src: 'https://creepyface.io/img/nala/135' },
    { angle: 180, src: 'https://creepyface.io/img/nala/180' },
    { angle: 225, src: 'https://creepyface.io/img/nala/225' },
    { angle: 270, src: 'https://creepyface.io/img/nala/270' },
    { angle: 315, src: 'https://creepyface.io/img/nala/315' }
  ],
  // Time (in ms) to restore the default image after the last input
  timeToDefault: 1000
  // The angle (in degrees) inside which the pointer will be detected
  fieldOfVision: 150
})

// at some point restore the original image and stop creepyface
cancel()

Run this example on codepen.

Super advanced usage

Creepyface will look at the pointer by default, however custom point providers can be defined.

For example, to make your face look at a random point every half a second you need to register a point provider:

import creepyface from 'creepyface'

creepyface.registerPointProvider('random', (consumer) => {
  const interval = setInterval(
    () =>
      consumer([
        Math.random() * window.innerWidth,
        Math.random() * window.innerHeight,
      ]),
    500
  )
  return () => {
    clearInterval(interval)
  }
})

and consume it using the data-points attribute:

<img
  data-creepyface
  data-points="random"
  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.

or pass it programmatically:

<img src="https://creepyface.io/img/nala/serious" />
const img = document.querySelector('img')

creepyface(img, {
  points: 'random',
  hover: 'https://creepyface.io/img/nala/hover',
  looks: [
    { angle: 0, src: 'https://creepyface.io/img/nala/0' },
    { angle: 45, src: 'https://creepyface.io/img/nala/45' },
    { angle: 90, src: 'https://creepyface.io/img/nala/90' },
    { angle: 135, src: 'https://creepyface.io/img/nala/135' },
    { angle: 180, src: 'https://creepyface.io/img/nala/180' },
    { angle: 225, src: 'https://creepyface.io/img/nala/225' },
    { angle: 270, src: 'https://creepyface.io/img/nala/270' },
    { angle: 315, src: 'https://creepyface.io/img/nala/315' },
  ],
})

Note: several point providers can work at the same time by using a comma-separated string like "random,pointer".

The following point providers are available out of the box:

  • pointer for both mouse and touch events. This is the default.
  • mouse just for mouse events.
  • finger just for touch events.

There are also external point providers:

  • πŸ’ƒ dance to dance to the rythm of the music.
  • 🀳 tilt to stare at you when you tilt your phone.
  • 🐝 firefly to follow a moving firefly on the screen.

Developing

  • yarn && yarn build will set up the packages (using workspaces and Lerna) and run a required initial build.
  • yarn dev will spin up local servers for each of the packages.
  • yarn test will run the tests.

Contributing

Please feel free to create issues and / or submit pull requests. For the latter, test cases are very welcome.

License

MIT, see LICENSE for details.

Big Thanks

Cross-browser Testing Platform and Open Source ❀️ provided by Sauce Labs.

More Repositories

1

react-guitar

A beautiful and accessible guitar component for React. βš›οΈ 🎸
TypeScript
627
star
2

next-plausible

Simple integration for https://nextjs.org and https://plausible.io analytics
TypeScript
582
star
3

fetchbook

Run and test your HTTP requests. Git friendly, 100% local.
TypeScript
150
star
4

rollup-plugin-browsersync

Serve your bundle via Browser Sync
JavaScript
19
star
5

liferay-pokemon-item-selector

Code for Liferay's /dev/24 talk
Java
12
star
6

storybook-tailwind2

Sample setup for Storybook and Tailwind@2
JavaScript
7
star
7

liferay-super-deploy

Deploy all changed modules at once (hopefully).
Shell
6
star
8

liferay-devcon-headless-2023

Liferay Devcon 2023 Headless Talk
FreeMarker
4
star
9

liferequest

From http://localhost:8080 to HTML
4
star
10

uptimerobot-node-client

NodeJS client for the uptimerobot API
JavaScript
3
star
11

emoji-chat

Emoji chat for WeDeploy Hackathon
JavaScript
3
star
12

cliferay

Daily scripts to work with Liferay
Shell
3
star
13

elm-music-player

Music player written in Elm at a Haskell Madrid Meetup
Elm
2
star
14

c2t-chrome

Car to Trello Chrome Extension
JavaScript
2
star
15

build-docker-image-action

Builds my docker images
1
star
16

cartel

JavaScript
1
star
17

npm-card

My NPM card πŸ’³
JavaScript
1
star
18

react-creepyface

React component for https://github.com/4lejandrito/creepyface.
1
star
19

me

My personal site
TypeScript
1
star
20

try_git

1
star
21

liferay-rest-client-for-templates

Example of a template migration from serviceLocator to restClient
FreeMarker
1
star
22

creepyface-firefly

A point provider for Creepyface
1
star
23

wercker-box-play

Wercker box for play 2.2.x apps
1
star
24

liferay-headless-playwright

Playwright first steps for the Headless team
TypeScript
1
star