alpinejs-cursor v1.1.1
Alpine JS 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.
<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>Package
yarn add -D alpinejs-cursor
npm install -D alpinejs-cursorimport Alpine from 'alpinejs'
import cursor from 'alpinejs-cursor'
Alpine.plugin(cursor)
Alpine.start()Usage
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.
Basic Example
To create a simple custom cursor:
<body x-data x-cursor>
//
</body>Advanced Examples
Multiple Cursors
Create a trail effect with multiple cursors:
<body x-data x-cursor.5>
<!-- Creates 5 cursor elements that follow in sequence -->
</body>Custom Hover States
Define specific elements that will trigger cursor style changes:
<body x-data x-cursor x-cursor-targets='["button", ".link", "#hero"]'>
//
</body>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.