bd-cursor
Our in-house custom cursor system. Replaces the default cursor with a smooth, animated dot and halo that responds to interactive elements. Desktop only (991px+) — falls back to the default cursor on mobile and touch devices.
Install
Add the CSS and JS to your project:
<link rel="stylesheet" href="path/to/bd-cursor.css">
<script src="path/to/bd-cursor.js"></script>
Add the cursor elements to your <body>:
<div class="cursor-default"></div>
<div class="cursor-halo"></div>
Usage
Add data-cursor to any element to change the cursor style on hover.
<a href="#" data-cursor="link">Link cursor</a>
<button data-cursor="button">Button cursor</button>
<div data-cursor="drag">Drag cursor</div>
Live Demos
Hover over each element to see the cursor change. Desktop only.
Navigation Cursors
<a href="#" data-cursor="link">Link</a>
<button data-cursor="button">Button</button>
<a href="#" data-cursor="external">External link</a>
<a href="#" data-cursor="home">Home</a>
Action Cursors
Plus
Play
Close
Check
Search
Info
<button data-cursor="plus">Plus</button>
<button data-cursor="play">Play</button>
<button data-cursor="close">Close</button>
<button data-cursor="check">Check</button>
<button data-cursor="search">Search</button>
<button data-cursor="info">Info</button>
Directional Cursors
Arrow Left / Right
Chevron Left / Right
<button data-cursor="arrow-left">Arrow left</button>
<button data-cursor="arrow-right">Arrow right</button>
<button data-cursor="chevron-left">Chevron left</button>
<button data-cursor="chevron-right">Chevron right</button>
Interactive Cursors
Drag
Hover for drag cursor
Click Anywhere
Hover for click-anywhere cursor
Scroll
Hover for scroll cursor
Look
Hover for look cursor
Text
Hover for text cursor
<div data-cursor="drag">Drag area</div>
<div data-cursor="click-anywhere">Click anywhere</div>
<div data-cursor="scroll">Scroll area</div>
<div data-cursor="look">Look</div>
<div data-cursor="text">Text area</div>
Social Cursors
<a href="#" data-cursor="instagram">Instagram</a>
<a href="#" data-cursor="tiktok">TikTok</a>
<a href="#" data-cursor="linkedin">LinkedIn</a>
<a href="#" data-cursor="youtube">YouTube</a>
<a href="#" data-cursor="email">Email</a>
<a href="#" data-cursor="chat">Chat</a>
All Cursor Types
| Value | Description |
|---|---|
pointer |
Generic pointer |
link |
Link indicator |
button |
Button indicator |
text |
Text selection cursor |
external |
External link icon |
home |
Home icon |
plus |
Plus / add |
play |
Play / media trigger |
close |
Close / X |
check |
Checkmark |
search |
Search icon |
info |
Info icon |
look |
Eye / look |
drag |
Drag indicator |
click-anywhere |
Click anywhere prompt |
scroll |
Scroll prompt |
locked |
Locked state |
case-study |
Case study indicator |
arrow-left |
Left arrow |
arrow-right |
Right arrow |
chevron-left |
Left chevron |
chevron-right |
Right chevron |
x |
Close / dismiss |
chat |
Chat icon |
instagram |
Instagram icon |
tiktok |
TikTok icon |
linkedin |
LinkedIn icon |
youtube |
YouTube icon |
email |
Email icon |
Dependencies
- None — zero-dependency vanilla JS (no GSAP required)
- Desktop only (991px+), skipped on touch devices
- Requires and elements in DOM
- Adds
custom-cursor-activeclass to<body>when active
Animation Configuration
The follow speed and snapping behavior can be tuned via constants at the top of bd-cursor.js:
| Constant | Default | Description |
|---|---|---|
CURSOR_LERP |
0.25 |
Cursor follow speed — higher = tighter follow, lower = smoother trail |
HALO_LERP |
0.25 |
Halo follow speed — matches cursor so both layers stay together |
SNAP_THRESHOLD |
0.5 |
Distance (px) at which the cursor snaps to the target position |