Trouble having an interactive movable GIF not overlay the rest of the page

Hello there!

I’m having trouble getting a movable GIF overlay to work propperly.
The effect I’m going for is inspired by this page: https://www.lift-type.fr/shop/typography/plage/
The GIF (the crab in this case) is on top of everything and you can move it freely with your mouse.

The library I’m using to get this effect is https://interactjs.io/ since they have pretty much what I need.
To make the effect work I have to create a fullscreen div with another div inside that’s being connected to the library so I can move it. The problem that occurs now is, that I can’t interact with anything below the fullscreen div. I’ve tried putting custom css (pointer-events: none) on this div, but this affects the GIF-div inside too so I can’t interact with it anymore.

Is there any way I can make the big div not clickable but the small one inside clickable?
And if this is a dead end, what other possibilities do I have to get the effect?

Thanks for your help,
Nik

Read Only: https://preview.webflow.com/preview/iso8000-ab4005?utm_medium=preview_link&utm_source=designer&utm_content=iso8000-ab4005&preview=3d1aa3fd11a264567c9657e69f85f18e&workflow=preview

Preview: https://iso8000-ab4005.webflow.io/