Skip to content

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.

More cursors components

← Browse all NudaUI components