When I set transparent=true it is not actually transparent

[reverseSosa]

I want to use this as a cursor effect throughout my website, so I import it into my Next js RootLayout, but the transparent true creates a background with cells(

[michaelbrusegard]

Have you tried to put a wallpaper behind it? I think the transparent effect is made for if you have content underneath the canvas element that you want to be visible. In your example it doesn’t look like you have anything behind the canvas which is why it looks like this :). Maybe I misunderstood. How have you placed the canvas element in relation to your other elements?

[reverseSosa]

I put the content for an example but when the canvas is under the content it stops working at all but if I increase the z index of the canvas it covers everything with a checkered background

Canvas z index 0:

canvas z index 50:

I also added for canvas position fixed top 0 left 0 so it would always be on the page but it didn't change anything

Maybe you can make it so that this background with cells is not there?)

[michaelbrusegard]

I don’t completely understand what you want to accomplish. Do you want to have a wallpaper behind the fluid simulation (that is what the transparent effect is mostly made for) or are you trying to have it on top of all react components. One problem with the canvas element is that it cant be a parent element, only a sibling element. I can try to look at the code for the transparency when I have time, but it may be that your issue is unresolvable

[reverseSosa]

Yes I want to use it on top of other components to create an effect like on this site https://lusion.co/

[michaelbrusegard]

I see, to get the canvas working when it is behind other components you need to pass the mouse events from that component to the canvas. In regards top having the canvas in front, I don’t know how to have components behind the canvas be visible since the transparent effect is mostly meant for having a wallpaper behind as far as I understand. lusicon.co was a very impressive and cool website :)

[reverseSosa]

On lusion website this cursor effect is under all, but above other canvases, how to achieve this?

[michaelbrusegard]

I don't know how they did it or what tools they used

[reverseSosa]

I came to the conclusion that this effect is achieved by applying a fluid shader to PlaneGeometry in THREE.js, in my case it will be react three fiber,
if you're interested, feel free to help me

[michaelbrusegard]

I am busy with my own projects right now, but good luck with learning three.js! I am gonna close this issue now. Hopefully you can make your website work the way you want to :)

[glk-hll]

@reverseSosa I have encountered the same problem as you. Have you solved it?