custom-cursor

Summary

A fixed 70px circular cursor with an orange outline and a translucent grey fill that follows the pointer everywhere on the page. Over portfolio cards (.work-item) it scales up and reveals a "View / Work" label inside the disc. The native cursor is hidden (body { cursor: none }) on desktop and restored below 991px.

HTML structure (minimal)

<div class="cursor-wrapp">
  <div class="cursor-emmbed w-embed">
    <style> .cursor-wrapp { pointer-events: none; } </style>
  </div>
  <div data-w-id="darkyn-cursor" class="cursor">
    <div class="project-cursor-text">
      View<br>Work
    </div>
  </div>
</div>

Key SCSS tokens

body {
  cursor: none;                      // hide system cursor on desktop
}
.cursor-wrapp {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cursor {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid var(--default);  // #dc5f00
  background-color: #a9a9a980;       // translucent grey
  mix-blend-mode: normal;
  opacity: 0;                        // revealed by IX2 once mouse moves
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
}
.project-cursor-text {
  opacity: 0;
  text-align: center;
  text-transform: uppercase;
}

// Restore native cursor on touch / small viewports
@media screen and (max-width: 991px) {
  body { cursor: auto; }
}

Animation logic

// Webflow IX2 binds:
//   - a mousemove listener that translates .cursor to the pointer position
//   - hover-in/out timelines on every .work-item that scale .cursor up
//     and fade .project-cursor-text from 0 → 1.
//
// To rebuild without Webflow:
//   const cursor = document.querySelector('.cursor');
//   document.addEventListener('mousemove', (e) => {
//     cursor.style.transform = `translate(${e.clientX - 35}px, ${e.clientY - 35}px)`;
//     cursor.style.opacity = 1;
//   });
//   document.querySelectorAll('.work-item').forEach((el) => {
//     el.addEventListener('mouseenter', () => cursor.classList.add('on-work'));
//     el.addEventListener('mouseleave', () => cursor.classList.remove('on-work'));
//   });
//   // .cursor.on-work { width: 110px; height: 110px; }
//   // .cursor.on-work .project-cursor-text { opacity: 1; }

Notable details

• cursor-wrapp is a fullscreen flex container that positions the cursor element via position: absolute inside it — IX2 then drives translate values rather than left/top, so movement runs on the GPU.
• The cursor lives at z-index 9999 and is pointer-events: none so it never intercepts clicks.
• Native cursor is fully hidden via cursor: none on body. If JS fails for any reason the user is left without a cursor — the template mitigates this by restoring cursor: auto below 991px (touch devices) but not for desktop. Keep this in mind when porting.

Use when

• Cinematic portfolio / agency sites where you want immediate tactile feedback on interactive media.
• Pages with a small set of "primary" interactive elements (project cards, hero CTA) where a contextual cursor is meaningful.

Caveats

• Hides the native cursor with no JS fallback — degrade carefully if you remove the IX2 runtime.
• Custom cursors can fail accessibility audits; pair with a prefers-reduced-motion opt-out and a way to re-enable the system cursor.