How to recreate this liquid blob masking cursor effect from landonorris.com?

Hey everyone!

I recently watched a YouTube video about https://landonorris.com/ , and honestly — the site looks incredible. But one thing really stood out to me: that liquid masking blob cursor effect.

I tried to recreate it myself, but the best I could do was a simple cursor that just reveals the image underneath.

I want to achieve an effect similar to what is on the website (of course not as complicated, but at least similar)

Has anyone here figured out how to make that smooth, blobby liquid cursor work? Or maybe you’ve seen a tutorial / codepen example that explains it?

Any tips or insights would be super hel

pful!

This is imperfect as hell. And this is not the ultimate solution. This is just an attempt to create something similar to the original.
Based on this topic: Chromatic aberration

For the reveal effect, the result texture is applied to the helmet’s material, with the UV coords computed in screen space.

Video:


Demo: https://codepen.io/prisoner849/full/ByjqVoQ

10 Likes

Wow, even for an imperfect version, it still looks stunning! But the most important thing for me is the cursor. Is it possible to use something like WebGL Fluid Simulation and then apply a mask so that wherever the fluid is, the image underneath can be seen?

Possibly, yes. I’ve never tried it.

This is not trivial… but you can try just recreate that example:

2 Likes