Square Cursor Component

Modern and minimalistic Custom Cursor for React/Next projects with Tailwind CSS and features smooth animations, customizable inner text and Difference blend to ensure visibility over any element

Installation

Using npm

$ npm install square-cursor

States

The cursor currently have 3 states which are: static, hover and text; each one visually different

Static

Cursor will remain static unless it hovers target elements, in this state it looks like a small 3x3 square

Hover

Cursor will enter it's hover state when hovering over a selected element, in this state it performs a smoothly increase of size and a rotation

Text

Cursor will enter it's text state when hovering over a selected element with a text attibute, in this state it performs a smoothly increase of size and a rotation and displays a centered text

Select Elements

In order to easily select elements or custom components the custom cursor trigger relays on two custom attributes hoverable and hover-text

Please note that currently commonly interactive elements such as button, input or a are not listed by default to grant a better grade of customization to the user, an extra feature to keep them included but give user the choice to exclude all or certain ones is under development

• hoverable [boolean]

hoverable is a boolean attribute that works as a control to trigger the changes on cursor, it can be placed in any tag or component and will force cursor onto the hover state when is hovered

<div class="clas-example" hoverable/> or <CustomComponent hoverable/>

• hover-text [string]

hover-text is a string attribute and determines when the cursor must enter its ext state and also provides the text to be displayed

<div class="clas-example" hover-text="Example"/> or <CustomComponent hover-text="Example"/>

For this early release the cursor size does not adapt to inner text in order to keep the aspect ratio preserved, it's not something planned to change as the idea of inner text is displaying short and clear indications of what will happen if a user press that element

Support

Tested in Chrome 128, Firefox 130, Edge 128 & Safari 17