cursor-blob
Lightweight library for animated, interactive cursors using GSAP

1.2kB gzipped
Demo
➤ Install
$ yarn add gsap
$ yarn add cursor-blob
➤ Import
import gsap from 'gsap';
import CursorBlob from 'cursor-blob';
➤ Usage
<div class="cursor">
<div class="cursor__rim"></div>
<div class="cursor__dot"></div>
</div>
CursorBlob.registerGSAP(gsap);
const cursorEl = document.querySelector('.cursor');
const cursorRimEl = document.querySelector('.cursor__rim');
const cursorDotEl = document.querySelector('.cursor__dot');
const cursorBlob = new CursorBlob({
cursorEl,
cursorRimEl,
cursorDotEl,
duration: 0.8,
ease: 'expo.out',
});
The CursorBlob plugin supports dynamically changing the cursor's appearance using the data-cursor-style
attribute. You can add this data attribute to any HTML element to define custom behavior and cursor style on hover.
How it works
Each element with the attribute data-cursor-style="your-style"
will switch the cursor’s class to cursor--your-style
. For example:
<div data-cursor-style="blend">...</div>
This will add the class .cursor--blend
to the cursor element. You can then define the necessary styles in CSS using this class. Examples.
➤ Options
cursorEl | HTMLElement | – | Main cursor wrapper element. |
cursorRimEl | HTMLElement | – | Outer ring of the cursor that stretches and rotates based on velocity. |
cursorDotEl | HTMLElement | – | Inner dot of the cursor that lags slightly behind. |
duration | number | – | Duration of the GSAP animation when the cursor moves. |
ease | string | 'expo.out' | Easing function used by GSAP for smooth motion. See gsap easing. |
➤ API
destroy() | Removes all event listeners and cancels the animation loop. |
➤ License
cursor-blob is released under MIT license.