Snap-to-Link Cursor
A copy-paste cursors component in pure HTML, CSS & vanilla JS. Zero dependencies, framework-agnostic, MIT-licensed.
CursorsHTMLJavaScriptCSSany framework
Copy into your project
HTML
<div class="nuda-snapcur-area">
<button class="nuda-snapcur__target" data-snap>Snap here</button>
<span class="nuda-snapcur__cursor"></span>
</div>JavaScript
(function () {
var area = document.querySelector('.nuda-snapcur-area');
var cur = area.querySelector('.nuda-snapcur__cursor');
if (!area) return;
area.addEventListener('mousemove', function (e) {
var snap = e.target.closest('[data-snap]');
if (snap) {
var r = snap.getBoundingClientRect();
var areaR = area.getBoundingClientRect();
cur.style.left = r.left - areaR.left + r.width / 2 + 'px';
cur.style.top = r.top - areaR.top + r.height / 2 + 'px';
cur.style.width = (r.width + 8) + 'px';
cur.style.height = (r.height + 8) + 'px';
cur.style.borderRadius = '10px';
cur.style.background = 'transparent';
cur.style.boxShadow = 'inset 0 0 0 2px #e4ff54';
} else {
var rect = area.getBoundingClientRect();
cur.style.left = (e.clientX - rect.left) + 'px';
cur.style.top = (e.clientY - rect.top) + 'px';
cur.style.width = cur.style.height = '14px';
cur.style.borderRadius = '50%';
cur.style.background = '#e4ff54';
cur.style.boxShadow = 'none';
}
});
})();CSS
.nuda-snapcur-area {
position: relative;
width: 100%;
max-width: 240px;
height: 130px;
border-radius: 12px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.06);
overflow: hidden;
cursor: none;
display: flex;
align-items: center;
justify-content: center;
}
.nuda-snapcur__target {
padding: 7px 14px;
background: rgba(228,255,84,.08);
border: 1px solid rgba(228,255,84,.3);
color: #e4ff54;
border-radius: 8px;
font-size: 12px;
cursor: none;
}
.nuda-snapcur__cursor {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: #e4ff54;
pointer-events: none;
transform: translate(-50%,-50%);
transition: transform .25s cubic-bezier(.34,1.56,.64,1),width .3s cubic-bezier(.34,1.56,.64,1),height .3s cubic-bezier(.34,1.56,.64,1),border-radius .3s,background .25s,mix-blend-mode .2s;
}
How to use Snap-to-Link Cursor
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.