PixelPilot: Instructions file for GitHub Copilot

UI/UX Custom Cursor 2026

Custom cursors, magnetic buttons, and cursor-based interactions for Luxury and Expressive design languages. Polish that makes a site feel hand-crafted. Never use on Technical or Warm systems — cursor tricks frustrate data-heavy UIs.

---

WHEN TO USE CUSTOM CURSORS

Language	Custom cursor?	Type
Luxury	✅ Yes	Minimal dot + border ring
Expressive	✅ Yes	Vivid blob, color-shift, large
Editorial	Optional	Subtle crosshair or line cursor
Minimalist	Optional	Tiny dot only, very subtle
Premium Modern	❌ No	Functional — don't distract
Warm & Human	❌ No	Standard cursor = approachable
Technical	❌ No	Standard cursor = productivity

Rules:

• Always preserve the default cursor for interactive elements (links, buttons) — override back to pointer
• Never on mobile/touch — @media (pointer: fine) guards everything
• Never when prefers-reduced-motion: reduce — hide custom cursor, show default
• Custom cursor hides the native cursor with cursor: none on <body>

---

VARIANT 1 — LUXURY (Dot + Ring)

Tiny filled dot that moves exactly. Larger ring that follows with lag. Minimal, elegant, barely noticeable — that's the point.

<!-- Place directly after <body> opens -->
<div id="cursor-dot"  class="cursor-dot"  aria-hidden="true"></div>
<div id="cursor-ring" class="cursor-ring" aria-hidden="true"></div>

@media (pointer: fine) {
  /* Hide native cursor everywhere */
  * { cursor: none !important; }

  /* Restore pointer cursor on interactive elements
     (still cursor: none — but cursor-ring handles the visual) */
  a, button, [role="button"], label, select,
  input, textarea, .clickable { cursor: none !important; }

  .cursor-dot {
    position: fixed; top: 0; left: 0; z-index: 99999;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.1s, background 0.2s, width 0.2s, height 0.2s;
    will-change: transform;
  }

  .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 99998;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--text);
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    transition: transform 0.08s, width 0.3s var(--ease-luxury),
                height 0.3s var(--ease-luxury), opacity 0.3s, border-color 0.3s;
    will-change: transform;
  }

  /* Hover states — on interactive elements */
  body.cursor-hover .cursor-dot {
    width: 0; height: 0; background: transparent;
  }
  body.cursor-hover .cursor-ring {
    width: 56px; height: 56px; opacity: 0.25;
    background: color-mix(in srgb, var(--text) 5%, transparent);
  }

  /* Click state */
  body.cursor-click .cursor-dot  { transform: translate(-50%,-50%) scale(0.5); }
  body.cursor-click .cursor-ring { transform: translate(-50%,-50%) scale(0.8); }

  /* Inverted on dark backgrounds (if hero image is dark) */
  body.cursor-inverted .cursor-dot  { background: white; }
  body.cursor-inverted .cursor-ring { border-color: white; }
}

/* Disable on touch + reduced motion */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none !important; }
  * { cursor: auto !important; }
}