Ripple Grid

Shaders 4

About

Here is Ripple Grid component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Ripple Grid to your project and fits it to your theme.

Code

How Ripple Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import RippleGrid from '@/components/ui/ripple-grid';

<div style={{position: 'relative', height: '500px', overflow: 'hidden'}}>
  <RippleGrid
    enableRainbow={false}
    gridColor="#0000FF"
    rippleIntensity={0.05}
    gridSize={10}
    gridThickness={15}
    mouseInteraction={true}
    mouseInteractionRadius={1.2}
    opacity={0.8}
  />
</div>


export default RippleGrid;