Hey friends,

Why didn't the light rain hit the target?

Because it just mist.

(Seriously though, we could use some rain!)

Things I Made

Who doesn't like lava lamps? Ok, ok, maybe the real ones are a bit retro, but I can guarantee you've see the effect in several places around the web as a background element.

The easiest way to achieve this effect is to take some circles, animate them, and then apply heavy amounts of blurring. This creates the gradients as the orbs move around ...

You CAN create this effect in SVG or CSS using filters, but they're notoriously CPU-intensive to compute. Large-scale applications (think full-screen background) of this effect will lead to stuttering and performance issues.

But you know what's good at this kind of math? The GPU. If we draw the circles on a canvas element, animate them, and then pass them to the Black Magicks of Shaders, which is a special (and deeply arcane) way to talk directly to the GPU, we can make a more performant lava lamp effect. The shader helps the GPU run one formula per pixel (which it's really good at) as a Gaussian-weighted blend that figures out what color it is by how far away it is from the 'orbs' and what the color blend would be at that point.

Speaking of color blends, if you've ever done a gradient in sRGB, you know that the 'middles' can get muddy. That's why you'll often see colors converted to linear RGB BEFORE the color math starts to happen. This gives us more 'luminous' feeling colors for our shader, so we get brigher colors, not muddy colors.

Alright, enough talking, go check out the effect!

Interesting Web Bits 🍜

Web Stuff

• They released Angular 22 with devs declaring, "...this was the first time I looked at an Angular directive and didn’t want to wash my eyes out with bleach."
• An approachable intro to how LLMs work.
• TanStack releases their own take on MCP implementation.
• Aave spent quite a bit of time and effort replicating liquid glass with WebGL and displacement maps. Pretty slick, pretty complicated.
• Part-legit, mostly satire, Li Zhang created performative-ui to showcase the common overconfidence UI signals from AI companies (and hey look, it uses gradient orbs/lava lamps!)
• Obj.js is sorta like modernizr, but for device performance and capability.

Other Stuff

• A fun look at building game graphics like it's 1993.
• More than you ever wanted to know about pancakes.
• "My thought was, if reading this wasn't worth your time, why is it worth mine?"

👽 Weird, 📺 Watch, and 🎮 Play

• 🎮 Games disguised as a spreadsheet
• 🎮 Adventure puzzles await in Soulbound