x-ripple

A delightful utility that adds an elegant ripple effect to elements, enhancing visual feedback and interactivity. With x-ripple, you can effortlessly elevate the user experience by providing a subtle animation when elements are interacted with. Create a more engaging and polished interface with the power of x-ripple.

Example:

<button x-html x-ripple>
  {/*
  <!-- Content goes here... -->
  */}
</button>

Config Example:

<button
  x-html
  x-ripple={{
    center: true,
    circle: true,
    color: "red",
    class: "my-class",
  }}
>
  {/* <!-- Content goes here... --> */}
</button>