Curseur

Svelte component for creating customizable cursors.

Installation

NPM

npm i curseur

Yarn

yarn add curseur

PNPM

pnpm add curseur

Usage

import the library

import  {  Cursor  }  from  'curseur';

And simply use it:

<Cursor  color="green"  mixBlendMode="exclusion"  size={13}  />

To use hover effects, you can simply add a .hoverable class to the element you want to apply the effect to.

<div  class="hoverable">
    <h1>Hover me!</h1>
</div>

Customization

• size: Number - The size of the cursor. (Default: 20)
• color: String - The color of the cursor. (Default: 'black')
• shape: String - The shape of the cursor. (Default: 'circle')
• mixBlendMode: String - The mix-blend-mode of the cursor. (Default: 'none')