Colors Original
A shader turned into a button. Hover speeds up the flow, a press surges it, and a scrim inside the shader keeps the label readable.
The study runs live under its video, in your browser, with its own controls, so you can switch the idea off and on and see what it does.
The flow button is a shader turned into a call to action. The pill shape comes from Backhouse, where a shader sits inside a pill as a window. The field inside is a sine domain warp, colored by a radial palette mix. Hover it, then press and hold.
The palette is only black and three steels: #e6eef2, #a8c8d8 and #5c7c8a. The mix uses negative weights, so it overshoots past the palette, and copper and amber appear in the field even though the palette has no warm color in it.
The obvious hover was to double the warp, the way the reference does. At button size that broke the field into fragments. So the hover speeds the flow up about four and a half times and lifts the exposure instead. A press surges it further, and the button scales down 2.5 percent. Hover changes time, not shape, and the shape stays calm while the light moves faster.
The label sits on a moving field, so its contrast changes every frame. A text shadow would read as a smudge. Instead the shader darkens an ellipse behind the label, computed in the same pass, so the words always sit on a quieter area of the field.
Every <a href> is draggable by default. Press it and move a few pixels, and the browser starts a native drag: it paints the URL under your cursor and fires pointercancel, which killed the surge halfway through. The button turns that behavior off in three places.
// an <a href> is natively draggable: press + move would paint the URL ghost and cancel the surgeon(btn, "dragstart", (e) => e.preventDefault());on(btn, "pointercancel", () => (pressed = false)); <a href={href} className="flowbtn" draggable={false}>It was checked with a real mouse next to a plain link: the plain link started a drag, the button started none, and the surge held through the whole press.