Cursor Trail Effects Bundle Library adds beautiful cursor trail animation effects for the stylish look of your website. It's SVG-based, uses modern Web Animations API, and has no external dependencies.
On behalf of our team, we would like to thank you for purchasing this library. Your support encourages us to build better plugins and continuously bring value to our products. This documentation file covers all the information needed to install and use this library.
Check library Live Preview here.
The library settings page is located in the Settings menu and called Cursor Trail. It allows configuring different plugin settings with UI controls.
This example will show you how to add a cursor trail to a sample page.
Upload the script cursor-trail.min.js to your website (via FTP or other way depending on your hosting provider). The script can be found in the downloaded file at /lib/cursor-trail.min.js
Let's take a minimal HTML structure with a black background:
<!doctype html>
<html lang="en">
<head>
<title>Cursor Trail Effects Bundle</title>
<meta charset="utf-8"/>
</head>
<body style="background: #000">
</body>
</html>
Place the <script> tag near the end of the page, right before the closing
<script src="cursor-trail.min.js"></script>
Add library initialization as follows:
<script>
cursorTrail();
</script>
Library settings can be passed in the following way:
<script>
cursorTrail({
// Settings ....
pattern: 'goldSparkles',
animationType: 'flash'
});
</script>
The final version:
<!doctype html>
<html lang="en">
<head>
<title>Cursor Trail Effects Bundle</title>
<meta charset="utf-8"/>
</head>
<body style="background: #000">
<!-- Any HTML content here ... -->
<script src="cursor-trail.min.js"></script>
<script>
cursorTrail({
pattern: 'goldSparkles',
animationType: 'flash'
});
</script>
</body>
</html>
The list of all possible cursor shapes (patterns) can be found here.
The list of all possible animation types can be found here.
Cursor Tail Library has two possible themes. Dark theme is a default one, and light theme can be enabled in the following way:
<!doctype html>
<html lang="en">
<head>
<title>Cursor Trail Effects Bundle</title>
<meta charset="utf-8"/>
</head>
<body style="background: #fff">
<!-- Any HTML content here ... -->
<script src="cursor-trail.min.js"></script>
<script>
cursorTrail({
pattern: 'colorSparkles',
animationType: 'flash',
theme: 'light' // dark, light
});
</script>
</body>
</html>
Light theme setting means that the library will choose colors that better match light backgrounds.
It's also possible to change the theme dynamically via API, as described here.
| Property Name | Values | Description |
|---|---|---|
| pattern | goldSparkles (default), or any value from the list | This property defines cursor shape (pattern). |
| animationType | flash (default), or any value from the list | This property defines cursor animation type. |
| shapesCount | numeric value, default = 25 | The maximum number of cursor shapes on the page. |
| step | numeric value, default = 5 | How dense the animation effect is. Step = 1 means very compact; the higher numbers mean more space. |
| theme | dark (default), light | More info can be found here. |
| duration | 1000 (default) or any numeric value | The animation duration. |
| easing | ease-in-out (default), or any value from here | The animation easing. |
| touch | true (default) or false | If false, the animation will be disabled on touch (mobile). |
| paused | true or false (default) | If true, the animation will be paused by default. |
| debug | true or false (default) | Enable or disable debug message in the console. |
Sparkles, glitter, and stars could be best combined with the following animation types:
Rain and drops could be best combined with the following animation types:
Autumn shapes could be best combined with the following animation types:
Winter items could be best combined with the following animation types:
Party shapes could be best combined with the following animation types:
Love section items could be best combined with the following animation types:
It's possible to set cursor shape (pattern) dynamically via JavaScript in the following way:
cursorTrail.setPattern('pattern-name');
The list with shape names can be found here.
For example:
cursorTrail.setPattern('goldFeather');
It's possible to change animation type dynamically via JavaScript in the following way:
cursorTrail.setEffect('animation-type-name');
The list with animations can be found here.
For example:
cursorTrail.setEffect('leftDown');
It's possible to change theme dynamically via JavaScript in the following way:
cursorTrail.setTheme('dark');
// make the theme light
cursorTrail.setTheme('light');
To stop or start library animation via JavaScript, you may use the following API:
// stop the animation
cursorTrail.stop();
// start the animation
cursorTrail.start();
The script can be started with paused animation, and the animation can begin later. For example:
// init the script with paused animation
cursorTrail({
paused: true,
pattern: 'blueSparkles',
animationType: 'flash'
});
// start animation in 3 seconds
window.setTimeout(function(){
cursorTrail.start();
}, 3000);
It's possible to get the current library state in any time using the following API:
const info = cursorTrail.getInfo();
console.log(info);
This API returns all inner state data like theme, animation type, selected pattern, etc.
It's possible to get a list of all available cursor shapes (patterns) using the following code:
console.log(cursorTrail.shapes);
It's possible to provide any custom shape instead of predefined cursor shapes. It can be an image, SVG, any text, or even HTML.
For example, you may use emoji as follows:
cursorTrail({
pattern: [
'🍕', '🍍', '🍓', '🍋', '🍎', '🍔', '🍏', '🧁', '🍉', '🍊', '🍌', '🍐', '🍒', '🍦'
],
animationType: 'rightDown'
});
SVG example with a red star:
cursorTrail({
pattern: [
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 91 86"><polygon points="45.5 71.3 17.6 85.9 22.9 54.8 0.3 32.8 31.5 28.3 45.5 0 59.5 28.3 90.7 32.8 68.1 54.8 73.4 85.9" fill="#ff0000"/></svg>'
],
animationType: 'rightDown'
});
An example with images from unsplash:
cursorTrail({
pattern: [
'<img src="https://images.unsplash.com/photo-1491604612772-6853927639ef?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" />',
'<img src="https://images.unsplash.com/photo-1560574544-70d9fb52e733?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=80&q=80" />'
],
animationType: 'rotation90'
});
An example with custom HTML:
cursorTrail({
pattern: [
'<div style="width: 1rem; height: 1rem; border-radius: 100%; background: #7cd3ff; box-shadow: 0 0 1rem #fff"></div>',
'<div style="width: 1rem; height: 1rem; border-radius: 100%; background: #2d779c; box-shadow: 0 0 1rem #fff"></div>',
'<div style="width: 1rem; height: 1rem; border-radius: 100%; background: #fff; box-shadow: 0 0 1rem #fff"></div>'
],
animationType: 'downScale'
});
It's also possible to reuse predefined shapes with other colors and sizes. For example:
cursorTrail({
pattern: [
cursorTrail.shapes.sparkles.star80(15, '#d229d8'),
cursorTrail.shapes.sparkles.star80(10, '#5b0fbf'),
],
animationType: 'flash'
});
All shapes can be found using shapes list api
By default, the animation is enabled on touch move events on any device that supports touch (mostly on mobile). To disable this behaviour you may use the following setting:
cursorTrail({
...,
touch: false
});
By default, animation uses easing ease-in-out value. Other possible values are:
You can read more about easing here.