I’m trying to get my website working with as little client-side JS as possible (currently none!), I’m running it currently with Svelte, Bun, and Rust (as a native module for a little perf boost).

I found a dynamic equation in TypeScript here that describes a function I’d like to use, and considering it’s only math, I have implemented a prehistoric version of it, in CSS, here.

Now, I completely understand that this is a bad and terrible idea, completely comparably over-complicated with a marginal (at best) boost in performance or compatibility, however, I have set myself on this path and have already spent around 7 hours over the last 2 days trying to figure this issue out. I cannot tell if I have fallen victim to the Sunk Cost fallacy or if I am just a stubborn developer, however I feel I am just one wrong line of code away from pulling this off. Currently, the issue seems to root at the fact that the animation delta actually doesn’t seem to change the variable- thus causing the list of calc() invocations to not occur and thusly the process to not change how things are displayed.

I’ve tried a few solutions, mainly concerning animating gradients behind the text, but I found them all to either not work or to be far too choppy for the look I’m going for; if you have a solution or some suggestion that is effectively a rewrite that still does not use client-side JS I’ll accept that as well, though I feel unless I’m vastly misunderstanding something here I should be able to pull this off with just a few changes that I can’t think of.