@pt1602/cursor
v1.0.7
Published
[![CSS](https://img.shields.io/badge/--blue?logo=Javascript&logoColor=fff)](https://de.wikipedia.org/wiki/Cascading_Style_Sheets/) [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-blue.svg)](https://github.com/pt1602/cursor/graphs/commit-act
Downloads
14
Maintainers
Readme
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%;
}