/* Hide OS cursor (or put this on and scope it) */ body, body * { cursor: none !important; } /* Base cursor nodes */ .cursor-dot, .cursor-outline { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 100; will-change: transform, opacity; /* Position via CSS variables; JS only sets --x/--y */ --x: 50vw; --y: 50vh; --scale: 1; transform: translate3d(var(--x), var(--y), 0) translate(-50%, -50%) scale(var(--scale)); } /* Dot */ .cursor-dot { width: 8px; height: 8px; border-radius: 9999px; background: #fff; /* no transform transition => smooth rAF movement */ transition: background 120ms ease, opacity 120ms ease; } /* Outline */ .cursor-outline { width: 36px; height: 36px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.45); transition: border-color 160ms ease, opacity 160ms ease; } /* Link / Press states (just changes scale var + colors) */ .cursor-dot.is-link { --scale: 1.6; background: #7de3ff; } .cursor-outline.is-link { --scale: 1.12; border-color: rgba(125,227,255,.9); } .cursor-dot.is-down { --scale: 0.9; }