Table of contents

1. Reason of being
2. Demo
3. Setup
4. Getting Started
5. Behavior types

Reason of being

Today many sites want to differentiate themselves by their original and unique style.

Several problems remain :

• First, the fact of ignoring a "Call-To-Action" too sophisticated or so sober that it does not attract the eye.
• Second, making the focus of an element more visible.
• In other cases, wanting to make the user click on an item explicitly.

The purpose of this project is therefore to provide those who want a simple and flexible solution to highlight the "Call-To-Action" of their site.

Demo

You can check the playground here : https://attractive-cursors.vercel.app

Setup

https://www.npmjs.com/package/attractive-cursors

$ npm install --save attractive-cursors

$ yarn add attractive-cursors

OR (to play with source code)

$ git clone https://github.com/pierredarrieutort/attractive-cursors.git

Getting Started

A tiny & simple step-by-step tutorial is available here : https://attractive-cursors.vercel.app/tutorial.html

Behavior types

The project shows three types of behavior but you can see in the Getting Started section that they are complementary and can work together without conflict. You can see them working together in the Demo.

• Sticky

  The "Sticky" behavior attracts the mouse's rounded shape to the button area and maintain it when user's pointer is in the dedicated parent area.

• Magnetic

  The "Magnetic" behavior displaces the content near to the mouse when user's pointer is in the dedicated parent area.

• Autoscaled

  The "Autoscaled" behavior use the hypotenuse of area to scale the mouse's rounded shape to the first child of dedicated parent area.