/curseur

Svelte component for creating customizable cursors.

Primary LanguageSvelteMIT LicenseMIT

Curseur

Svelte component for creating customizable cursors.

npm GitHub repo size GitHub top language npm

enter image description here

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')