use-scroll-fades: A Versatile React Hook for Scroll-Fade Indicators

I was recently working on a project that required scroll-fade indicators on a list of cards, and I couldn't find a library that did exactly what I needed without a lot of extra bulk. So, I decided to build my own solution and release my first npm package, use-scroll-fades.

The community has already provided some great feedback, which led to a major update in v2.1.0. We now have a cleaner mask-image implementation that works seamlessly with any background, whether it's a solid color, a gradient, or an image.

I'd love to get more thoughts on the hook and its features, especially on whether I'm following best practices. I'm also curious to know if this is a problem others have encountered and how they've solved it.

You can check out the new demo site and see how the mask-image approach works with different backgrounds: https://cosmicthreepointo.github.io/use-scroll-fades/

And the package is available on npm: https://www.npmjs.com/package/@gboue/use-scroll-fades