# creepyface-dance

> A point provider for [Creepyface](https://github.com/4lejandrito/creepyface) to make your face dance.

Latest version **8.2.1** (published 2025-01-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install creepyface-dance
pnpm add creepyface-dance
yarn add creepyface-dance
bun add creepyface-dance
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 8.2.1 |
| Published | 2025-01-24 |
| First published | 2020-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 491 |
| Author | Alejandro Tardín |
| Maintainers | 4lejandrito |
| Keywords | face, look, dance, follow, creepy, dance |

## Links

- npm: https://www.npmjs.com/package/creepyface-dance
- Repository: https://github.com/4lejandrito/creepyface.git#master
- Homepage: https://creepyface.io
- Issues: https://github.com/4lejandrito/creepyface/issues
- Funding: https://github.com/4lejandrito/creepyface?sponsor=1
- npm.io page: https://npm.io/package/creepyface-dance

## Recent versions

- 8.2.1 (latest) — 2025-01-24
- 8.2.0-alpha.1 (alpha) — 2022-09-30
- 8.1.3 — 2021-06-30
- 8.1.2 — 2021-06-29
- 8.1.1 — 2021-06-29
- 8.1.0 — 2021-02-25
- 8.0.3-alpha.0 — 2021-02-25
- 8.0.2 — 2021-02-22
- 8.0.1 — 2021-02-21
- 8.0.0 — 2021-02-17
- 8.0.0-alpha.2 — 2021-02-17
- 7.5.1 — 2021-02-17
- 8.0.0-alpha.1 — 2021-02-17
- 8.0.0-alpha.0 — 2021-02-17
- 7.5.0 — 2021-02-10
- … 14 more at https://npm.io/package/creepyface-dance/versions

## README

# Creepyface Dance 💃 · [![npm version](https://img.shields.io/npm/v/creepyface-dance.svg?style=flat)](https://www.npmjs.com/package/creepyface-dance)

A point provider for [Creepyface](https://github.com/4lejandrito/creepyface) to make your face dance.

## Usage

```html
<script src="https://creepyface.io/creepyface.js"></script>
<script src="https://unpkg.com/creepyface-dance"></script>
<img
  data-creepyface
  data-points="bensound-buddy"
  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"
/>
<audio
  src="https://www.bensound.com/bensound-music/bensound-buddy.mp3"
  controls
></audio>
<script>
  const { repeat, circle } = creepyfaceDance.moves
  creepyfaceDance.makePointProvider({
    name: 'bensound-buddy',
    audio: document.querySelector('audio'),
    bpm: 150,
    firstBeat: 0,
    choreography: repeat(4)([
      ...repeat(20)(['w', 'e', 'n', 's']),
      ...repeat(20)(['nw', 'ne', 'sw', 'se']),
      ...repeat(20)(circle('n')),
      ...repeat(20)(circle('s', true)),
    ]),
  })
</script>
```

> Run this example on [codepen](https://codepen.io/4lejandrito/pen/vYOMNJE).

### makePointProvider parameters

| Name           | Description                                                                                                                                                                                                                                                                                                                 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name`         | The name for the point provider to be created. This will be used for the `data-creepyface` attribute of your image.                                                                                                                                                                                                         |
| `audio`        | The [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) with the song. Since browsers now block autoplaying media you will have to manually play the audio or call the [play](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) method in response to a user event. |
| `bpm`          | The number of beats per minute of your song. You can use [this](http://www.beatsperminuteonline.com/) to calculate it.                                                                                                                                                                                                      |
| `firstBeat`    | The time (in seconds) when the first beat happens in your song. This is when the first step of your choreography will be performed.                                                                                                                                                                                         |
| `choreography` | The array of steps to perform on each beat. Valid steps are: `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, `nw`, `serious` and `crazy`.                                                                                                                                                                                             |

### Available moves

Moves are functions that return an array of steps. CreepyfaceDance provides [some of them out of the box](https://github.com/4lejandrito/creepyface/blob/master/packages/creepyface-dance/src/index.ts#L65-L86):

| Name          | Description                                                                                           | Example                            |
| ------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------- |
| `repeat`      | Repeats the given sequence a specified amount of times.                                               | `repeat(10)(['s', 'n'])`           |
| `circle`      | An 8 step move describing a counterclockwise circle looking to every direction from the one provided. | `circle('e')`                      |
| `intercalate` | Constructs a secuence consisting of the itercalation of a given sequence and a step.                  | `intercalate(['n', 'w'], 'crazy')` |

You can build you own moves too!

## Developing

- `yarn dev` will spin up a test page.
- `yarn build` will generate the production scripts under the `dist` folder.

---
_Source: https://npm.io/package/creepyface-dance · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._