Попытка создать эффект тропы, когда мышиный указатель движется ⇐ Javascript

[Anonymous]

Я пытаюсь создать эффект «тропа» мыши на движения мыши. />https://drive.google.com/file/d/1ut8fwv ... q3/preview
то, что я пробовал:

я попробовал сделать анимацию с Html, coss, c, coss. Но анимация не похожа на анимацию, которую я хочу. Что я должен изменить в моем коде ниже, чтобы заставить его работать?

Код: Выделить всё

Neon Cursor Slice


body {
background: #0a0a0a; /* black for neon contrast */
overflow: hidden;
margin: 0;
}
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 50;
}



Neon Cursor Slice ⚡



const canvas = document.getElementById("cursorSlice");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let mouse = { x: 0, y: 0 };
let trail = [];

window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});

document.addEventListener("mousemove", (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
trail.push({ x: mouse.x, y: mouse.y, time: Date.now() });
});

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

const now = Date.now();

// Rainbow gradient for neon slice
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop("0", "#ff00ff");
gradient.addColorStop("0.25", "#00ffff");
gradient.addColorStop("0.5", "#00ff00");
gradient.addColorStop("0.75", "#ffff00");
gradient.addColorStop("1", "#ff0000");

ctx.strokeStyle = gradient;
ctx.lineWidth = 2; // thinner slice
ctx.lineCap = "round";

// Glow effect
ctx.shadowColor = "#00ffff";
ctx.shadowBlur = 20;

ctx.beginPath();
for (let i = 0; i < trail.length; i++) {
const point = trail[i];
const age = now - point.time;

if (age > 800) {
trail.splice(i, 1);
i--;
continue;
}

if (i === 0) {
ctx.moveTo(point.x, point.y);
} else {
ctx.lineTo(point.x, point.y);
}
}
ctx.stroke();

requestAnimationFrame(animate);
}

animate();

Подробнее здесь: https://stackoverflow.com/questions/797 ... nter-moves