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.
- 🪶 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.
For this package to work with a CDN, you'll need to access the Cursor class
from the window object.
<script
defer
src="https://unpkg.com/alpinejs-cursor@latest/dist/cdn.min.js"
></script>
<script defer src="https://unpkg.com/alpinejs@latest/dist/cdn.min.js"></script>yarn add -D alpinejs-cursor
npm install -D alpinejs-cursorimport Alpine from 'alpinejs'
import cursor from 'alpinejs-cursor'
Alpine.plugin(cursor)
Alpine.start()Alpine JS Cursor is built upon Custom Cursor, a vanilla JavaScript library for creating custom cursors. This Alpine.js wrapper provides the same functionality with Alpine's declarative syntax.
To create a simple custom cursor:
<body x-data x-cursor>
//
</body>Create a trail effect with multiple cursors:
<body x-data x-cursor.5>
<!-- Creates 5 cursor elements that follow in sequence -->
</body>Define specific elements that will trigger cursor style changes:
<body x-data x-cursor x-cursor-targets='["button", ".link", "#hero"]'>
//
</body>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.