Ripple
Installation
Run the following command:
npx magicui-cli add rippleUpdate tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
},
keyframes: {
ripple: {
"0%, 100%": {
transform: "translate(-50%, -50%) scale(1)",
},
"50%": {
transform: "translate(-50%, -50%) scale(0.9)",
},
},
},
},
},
};Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mainCircleSize | number | 210 | The size of the main circle in pixels |
| mainCircleOpacity | number | 0.24 | The opacity of the main circle |
| numCircles | number | 8 | The number of ripple circles to render |