> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactive Grid Pattern

> Interactive grid background pattern.

* **Location**: `sabo/src/components/ui/interactive-grid-pattern.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "160px" }}
      title="Grid Pattern"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
:root{--x:50%;--y:50%}
body{margin:0;background:#ffffff}
.bg{position:relative;height:140px;background-image:linear-gradient(#f3f4f6 1px,transparent 1px),linear-gradient(90deg,#f3f4f6 1px,transparent 1px);background-size:24px 24px}
.spot{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120px 60px at var(--x) var(--y), rgba(17,24,39,.16), transparent 60%),
  radial-gradient(40px 20px at calc(var(--x) + 50px) var(--y), rgba(17,24,39,.1), transparent 60%)}
.title{position:absolute;top:8px;left:0;right:0;text-align:center;color:#111827;font-size:14px;font-weight:600;letter-spacing:.2px;pointer-events:none}
</style></head><body>
<div id='bg' class='bg'><div class='spot'></div><div class='title'>Hover grid</div></div>
<script>
  const root=document.documentElement;
  const el=document.getElementById('bg');
  el.addEventListener('mousemove', (e)=>{
    const r=el.getBoundingClientRect();
    const x=((e.clientX - r.left)/r.width)*100;
    const y=((e.clientY - r.top)/r.height)*100;
    root.style.setProperty('--x', x+'%');
    root.style.setProperty('--y', y+'%');
  }, {passive:true});
</script>
</body></html>`}
    />
  </div>
</Frame>

<Info>
  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.
</Info>

## When to use

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

## Usage

```tsx sabo/src/components/ui/interactive-grid-pattern.tsx theme={null}
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

<ParamField path="width" type="number" default="40">
  Width of each grid square in pixels.
</ParamField>

<ParamField path="height" type="number" default="40">
  Height of each grid square in pixels.
</ParamField>

<ParamField path="squares" type="[number, number]" default="[24, 24]">
  Array specifying horizontal and vertical square count \[horizontal, vertical].
</ParamField>

<ParamField path="className" type="string">
  CSS classes applied to the SVG container element.
</ParamField>

<ParamField path="squaresClassName" type="string">
  CSS classes applied to individual grid squares (rect elements).
</ParamField>

## 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.
