Making a gradient border feel simple

I wanted something that felt polished enough for a modern interface without pulling in a heavy animation library. The result is a simple component you wrap around existing content, while LiveStroke handles the border animation.

The tricky part wasn't making a gradient move. It was making the effect flexible enough to actually use: stroke size, speed, opacity, shadows, border radius, custom colors, TypeScript, SSR, and arbitrary children.

I kept the public API intentionally small, while putting most of the complexity underneath it.

I wanted people to be able to experiment with the effect, so the Playground supports both presets and custom gradients.

Custom colors are simply passed as an array of hex values, which keeps the package simple while giving the Playground plenty of room to play.

One of the hardest bugs came from the Playground itself. Some controls would randomly stop responding, sliders wouldn't drag and buttons wouldn't click.

The problem wasn't the controls. I was keeping two screens mounted during the transition, and the invisible screen could end up sitting above the active one and stealing the interaction.

Unmounting the inactive screen fixed the interaction, but also broke the transition.

So instead, I kept both screens mounted during the animation and disabled pointer-events and visibility on the outgoing screen once the transition finished. The animation stayed smooth, without leaving an invisible layer over the UI.

The final stretch was mostly small things that made the whole experience feel finished: accepting hex values pasted without #, fixing an overflowing segmented-control pill, and cleaning up the generated JSX for larger gradients.

LiveStroke eventually went from a Playground experiment to a real npm package, with ESM and CJS builds, TypeScript declarations, React as a peer dependency, and a proper cleanup before shipping.

LiveStroke v0.3.0 now includes custom gradients, the reusable segmented control, and a Playground that generates the code you'd actually use.

As of September 2026, it has crossed 500+ npm downloads.