Get everything for $99, lifetime

Components

Ripple Grid

Free
Tap to ripple

Installation

FreeNo license required.
npx shadcn add https://useplanes.com/r/ripple-grid.json
import { RippleGrid } from "@/components/ui/RippleGrid";

<RippleGrid
  columns={8}
  rows={5}
  nodeSize={1.2}
  autoInterval={2200}
  onRipple={({ source }) => {
    if (source === "user") {
      navigator.vibrate?.(8);
      analytics.track("ripple_grid_tap");
    }
  }}
/>

Use cases

  • Empty-state canvas

    Reward exploration on otherwise-quiet states (no notifications, search empty, etc.).

  • Sign-in / hero background

    Subtle ambient motion behind a centered card without competing for attention.

  • 404 / not-found page

    Make a dead end feel intentional and clickable.

  • Status / health page

    Quiet ambient grid behind uptime tiles that doesn't pull focus from the data.