a ghost cursor that appears ontop of ur container

<script>
						function ghostCursor(options) {
						let hasWrapperEl = options && options.element;
						let element = hasWrapperEl || document.body;

						let width = window.innerWidth;
						let height = window.innerHeight;
						let cursor = { x: width / 2, y: width / 2 };
						let particles = [];
						let canvas, context;

						let baseImage = new Image();
						baseImage.src = "https://cur.cursors-4u.net/cursors/cur-9/cur818.cur";

						function init() {
						canvas = document.createElement("canvas");
						context = canvas.getContext("2d");
						canvas.style.top = "0px";
						canvas.style.left = "0px";
						canvas.style.pointerEvents = "none";
            canvas.style.zIndex = "10000";

						if (hasWrapperEl) {
						canvas.style.position = "absolute";
						element.appendChild(canvas);
						canvas.width = element.clientWidth;
						canvas.height = element.clientHeight;
						} else {
						canvas.style.position = "fixed";
						document.body.appendChild(canvas);
						canvas.width = width;
						canvas.height = height;
						}

						bindEvents();
						loop();
						}

						function bindEvents() {
						element.addEventListener("mousemove", onMouseMove);
						element.addEventListener("touchmove", onTouchMove, { passive: true });
						element.addEventListener("touchstart", onTouchMove, { passive: true });
						window.addEventListener("resize", onWindowResize);
						}

						function onWindowResize(e) {
						width = window.innerWidth;
						height = window.innerHeight;

						if (hasWrapperEl) {
						canvas.width = element.clientWidth;
						canvas.height = element.clientHeight;
						} else {
						canvas.width = width;
						canvas.height = height;
						}
						}

						function onTouchMove(e) {
						if (e.touches.length > 0) {
						for (let i = 0; i < e.touches.length; i++) {
						addParticle(e.touches[i].clientX, e.touches[i].clientY, baseImage);
						}
						}
						}

						function onMouseMove(e) {
						if (hasWrapperEl) {
						const boundingRect = element.getBoundingClientRect();
						cursor.x = e.clientX - boundingRect.left;
						cursor.y = e.clientY - boundingRect.top;
						} else {
						cursor.x = e.clientX;
						cursor.y = e.clientY;
						}

						addParticle(cursor.x, cursor.y, baseImage);
						}

						function addParticle(x, y, image) {
						particles.push(new Particle(x, y, image));
						}

						function updateParticles() {
						context.clearRect(0, 0, width, height);

						particles.sort(function (a, b) {
						return a.zIndex - b.zIndex;
						});

						for (let i = 0; i < particles.length; i++) {
						particles[i].update(context);
						}

						for (let i = particles.length - 1; i >= 0; i--) {
						if (particles[i].lifeSpan < 0) {
						particles.splice(i, 1);
						}
						}
						}

						function loop() {
						updateParticles();
						requestAnimationFrame(loop);
						}

						function Particle(x, y, image) {
						const lifeSpan = 40;
						this.initialLifeSpan = lifeSpan;
						this.lifeSpan = lifeSpan;
						this.position = { x: x, y: y };
						this.zIndex = 100;

						this.image = image;

						this.update = function (context) {
						this.lifeSpan--;
						const opacity = Math.max(this.lifeSpan / this.initialLifeSpan, 0);

						context.globalAlpha = opacity;
						context.drawImage(this.image, this.position.x, this.position.y);
						};
						}

						init();
						}
						</script><script>
						new ghostCursor();
						</script>