Magnetic Grid Snap
A copy-paste cursors component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
CursorsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-cur2-grid-snap" aria-hidden="true">
<span class="nuda-cur2-grid-snap__cell"></span>
<span class="nuda-cur2-grid-snap__cell"></span>
<span class="nuda-cur2-grid-snap__cell"></span>
<span class="nuda-cur2-grid-snap__cell"></span>
<span class="nuda-cur2-grid-snap__cell"></span>
<span class="nuda-cur2-grid-snap__cell"></span>
<span class="nuda-cur2-grid-snap__cell"></span>
<span class="nuda-cur2-grid-snap__cell"></span>
</div>CSS
.nuda-cur2-grid-snap {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 6px;
width: 100%;
max-width: 200px;
margin: 0 auto;
}
.nuda-cur2-grid-snap__cell {
aspect-ratio: 1;
border-radius: 6px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.02);
cursor: pointer;
transition: transform .18s cubic-bezier(.34,1.56,.64,1),border-color .18s ease,box-shadow .18s ease;
}
.nuda-cur2-grid-snap__cell:hover {
transform: scale(1.15);
border-color: #e4ff54;
box-shadow: 0 0 0 2px rgba(228,255,84,.25),0 6px 14px -8px rgba(228,255,84,.4);
}
@media (prefers-reduced-motion:reduce) {
.nuda-cur2-grid-snap__cell {
transition: none;
}
}
How to use Magnetic Grid Snap
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.