atlas2002 / resonatejs Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 2.0 12.77 MB

Resonate.js is a minimalist modern cursor-based animation library for javascript frameworks.

Home Page: https://www.npmjs.com/package/@resonatejs/react

License: MIT License

JavaScript 7.87% TypeScript 90.16% CSS 1.97%

dom npm react typescript ui-library

resonatejs's Introduction

Resonate.js

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

demo.mp4

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>
  );
};

resonatejs's People

Contributors

Stargazers

Watchers

Forkers

maruthisingh jenis07

resonatejs's Issues

Add tailwind-config as a shared package

Note

Inside the base directory, create a new directory tailwind-config.
Create a tailwind.config.ts and postcss.config.ts file.
Configure all the base properties (set accurate paths in content).
Extend tailwind and postcss config files in other workspaces from the base tailwind-config package.

Tip

Use pnpm to install the packages: tailwindcss, postcss and autoprefixer.
Instead of creating the config files, run this command instead: pnpx tailwindcss init -p.
If the files are in .js, change them to .ts, and use proper types.

Implement a react parser to handle the presets

This is the current location of presets:

packages
- react
  - src
    - presets
      
      glare.ts
      index.ts
      tilt.ts

Problem:

And each of these preset files have a default function, that handles all the logic for that preset. But these are tightly coupled with the react environment. If we implement these effects in other frameworks then we have to rewrite the implementation code again.

Solution:

Instead what we can do is, move the logic to a separate preset directory packages/react/src/preset >> packages/preset under the packages. And for each framework there will be a dedicated parser, which will take the output generated by the preset file. And do react specific things, like adding refs. Currently the preset file takes the user's configuration and returns a resonate function which handles the implementation, also the ref of the component that it is controlling along with a title, that we pass to the ResonateContainer.

Important points:

You can add the parser here: packages/react/src/core/parser.ts.
The preset folder needs to be shifted directly under the packages/.
Use typescript efficiently. Write readable and reusable types.
Avoid using document.querySelector() or useRef() inside the preset file. Add a method inside the useAPI hook react/src/hooks/api.ts, and use it to access the element in the resonate function.
Using best react practices will be highly appreciated (that includes not using querySelectors, that directly access the DOM elements).

Please add a comment under this issue, if there is anything that you think would be better to add or change. Also I will be more than happy to guide you through the details, but I encourage taking a look at the code first. If there are any doubts not related to this issue you can ask them in the discord channel of JWOC.

That's all for this issue, good luck everyone & Happy Coding! 😄

Write the docs for preset: glare

Inside the `example/docs` there is a empty nextjs app, that you have to change according to the wireframe that is provided in the picture above.

Important points:

Keep the UI for the sidebar in app/layout.tsx.

Routes need to be in this manner:

  - app/
    - layout.tsx
    - presets/
      - glare/
        - page.tsx

Keep the code in a structured format (i.e: keep the UI components inside /components).
You can add some creativity in the design, no need to be strict about the provided design.

atlas2002 / resonatejs Goto Github PK

resonatejs's Introduction

Resonate.js

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

Table of Contents 📖

Features 🚀

Installation 📦

via NPM

via Yarn

via PNPM

via Bun

Usage 🔌

Presets

Listeners

resonatejs's People

Contributors

Stargazers

Watchers

Forkers

resonatejs's Issues

This is the current location of presets:

Problem:

Solution:

Important points:

That's all for this issue, good luck everyone & Happy Coding! 😄

Inside the example/docs there is a empty nextjs app, that you have to change according to the wireframe that is provided in the picture above.

Important points:

Recommend Projects

Recommend Topics

Recommend Org

Inside the `example/docs` there is a empty nextjs app, that you have to change according to the wireframe that is provided in the picture above.