Resonate.js

A modern minimalist cursor-based animation library for the Javascript ecosystem.

demo.mp4

Table of Contents 📖

• Features
• Installation
• Usage
• Architecture

Features 🚀

• 🧩 Ease of use : write less, do more.
• ✨ Modern : get support for your modern frameworks.
• 💼 Customisation : have complete control over the code.
• 🛍️ Presets : use popular presets right out of the box.
• 💻 API : offering a comprehensive interface to work with the DOM.
• 💉 Injectable : use Resonate without changing existing code.
• 🛡️ Typescript : get full typescript support.
• 🪶 Zero Dependancies : don't waste a byte on some code you don't need.

Installation 📦

via NPM

npm install --save @resonate/react

via Yarn

yarn add @resonate/react

via PNPM

pnpm add @resonate/react

via Bun

bun add @resonate/react

Usage 🔌

Presets

import { tilt, glare, useResonate, ResonateContainer } from "@resonatejs/react";

export const Card: React.FC = () => {
  const trackers = useResonate({
    presets: [glare(), tilt(), ...] // all your presets go here
  });

  return (
    <ResonateContainer
      className="..."
      trackers={trackers}
    >
      Try it out!
    </ResonateContainer>
  );
}

Listeners

import { useResonate, ResonateContainer } from "@resonatejs/react";

export const Card: React.FC = () => {
  const trackers = useResonate({
    // access the rich API
    listeners: ({ getCenterPosition }) => {
      const { x, y } = getCenterPosition();
      // return all the event listeners
      return {
        mousemove({ clientX, clientY }) {
          console.log(clientX - x, clientY - y);
        },
      };
    },
  });

  return (
    <ResonateContainer
      className="h-full w-full py-24 text-zinc-300 ring-2 ring-zinc-600 text-center text-7xl text-wrap rounded-xl font-mono bg-zinc-900"
      trackers={trackers}
    >
      Try it out!
    </ResonateContainer>
  );
};