I was inspired by a tweet from disarto_max, showing a glassmorphism design that could be created using a CSS technique I saw in jh3yy's talk at Config in 2024.

I wanted to make every animation CSS-based. A challenge I encountered was creating the gradient border, which is typically achieved by placing a solid gradient behind the element and extending it slightly beyond the edges to simulate a border. The problem is that the low opacity means you see the full gradient, ruining the glassmorphism. I fixed this by creating an SVG mask with a matching border radius so only the outline is visible.

Once that was all working, I decided a few additional touches could make it even nicer, so used Maxwell Barvian's Number Flow library to animate the text.