https://github.com/n3-rd/curseur

Svelte component for creating customizable cursors.
https://github.com/n3-rd/curseur

component cursor custom-cursor svelte sveltekit

Last synced: 6 months ago
JSON representation

Svelte component for creating customizable cursors.

• Host: GitHub
• URL: https://github.com/n3-rd/curseur
• Owner: n3-rd
• License: mit
• Created: 2023-04-10T23:15:27.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-05-22T09:57:11.000Z (about 3 years ago)
• Last Synced: 2025-10-26T04:24:41.715Z (8 months ago)
• Topics: component, cursor, custom-cursor, svelte, sveltekit
• Language: Svelte
• Homepage: https://curseur.vercel.app
• Size: 43 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          

# Curseur

Svelte component for creating customizable cursors.

![npm](https://img.shields.io/npm/dw/curseur?style=for-the-badge) ![GitHub repo size](https://img.shields.io/github/repo-size/n3-rd/curseur?style=for-the-badge) ![GitHub top language](https://img.shields.io/github/languages/top/n3-rd/curseur?style=for-the-badge) ![npm](https://img.shields.io/npm/v/curseur?style=for-the-badge)

![enter image description here](https://i.ibb.co/SQGMwnw/CURSEUR-1.png)

## Installation

NPM

```bash

npm i curseur

```

Yarn

```bash

yarn add curseur

```

PNPM

```bash

pnpm add curseur

```

## Usage

import the library

```js

import  {  Cursor  }  from  'curseur';

```

And simply use it:

```html

```

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

```html



    
Hover me!



```


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