SatoriUI
Back to Backgrounds

Repelling Grid

An interactive dot-grid background whose dots move away from the cursor.

Updated Added Changelog

motion

Preview

Move the cursor. Click for ripples.

Installation

pnpm dlx shadcn@latest add @satoriui/repelling-grid

Adds components/satori-ui/repelling-grid.tsx to your project and installs its dependencies.

Usage

app/page.tsx
import RepellingGrid from "@/components/satori-ui/repelling-grid";
export default function Example() {
  return (
    <RepellingGrid className="h-[480px] bg-black text-white">
      <div className="flex h-full items-center justify-center">Your content</div>
    </RepellingGrid>
  );
}

Examples

On a light section

Give it a light background class and a dark colour, and raise brightness a little.

On a light section

Swap the background class and pick a dark colour.

In a brand colour

Any CSS colour works for the dots and lines, including a theme variable.

Signal acquired

Props

children

Content shown over the grid. It fills the grid, so lay it out yourself, for example with flex centring.

TypeReact.ReactNode
className

Classes for the wrapper. The grid fills it, so give it a height. Its background shows through the grid.

Typestring
color

Colour of the dots and lines, as any CSS colour, including a theme variable. Pick the colour you would use for text on this background.

TypestringDefault"currentColor"
brightness

Multiplies the opacity of dots, lines and glow. Values from 0.5 to 2 work well.

TypenumberDefault1.0
reducedMotion

"user" follows a surrounding MotionConfig, then the visitor's reduce-motion setting. "always" and "never" force the calm or the full version.

Type"user""always""never"Default"user"

Also takes every <div> prop except color.

Reduced motion

Repelling Grid follows the visitor's “reduce motion” device setting on its own: movement, blur and looping effects stop, and fades stay. Use the Reduced motion button on the preview to see that version. To decide yourself, set the reducedMotion prop on one instance, or wrap a whole section or app in Motion's MotionConfig.

app/page.tsx
// Follows the visitor's device setting (the default, "user")
<RepellingGrid>…</RepellingGrid>
// Always the calm version, or always full motion
<RepellingGrid reducedMotion="always">…</RepellingGrid>
<RepellingGrid reducedMotion="never">…</RepellingGrid>
// Or for everything inside, with Motion's MotionConfig
import { MotionConfig } from "motion/react";
<MotionConfig reducedMotion="always">
  <RepellingGrid>…</RepellingGrid>
</MotionConfig>
PreviousKinetic GridBackgroundsNextKeyboard UIShowcases