Future UI

Pulse Grid

✦ Effects

Dot grid background with click-spawned expanding ripples and wave interference.

backgroundcanvasgridrippleanimationinteractivedots

No preview available

Canvas 2D ~ Click anywhere to spawn ripples

Controls

#8b5cf6
28
1.5
200
3
6

Effects / React Component

About Pulse Grid

Dot grid background with click-spawned expanding ripples and wave interference.

Category Effects
Framework React + TypeScript
Tags background, canvas, grid, ripple, animation, interactive, dots

Install Pulse Grid in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/pulse-grid.json?key=YOUR_LICENSE_KEY"

Usage example

import { PulseGrid } from './PulseGrid';

export default function Example() {
  return (
    <div style={{ width: '100%', height: 400, position: 'relative' }}>
      <PulseGrid accentColor="#8b5cf6" dotSpacing={28} rippleSpeed={3} />
    </div>
  );
}