Interacitve Animations That Follow Your Cursor Or DOM Elements – watching-you

Preview:

Description:

watching-you is a tiny yet robust JavaScript library for creating animations that follow things on your webpage.

It allows developers to add interactive elements (typically eyes and arrows) that follow the user’s mouse, DOM elements, or even input values across the page. This can significantly boost user engagement by making interfaces feel more interactive and responsive.

How to use it:

1. Install the watching-you package with NPM.

# Yarn
$ yarn add watching-you
# NPM
$ npm install watching-you

2. Import the ‘watchingYou’ module into your project.

// ESM
import WatchingYou from 'watching-you';
// From a CDN
import watchingYou from 'https://cdn.jsdelivr.net/npm/watching-you@VERSION/+esm'

3. Create a new instance of WatchingYou and provide a watcher element.

<div class="eye"></div>

const watcher = new watchingYou('.eye', {
  // options here
});

4. Start the watching behavior.

watcher.start();

5. Available options.

const watcher = new watchingYou('.eye', {
  // The element being watched.
  target: undefined,
  // Specifies what the watcher should follow:
  // 'mouse', 'dom', 'input', or 'textarea'
  targetType: 'mouse',
  // Sets the range of movement.
  power: {
    x: 50,
    y: 50,
  },
  // Whether the watcher can rotate.
  rotatable: true,
  // Whether the watcher can move.
  movable: true,
});

6. API methods.

// Stops the watching behavior.
watcher.stop();
// Changes the watcher element.
watcher.setWatcher();
// Changes the target element and type.
watcher.setTarget();
// Changes the maximum movement distance.
watcher.setPower();
// Enables/disables rotation.
watcher.setRotatable();
// Enables/disables movement.
watcher.setMovable();

Changelog:

03/01/2025

• v0.0.12