Ripple Effect
2021
Open-source library that implements a Material Design-inspired ripple effect on DOM elements in a simple, reusable way.
About the project
Ripple Effect is a lightweight JavaScript library that adds Material Design-inspired ripple interactions to web elements. It started as a small experiment in recreating the interaction without relying on an existing UI framework, and grew into a reusable open-source project.
The idea
I wanted to understand how this type of interaction could be implemented from scratch while keeping the library simple enough to use in any web project.
The result was a standalone library that could be attached to elements and provide the ripple effect without requiring a larger component library or framework.
Building a reusable library
Rather than keeping the effect as part of a single application, I packaged it as an npm library with its own documentation and website. Webpack was used to bundle the project, and the implementation was designed around the standard DOM APIs.
The project also became an opportunity to work with an open-source workflow, including documentation, issues, and contributions through GitHub.
Open source
Ripple Effect is publicly available on GitHub and has received contributions from the community, including 6 closed pull requests and 4 closed issues. The project has also accumulated 19 GitHub stars and averages around 50 weekly npm downloads.