How Is That Flowing Light on My Homepage Actually Made? — A Tech Chat for Non-Programmers

A friend swiped open my personal site and stared at the light slowly swirling in the background for a while, then said, “Okay, that’s kind of neat — but this is just pure showing off, isn’t it.”

I said, “You’re half right. It is showing off. But what it’s actually showing off, I have to walk you through.”

Step One: That Light Isn’t a Video, It’s Ink Being Computed in Real Time

Let’s start with the premise: that light shifting and blending color with every mouse move isn’t a looping video clip, and it isn’t a GIF either. Your computer is calculating it live.

Picture dropping a single drop of ink into a bowl of clear water. How the ink spreads, swirls, and mixes with the water around it follows the laws of fluid dynamics — nobody drew that pattern ahead of time. That’s exactly what’s happening in the background: the page has a simplified fluid-dynamics solver baked into it (in the field it’s called Stable Fluids). Every time your cursor moves or the page scrolls, that’s equivalent to tapping the water — and the computer immediately works out, according to physics, how that drop of “ink” should spread and swirl.

So strictly speaking, no frame the page shows you right now will ever be shown identically again anywhere in the world — it’s water flowing on, never once repeating itself, never once standing still.

Step Two: Why It’s Hidden in an “Invisible Kitchen”

If a computation this heavy ran directly on the page’s main thread, the page would lag constantly — like a restaurant server trying to carry plates and cook at the same time. Chaos is the only possible outcome.

So this computation gets tucked away in an “invisible kitchen” (technically, a Web Worker): the front-of-house (the part of the page you actually see and click) only handles pouring tea and relaying your mouse movements. The real cooking — the fluid math — happens entirely on a separate thread in the back, undisturbed. Kitchen and dining room each stick to their own job, so the page stays smooth no matter what.

Step Three: Three Courses, So Everyone Gets Fed

Different computers and browsers have wildly different horsepower, so this system keeps three courses ready, from the fanciest down to the simplest fallback:

First course — WebGPU: taps the GPU’s compute power directly to run the fluid sim live, plus scatters a few hundred thousand glowing “sesame seed” particles that drift along with the current. This is the most elaborate version, like a Michelin chef cooking to order.
Second course — WebGL2: if the machine or browser can’t handle the first course’s firepower, the system quietly swaps in a lighter, older technique and recooks the same dish — same recipe, slightly plainer presentation, but the page never freezes.
Fallback course — plain CSS gradient: if neither of the first two can be served (some mobile browsers, or if you’ve turned on “reduce motion”), it falls back to a pre-made static gradient — same color palette, just not flowing anymore. Better to skip the motion than to leave the page unable to load at all.

All three steps switch automatically. You never notice the kitchen swapping dishes mid-service.

Step Four: The 3D “J” on the Homepage Isn’t a 3D Model At All

Now the spinning, glass-looking letter J on the homepage. This one’s even more interesting — it’s not a model built in modeling software and dropped onto the page. It’s pure math, guessed fresh, frame by frame.

Here’s how the “guessing” works: the shape of the letter J gets written as a handful of math formulas (technically called a “signed distance field” — in plain terms, “give me any point, and I can tell you how far that point is from the outline of J”). Then a bunch of virtual light rays get fired from the screen and inch forward step by step, each one repeatedly asking “how far am I from J’s surface now?” until it touches down — a technique called raymarching. Nowhere in this process is there a pre-sculpted model file. Every inch of J’s surface gets computed on the spot.

Once a ray hits the surface, there’s a glass-like finish layered on top: red, green, and blue each bend along a slightly different refraction angle — the same principle that lets a prism split white light into a rainbow (dispersion), which is why you can catch a faint rainbow fringe if you look closely at the letter’s edge. Add a Fresnel effect (“the more glancing the angle, the stronger the reflection”) on top, and it reads as actual glass rather than dead plastic. And here’s the neat part: the ambient color this “glass” reflects and refracts comes from the same palette as the flowing background — so when the site’s theme color changes, the J and the background shift together, like they’re living under the same sky.

Step Five: So, Is It “Pure Showing Off”

Back to my friend’s line.

There’s a story in the “Nourishing the Lord of Life” chapter of the Zhuangzi: the cook Ding butchers an ox for King Hui of Liang, every motion flowing, every stroke landing in time like music. The king watches, stunned, and asks how he mastered this. Ding answers with a line that’s outlived him by over two thousand years: “What I care for is the Way, which goes beyond mere skill.” What he loves isn’t the technique itself — it’s the sliver of the Way you touch once the technique has been practiced all the way through.

A personal site could run on a static background image and a cropped PNG for a logo — done in three minutes, and nobody would say a word about it. I went the long way around instead, making the browser compute fluid dynamics and ray tracing live. There’s no “return on investment” argument for that, honestly. My friend wasn’t wrong — it is pure showing off.

But wasn’t Cook Ding showing off too? You can butcher an ox with a straight cut just fine. He chose instead to practice until he could work “by spirit, not by sight.” Push a craft far enough, and “showing off” and “loving it for its own sake” turn out to be the same thing — not something done for an audience, but for yourself.

My friend thought about it for a second and said, “Fine. But that’s some tasteful showing off.”