Background Ripple
An interactive background component consisting of a grid of cells that trigger a radial ripple animation upon interaction. Perfect for landing pages and hero sections.
Installation
npx raya-ui@latest add background-ripple-effectFile Structure
your-project
components
ui
background-ripple-effect
BackgroundRippleEffect.vue
API Reference
Props
fillbooleanfalseWhen true, the component ignores row/col props and automatically calculates the grid to fill its parent container.
cellSizenumber56The width and height (in pixels) of each interactive grid cell.
rowsnumber8Explicit number of horizontal rows. (Ignored if fill is true).
colsnumber27Explicit number of vertical columns. (Ignored if fill is true).
Ripple Grid
Click anywhere on the surface to see the effect
Settings
Auto-calculate grid coverage.
7
12
40px
source-code.vue
<script setup lang="ts">
import { BackgroundRippleEffect } from '@/components/ui/background-ripple-effect'
</script>
<template>
<div class="relative w-full h-[500px] overflow-hidden bg-background">
<BackgroundRippleEffect
:rows="7"
:cols="12"
:cell-size="40"
/>
<div class="relative z-10 flex items-center justify-center h-full pointer-events-none">
<h1 class="text-4xl font-bold tracking-tighter">Click the Grid</h1>
</div>
</div>
</template>