Skip to main content
  • Location: sabo/src/components/ui/interactive-grid-pattern.tsx
Interactive Grid Pattern is a low-contrast, gently moving background. Use it behind hero/content blocks to add depth without pulling focus. Keep opacity subtle; disable animation if it competes with foreground content.

​
When to use

  • Add subtle depth to hero or section backgrounds without stealing focus.
  • Keep the highlight small and low-contrast for accessibility.

​
Usage

sabo/src/components/ui/interactive-grid-pattern.tsx
import { InteractiveGridPattern } from "@/components/ui/interactive-grid-pattern";

export function Example() {
  return (
    <div className="relative h-48 rounded-xl overflow-hidden">
      <InteractiveGridPattern width={24} height={24} squares={[24, 6]} />
      <div className="relative z-10 p-6">Content</div>
    </div>
  );
}

​
Key props

​
width
number
default:"40"
Width of each grid square in pixels.
​
height
number
default:"40"
Height of each grid square in pixels.
​
squares
[number, number]
default:"[24, 24]"
Array specifying horizontal and vertical square count [horizontal, vertical].
​
className
string
CSS classes applied to the SVG container element.
​
squaresClassName
string
CSS classes applied to individual grid squares (rect elements).

​
Styling tip

  • Adjust grid density and spotlight size to match your content contrast.
  • Ensure text on top maintains sufficient contrast; test in light and dark modes.