{"id":13469708,"url":"https://github.com/4lejandrito/creepyface","last_synced_at":"2025-05-15T05:07:11.487Z","repository":{"id":33923433,"uuid":"158741754","full_name":"4lejandrito/creepyface","owner":"4lejandrito","description":"The JavaScript library that makes your face look at the pointer. ðŸĪŠðŸ–ąïļðŸ‘†","archived":false,"fork":false,"pushed_at":"2025-01-24T17:07:15.000Z","size":46380,"stargazers_count":489,"open_issues_count":1,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-14T15:05:27.525Z","etag":null,"topics":["creepy","dance","face","follow","javascript","javascript-library","look","mouse","picture","pointer","tilt","touch","touch-events"],"latest_commit_sha":null,"homepage":"https://creepyface.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/4lejandrito.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"4lejandrito","custom":["https://buymeacoffee.com/b4iusc3"]}},"created_at":"2018-11-22T19:16:17.000Z","updated_at":"2025-05-12T15:13:58.000Z","dependencies_parsed_at":"2023-11-11T01:25:56.935Z","dependency_job_id":"33c533d6-b59c-4599-84fd-5e2e7acb9909","html_url":"https://github.com/4lejandrito/creepyface","commit_stats":{"total_commits":692,"total_committers":3,"mean_commits":"230.66666666666666","dds":"0.25722543352601157","last_synced_commit":"4413aeb4e891a8e936b0f6710630f4164b6ce911"},"previous_names":[],"tags_count":99,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4lejandrito%2Fcreepyface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4lejandrito%2Fcreepyface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4lejandrito%2Fcreepyface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4lejandrito%2Fcreepyface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4lejandrito","download_url":"https://codeload.github.com/4lejandrito/creepyface/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254189597,"owners_count":22029617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["creepy","dance","face","follow","javascript","javascript-library","look","mouse","picture","pointer","tilt","touch","touch-events"],"created_at":"2024-07-31T15:01:51.986Z","updated_at":"2025-05-15T05:07:06.471Z","avatar_url":"https://github.com/4lejandrito.png","language":"TypeScript","funding_links":["https://github.com/sponsors/4lejandrito","https://buymeacoffee.com/b4iusc3"],"categories":["TypeScript"],"sub_categories":[],"readme":"# [Creepyface](https://creepyface.io) \u0026middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/4lejandrito/creepyface/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/creepyface.svg?style=flat)](https://www.npmjs.com/package/creepyface) [![Build](https://github.com/4lejandrito/creepyface/workflows/Build/badge.svg)](https://github.com/4lejandrito/creepyface/actions?query=workflow%3ABuild+branch%3Amaster) [![Coverage Status](https://coveralls.io/repos/github/4lejandrito/creepyface/badge.svg?branch=master)](https://coveralls.io/github/4lejandrito/creepyface?branch=master) \u003ca href=\"https://twitter.com/intent/follow?screen_name=creepyface_io\"\u003e\u003cimg alt=\"Follow on Twitter\" src=\"https://img.shields.io/twitter/follow/creepyface_io.svg?style=social\u0026label=Follow\"\u003e\u003c/a\u003e\n\n![The Creepyface logo with a background full of faces looking at the pointer](cover.jpg)\n\nCreepyface is a little JavaScript library that makes your face look at the pointer (or [dance 💃](packages/creepyface-dance)).\n\nSee it in action at [creepyface.io](https://creepyface.io) and create your own one using [the wizard](https://creepyface.io/create).\n\nIf you use React, check out [\\\u003cCreepyface /\\\u003e](packages/react-creepyface). If you like fireflies, check out [creepyface-firefly](packages/creepyface-firefly).\n\n![Example animated gif of a face looking at the pointer](example.gif)\n\nCreepyface in the wild:\n\n- https://www.patrickcampbell.dev\n- https://atroshenkonikita.com\n- https://noemivillegascalonge.com\n- https://github.com/reflog/mattermost-plugin-creepy\n\n## Usage\n\n```html\n\u003cscript src=\"https://creepyface.io/creepyface.js\"\u003e\u003c/script\u003e\n\n\u003cimg\n data-creepyface\n src=\"https://creepyface.io/img/nala/serious\"\n data-src-hover=\"https://creepyface.io/img/nala/hover\"\n data-src-look-0=\"https://creepyface.io/img/nala/0\"\n data-src-look-45=\"https://creepyface.io/img/nala/45\"\n data-src-look-90=\"https://creepyface.io/img/nala/90\"\n data-src-look-135=\"https://creepyface.io/img/nala/135\"\n data-src-look-180=\"https://creepyface.io/img/nala/180\"\n data-src-look-225=\"https://creepyface.io/img/nala/225\"\n data-src-look-270=\"https://creepyface.io/img/nala/270\"\n data-src-look-315=\"https://creepyface.io/img/nala/315\"\n/\u003e\n```\n\n\u003e Run this example on [codepen](https://codepen.io/4lejandrito/pen/vbgxEB).\n\nCreepyface 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.\n\nYou can add as many Creepyfaces as you want as long as they all have the `data-creepyface` attribute.\n\nIf you want to stop Creepyface on a given image:\n\n```js\ncreepyface.cancel(document.querySelector('img'))\n```\n\n### Full list of data attributes\n\n| Name | Description |\n| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `data-creepyface` | Add this to automatically attach creepyface to your image when the page loads. |\n| `data-src-hover` | The URL of the image to use when the pointer is over your image. |\n| `data-src-look-\u003cangle\u003e` | 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. |\n| `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). |\n| `data-fieldofvision` | The angle (in degrees) inside which the pointer will be detected by a given direction. 150 by default. |\n| `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](#super-advanced-usage) for more information. |\n\n## Advanced usage\n\nFor more advanced use cases Creepyface can also be set up via a programmatic API:\n\n```html\n\u003cimg src=\"https://creepyface.io/img/nala/serious\" /\u003e\n```\n\n```js\nimport creepyface from 'creepyface'\n\nconst img = document.querySelector('img')\n\nconst cancel = creepyface(img, {\n // Image URL to display on hover\n hover: 'https://creepyface.io/img/nala/hover',\n // Each of the images looking at a given direction\n looks: [\n { angle: 0, src: 'https://creepyface.io/img/nala/0' },\n { angle: 45, src: 'https://creepyface.io/img/nala/45' },\n { angle: 90, src: 'https://creepyface.io/img/nala/90' },\n { angle: 135, src: 'https://creepyface.io/img/nala/135' },\n { angle: 180, src: 'https://creepyface.io/img/nala/180' },\n { angle: 225, src: 'https://creepyface.io/img/nala/225' },\n { angle: 270, src: 'https://creepyface.io/img/nala/270' },\n { angle: 315, src: 'https://creepyface.io/img/nala/315' }\n ],\n // Time (in ms) to restore the default image after the last input\n timeToDefault: 1000\n // The angle (in degrees) inside which the pointer will be detected\n fieldOfVision: 150\n})\n\n// at some point restore the original image and stop creepyface\ncancel()\n```\n\n\u003e Run this example on [codepen](https://codepen.io/4lejandrito/pen/bGdBqzX).\n\n## Super advanced usage\n\nCreepyface will look at the pointer by default, however custom point providers can be defined.\n\nFor example, to make your face look at a random point every half a second you need to register a [point provider](packages/creepyface/src/types.d.ts#L5-L8):\n\n```js\nimport creepyface from 'creepyface'\n\ncreepyface.registerPointProvider('random', (consumer) =\u003e {\n const interval = setInterval(\n () =\u003e\n consumer([\n Math.random() * window.innerWidth,\n Math.random() * window.innerHeight,\n ]),\n 500\n )\n return () =\u003e {\n clearInterval(interval)\n }\n})\n```\n\nand consume it using the `data-points` attribute:\n\n```html\n\u003cimg\n data-creepyface\n data-points=\"random\"\n src=\"https://creepyface.io/img/nala/serious\"\n data-src-hover=\"https://creepyface.io/img/nala/hover\"\n data-src-look-0=\"https://creepyface.io/img/nala/0\"\n data-src-look-45=\"https://creepyface.io/img/nala/45\"\n data-src-look-90=\"https://creepyface.io/img/nala/90\"\n data-src-look-135=\"https://creepyface.io/img/nala/135\"\n data-src-look-180=\"https://creepyface.io/img/nala/180\"\n data-src-look-225=\"https://creepyface.io/img/nala/225\"\n data-src-look-270=\"https://creepyface.io/img/nala/270\"\n data-src-look-315=\"https://creepyface.io/img/nala/315\"\n/\u003e\n```\n\n\u003e Run this example on [codepen](https://codepen.io/4lejandrito/pen/ZEYJLrN).\n\nor pass it programmatically:\n\n```html\n\u003cimg src=\"https://creepyface.io/img/nala/serious\" /\u003e\n```\n\n```js\nconst img = document.querySelector('img')\n\ncreepyface(img, {\n points: 'random',\n hover: 'https://creepyface.io/img/nala/hover',\n looks: [\n { angle: 0, src: 'https://creepyface.io/img/nala/0' },\n { angle: 45, src: 'https://creepyface.io/img/nala/45' },\n { angle: 90, src: 'https://creepyface.io/img/nala/90' },\n { angle: 135, src: 'https://creepyface.io/img/nala/135' },\n { angle: 180, src: 'https://creepyface.io/img/nala/180' },\n { angle: 225, src: 'https://creepyface.io/img/nala/225' },\n { angle: 270, src: 'https://creepyface.io/img/nala/270' },\n { angle: 315, src: 'https://creepyface.io/img/nala/315' },\n ],\n})\n```\n\n**Note:** several point providers can work at the same time by using a comma-separated string like `\"random,pointer\"`.\n\nThe following point providers are available out of the box:\n\n- `pointer` for both mouse and touch events. This is the default.\n- `mouse` just for mouse events.\n- `finger` just for touch events.\n\nThere are also external point providers:\n\n- 💃 [dance](packages/creepyface-dance) to dance to the rythm of the music.\n- ðŸĪģ [tilt](packages/creepyface-tilt) to stare at you when you tilt your phone.\n- 🐝 [firefly](packages/creepyface-firefly) to follow a moving firefly on the screen.\n\n## Developing\n\n- `yarn \u0026\u0026 yarn build` will set up the packages (using workspaces and [Lerna](https://lerna.js.org/)) and run a required initial build.\n- `yarn dev` will spin up local servers for each of the packages.\n- `yarn test` will run the tests.\n\n## Contributing\n\nPlease feel free to create issues and / or submit pull requests. For the latter, [test cases](packages/creepyface/test/) are very welcome.\n\n## License\n\nMIT, see [LICENSE](LICENSE) for details.\n\n## Big Thanks\n\nCross-browser Testing Platform and Open Source âĪïļ provided by [Sauce Labs][homepage].\n\n[homepage]: https://saucelabs.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4lejandrito%2Fcreepyface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4lejandrito%2Fcreepyface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4lejandrito%2Fcreepyface/lists"}