Installation
Run the following command
npx shadcn@latest add @aceternity/background-ripple-effectAdd this in your globals.css file
@theme inline {
--animate-cell-ripple: cell-ripple var(--duration, 200ms) ease-out none 1
var(--delay, 0ms);
@keyframes cell-ripple {
0% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0.4;
}
}
}Props
Background Ripple Effect Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
rows | number | 8 | Number of rows in the grid. | No |
cols | number | 27 | Number of columns in the grid. | No |
cellSize | number | 56 | Size of each square cell in pixels. | No |
DivGrid Props
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
rows | number | - | Number of rows in the grid. | Yes |
cols | number | - | Number of columns in the grid. | Yes |
cellSize | number | - | Size of each cell in pixels. | Yes |
borderColor | string | - | CSS color value for cell borders. | Yes |
fillColor | string | - | CSS color value for cell fill. | Yes |
clickedCell | { row: number; col: number } | null | null | The currently clicked cell coordinates. | No |
onCellClick | (row: number, col: number) => void | undefined | Callback function called when a cell is clicked. | No |
interactive | boolean | false | Whether cells respond to mouse interactions. | No |
className | string | undefined | Additional CSS classes to apply to the grid container. | No |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
