How can I add an animated custom cursor to my website?

[HellGames]

I would like to put an special and animated cursor in my website.
This is the cursor: https://youtu.be/UMdvufdewD8?si=0W0lr6mJfarAx3-y&t=11

But I don't know where I have to put the codes.

Can someone help me?

[Huptech-Web]

Hello @HellGames ,

Please add the below code to your theme code to create a custom cursor:

Add the below code to your theme.liquid before </body>

<div class="cursor"></div>
<div class="cursor2"></div>

<style>
.cursor {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid black;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(calc(-50% + 15px), -50%);
}

.cursor2 {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: black;
  opacity: .3;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .3s, height .3s, opacity .3s;
}
.cursor:empty, cursor2:empty{
  display:block;
}
</style>
<script>
// UPDATE: I was able to get this working again... Enjoy!
document.addEventListener('DOMContentLoaded', function () {
var cursor = document.querySelector('.cursor');
var cursorinner = document.querySelector('.cursor2');

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});

document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursorinner.style.left = x + 'px';
  cursorinner.style.top = y + 'px';
});

document.addEventListener('mousedown', function(){
  cursor.classList.add('click');
});

document.addEventListener('mouseup', function(){
  cursor.classList.remove('click')
});
});
</script>

[HellGames]

Hi,

It's not working.

[Huptech-Web]

Hi @HellGames 
Can you share the store URL so I can assist you with anything?