<style>
* { cursor: none !important; }
#custom-cursor {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: flex-start;
transition: opacity 0.1s ease;
will-change: transform;
transform: translate(0, 0);
}
/* SVG-стрелка (как на Mac) */
.cursor-arrow svg {
display: block;
width:36px;
height: 36px;
}
/* Лейбл с именем */
.cursor-label {
background: #252525;
backdrop-filter: blur(8px);
color: #f0f0f5;
padding: 6px 12px 6px 12px;
border-radius: 30px;
font-size: 13px;
font-weight: 450;
letter-spacing: 0.2px;
margin-left: 6px;
margin-top: 2px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
font-family: 'Inter', system-ui, sans-serif;
line-height: 1.4;
}
.cursor-label::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: #FE4F18;
border-radius: 50%;
margin-right: 6px;
flex-shrink: 0;
}
#custom-cursor.hidden {
opacity: 0 !important;
transition: opacity 0.15s;
}
</style>
</head>
<body>
<div id="custom-cursor">
<div class="cursor-arrow">
<svg width="36" height="36" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4 L18 10 L12 12 L10 18 L4 4 Z" fill="#252525" stroke="#ffffff" stroke-width="1.5" stroke-linejoin="round"/>
</svg>
</div>
<div class="cursor-label">SMOK</div>
</div>
<script>
(function() {
const cursor = document.getElementById('custom-cursor');
const dot = cursor.querySelector('.cursor-arrow');
let posX = -100, posY = -100;
let cursorVisible = false;
function updateCursorPosition(x, y) {
posX = x;
posY = y;
cursor.style.transform = `translate(${x}px, ${y}px)`;
}
function showCursor() {
if (!cursorVisible) {
cursorVisible = true;
cursor.style.opacity = '1';
}
}
function hideCursor() {
if (cursorVisible) {
cursorVisible = false;
cursor.style.opacity = '0';
}
}
function onMouseMove(e) {
const x = e.clientX;
const y = e.clientY;
updateCursorPosition(x, y);
showCursor();
}
function onMouseLeave() {
hideCursor();
}
function onMouseEnter() {
if (posX >= 0 && posY >= 0) {
showCursor();
}
}
function onTouchStart(e) {
hideCursor();
}
function init() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseleave', onMouseLeave);
document.addEventListener('mouseenter', onMouseEnter);
document.addEventListener('touchstart', onTouchStart, { passive: true });
document.addEventListener('touchmove', (e) => {
hideCursor();
}, { passive: true });
cursor.style.opacity = '0';
cursorVisible = false;
}
init();
})();
</script>
