Hit play to run the wipe. The controls change the angle, duration, colours, noise and grain, so you can push it around while it runs.
I wanted to take a stab at Vercel's new (vgpu library)[https://vgpu.sh/] and a loading state felt like a small enough excuse to start. Our loader at Tato already used a little gradient, I wanted to build on that by sweeping it away, with the content already sitting behind it.
I was also inspired by glimm.dev, which creates full screen colour wipes powered by a similar shader, but without actually revealing content behind it. I wanted the edge of the gradient itself to be the mask.
The canvas sits on top of the page and writes premultiplied alpha, so where the sweep has passed the alpha is zero and the real DOM shows through. Nothing gets hidden and re-shown. It was just covered.
The edge itself is dot(uv, dir) + bias, which gives a signed distance from a line at any angle. A band of fbm noise bends that line as it travels, and a four stop colour ramp fills in behind it, with its coordinates smeared by a second noise field so the stops marble into each other instead of striping. All of those values are knobs in the panel, which was really the point of building it. I wanted one shader I could tweak to get the perfect look and feel, so I built the controls into the shader.