Features
- Custom Cursor Icons
- Particle effects
- Enable/disable cursor & particles dynamically
- Lightweight, high-performance, canvas-based
- Developer-friendly
Cursor Icon Gallery
Icon 0
Icon 1
Icon 2
Icon 3
Icon 4
Icon 5
Icon 6
Icon 7
Icon 8
Icon 9
Icon 10
Icon 11
Icon 12
Icon 13
Icon 14
Icon 15
Icon 16
Icon 17
Icon 18
Icon 19
Icon 20
Icon 21
Icon 22
Icon 23
Icon 24
Icon 25
Icon 26
Icon 27
Icon 28
Icon 29
Icon 30
Icon 31
Icon 32
Icon 33
Icon 34
Icon 35
Icon 36
Icon 37
Icon 38
Icon 39
Icon 40
Icon 41
Live Example & Effects
Cursor Controls
Normal Effects
Default Emoji Effects
Custom Emoji Effects
How to set a custom emoji effect:
// Initialize first if not done yet
const cursor = Cursorly.init();
// Set custom emoji effect
cursor.setEffect({name:"emoji", shape:"👻", size:[2,4]});
// Keep your emoji in shape and it's required, size, density,decay,color is optional.
Click on an emoji to set it as the cursor effect:
Installation
Include the library via CDN:
<script src="https://cdn.jsdelivr.net/gh/iamashruu/cursorly.js@v1.0.1/dist/cursorly.min.js"></script>Initialization
Initialize the cursor with default options:
const cursor = Cursorly.init({
cursor: 0, // Index of the cursor icon (default: 0)
effect: { name: "trail", color: "rainbow" } // Effect name and color are required
});
Note: Make sure to include the script tag before using the library in your JavaScript code.
Example
Here’s a complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursorly.js Example</title>
<script src="https://cdn.jsdelivr.net/gh/iamashruu/cursorly.js@v1.0.1/dist/cursorly.min.js"></script>
</head>
<body>
<script>
const cursor = Cursorly.init();
</script>
</body>
</html>Interactive Editor
Code Snippets
// Initialization with default icons and effect
const cursor = Cursorly.init();
// OR, Initialize with custom icon and effect:
const cursor = Cursorly.init({
cursor: 0, // Index of the cursor icon (default: 0)
effect: { name: "trail", color: "rainbow" } // Effect name and color are required
});
// OR, Initialize with custom icon and emoji effect
const cursor = Cursorly.init({
cursor: 0,
effect: { name: "emoji", shape:"👻"}
});
// Change cursor icon dynamically
cursor.setIcon(1);
// Change particle effect dynamically
cursor.setEffect({
name: "sparkle", // 'trail', 'sparkle', or 'emojiSnow',etc
color: "#ff4081", // Hex color or "rainbow"
density: 10, // Optional, number of particles per mouse move
size: [3, 12], // Optional, min and max particle size
decay: 0.92, // Optional, particle shrink rate
});
// Set custom emoji effect
cursor.setEffect({
name: "emoji", // 'trail', 'sparkle', or 'none'
shape: "👻", // emoji
density: 10, // Optional, number of particles per mouse move
size: [3, 12], // Optional, min and max particle size
decay: 0.92, // Optional, particle shrink rate
});
//Disable or enable effects dynamically::
cursor.disableEffect(); // Turn off particle effects
cursor.enableEffect(); // Turn on particle effects
// Disable or enable cursor
cursor.disable();
cursor.enable();