Docs
Ripple
Ripple
An animated ripple effect typically used behind elements to emphasize them.
Ripple
Installation
npx nyxbui@latest add rippleAdd the following animations to your tailwind.config.ts file:
// tailwind.config.ts
module.exports = {
theme: {
extend: {
animation: {
ripple: "ripple 3400ms ease infinite",
},
keyframes: {
ripple: {
"0%, 100%": {
transform: "translate(-50%, -50%) scale(1)",
},
"50%": {
transform: "translate(-50%, -50%) scale(0.9)",
},
},
},
},
},
};