How to create text knockout effect with gradient lava lamp?

[delicate forum]

Does the text specifically have to be in Three? My first inclination would be to use some fixed-size div with a white background and then use color: rgba(0,0,0,0); to make the text fully transparent, then just position that div over your lava lamp.

[delicate forum]

Failed in what way? What was your hope/expectation and what happened?

I see blue text on a black background (which I presume is actually the foreground) and blue text on a white background (likewise)? Which of those is wrong and why? Can you put up a JSFiddle showing the effect you get?

I may be a little confused — that code explicitly sets colors for both light and dark modes?

    <h1 class="text-8xl font-extrabold
                         tracking-tight leading-none
             text-black bg-white mix-blend-screen
             dark:text-white dark:bg-neutral-900 dark:mix-blend-multiply"

If you don't want the external rectangle to be a different color, why are you setting it to different colors? (bg-white vs. bg-neutral-900). Backing up just a little bit — what do you want the behavior to be in dark mode, and what do you want it to be in light mode?

I guess, what artifacts? I see literally exactly that above. The surrounding color is dark on one side, white on the other?

(I promise, I'm not trying to be combative; I'm genuinely trying to understand the question and am terribly confused. :/ )

Ahhh! I see.

Subtle. Yeah, that makes sense.

[delicate forum]

Hrm. So, I admit that I know very very little about it, but I think the problem here might be with Svelte. It looks to me like the blend modes you're using are all RGB-based, rather than RGBA. If you use normal blend mode but manually force the text alpha to be zero, that should work.

(But I had a hard time figuring out how to use rgba colors in Svelte)

Yeah.

[delicate forum]

I'm not either. I feel like you shouldn't be doing any explicit blending at all here and just let the alpha handle it all but again, I don't know how I'd do that with those frameworks.

I think given that you're going for a lava-lamp look I'd use some exponential-falloff SDFs to do it and pass the positions of the blobs in as uniforms that get updated over in the main code every frame.

[delicate forum]

https://realtimevfx.com/t/lava-lamp-with-raymarching-signed-distance-functions-in-unity/1758 is very close to what you want particularly geometrically.

[analog girder]

same

Ermmmmmm

[analog girder]

same )

if I do that, I get this: