Kunal's Build
← Back to Home

Magnetic Snap

Cursor snaps and distorts toward interactive elements like a magnet. Ultra-premium feel.

magneticinteractiveluxury
HTML
<!-- Paste before </body> -->
<div id="cursor-mag"></div>

<!-- Add data-magnetic to any element you want the cursor to snap toward -->
<button data-magnetic>Hover me</button>

How to Use

  1. Copy the HTML

    Add the HTML structure before your closing </body> tag

  2. Add the CSS

    Include the CSS in your stylesheet or <style> tag

  3. Include the JavaScript

    Add the JavaScript code in a <script> tag or external file

  4. Test it out

    Move your mouse to see the custom cursor in action!

Customization

Change Color

Update the color values in CSS to match your brand

#ec4899

Adjust Size

Modify width and height properties to scale the cursor

Animation Speed

Change transition duration values for faster/slower animations

Explore More Cursors

Dot + Ring

Classic two-layer cursor with a sharp dot and trailing ring. Clean and versatile.

Glow Orb

Soft glowing orb that pulses and leaves a luminous trail. Perfect for dark premium sites.

Crosshair

Precision crosshair cursor with animated targeting lines. Great for portfolio sites and games.