https://github.com/markmead/alpinejs-cursor

This is a tiny JavaScript package that creates custom cursor for you with minimal JavaScript and allows you to write hover effects for the cursor(s) in CSS 👆
https://github.com/markmead/alpinejs-cursor

alpine alpinejs cursor custom-cursor interactive

Last synced: about 1 year ago
JSON representation

This is a tiny JavaScript package that creates custom cursor for you with minimal JavaScript and allows you to write hover effects for the cursor(s) in CSS 👆

• Host: GitHub
• URL: https://github.com/markmead/alpinejs-cursor
• Owner: markmead
• License: mit
• Created: 2022-08-05T19:31:02.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2025-03-07T13:49:02.000Z (over 1 year ago)
• Last Synced: 2025-03-24T20:12:40.177Z (over 1 year ago)
• Topics: alpine, alpinejs, cursor, custom-cursor, interactive
• Language: JavaScript
• Homepage:
• Size: 31.3 KB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Alpine JS Cursor 👆

![](https://img.shields.io/bundlephobia/min/alpinejs-cursor)

![](https://img.shields.io/npm/v/alpinejs-cursor)

![](https://img.shields.io/npm/dt/alpinejs-cursor)

![](https://img.shields.io/github/license/markmead/alpinejs-cursor)

This is a tiny JavaScript package that creates custom cursor for you with

minimal JavaScript and allows you to write hover effects for the cursor(s) in

CSS.

## Features

- 🪶 Lightweight (< 1kb minified)

- 🎨 Fully customizable with CSS

- ⚡ Simple API with minimal configuration

- 🔄 Multiple cursor support for follow-along effects

- 🎯 Target specific elements for custom hover states

- 📱 Works with mouse and touch devices

Perfect for creative websites, portfolios, and interactive experiences where you

want to replace the default cursor with something more engaging.

## Install

## CDN

For this package to work with a CDN, you'll need to access the `Cursor` class

from the `window` object.

```html

```

## Package

```shell

yarn add -D alpinejs-cursor

npm install -D alpinejs-cursor

```

```js

import Alpine from 'alpinejs'

import cursor from 'alpinejs-cursor'

Alpine.plugin(cursor)

Alpine.start()

```

## Usage

Alpine JS Cursor is built upon

[Custom Cursor](https://github.com/markmead/custom-cursor), a vanilla JavaScript

library for creating custom cursors. This Alpine.js wrapper provides the same

functionality with Alpine's declarative syntax.

## Basic Example

To create a simple custom cursor:

```html

  //

```

## Advanced Examples

### Multiple Cursors

Create a trail effect with multiple cursors:

```html

  

```

### Custom Hover States

Define specific elements that will trigger cursor style changes:

```html

  //

```

## Options

Alpine JS Cursor maintains the same API as the original Custom Cursor plugin:

| Custom Cursor Option | Alpine JS Implementation | Description                                     |

| -------------------- | ------------------------ | ----------------------------------------------- |

| `count`              | `x-cursor.5`             | Creates multiple cursor elements (trail effect) |

| `targets`            | `x-cursor-targets`       | Elements that trigger hover states              |

For more advanced usage and options, refer to the

[Custom Cursor documentation](https://github.com/markmead/custom-cursor).