@pt1602/cursor NPM

PT1602 - Cursor

A simple custom cursor created with scss and typescript, for me to create my first npm package.

Setup

Add the styling into your <head> tag of your project. Like this:

<link href="./public/libs/@pt1602/cursor/dist/css/base.css" rel="stylesheet">

and this <script> tag after your closing <body> tag

<script src="./public/libs/@pt1602/cursor/dist/js/index.js"></script>

Last step is to add the following div somewhere to your project.

<div data-cursor></div>

Configuration

Via the data-cursor-delay attribute you are able to set a custom delay for the animation (default 300).

Example:

<div data-cursor data-cursor-delay="600"></div>

Styling

To add your own styling just override the default css variables.

* {
    --cursor-primary-color: #55fff5;
    --cursor-z-index: 100;
    --cursor-dot-color: var(--cursor-primary-color);
    --cursor-dot-size: 5px;
    --cursor-outline-size: 30px;
    --cursor-outline-width: 2px;
    --cursor-outline-color: var(--cursor-primary-color);
    --cursor-border-radius: 50%;
}