# InteractiveGridPattern

> SVG grid of squares that highlight on hover with smooth fade transitions.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: grid, pattern, interactive, hover, svg, background
- Docs: https://fancy-ui.rama.app/docs/components/interactive-grid-pattern
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/interactive-grid-pattern

## Import

```svelte
<script lang="ts">
  import { InteractiveGridPattern } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { InteractiveGridPattern } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `squaresClassName` | `string` | — | Additional CSS classes for individual squares |
| `strokeClassName` | `string` | `"stroke-gray-400/30"` | Additional CSS classes controlling the square outline color |
| `width` | `number` | `40` | Width of each square in pixels |
| `height` | `number` | `40` | Height of each square in pixels |
| `squares` | `[number, number]` | `[24, 24]` | Grid dimensions as [columns, rows] |
| `interactive` | `boolean` | `true` | Whether squares respond to hover; when false, renders a static graph-paper grid with no per-rect listeners |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { InteractiveGridPattern } from "fancy-ui-svelte";
</script>

<div
	class="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-lg border bg-neutral-950"
>
	<InteractiveGridPattern
		class="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
	/>
	<p class="z-10 text-lg font-medium text-neutral-400">Hover over the grid</p>
</div>
```

### Colored Variant

Custom hover color.

```svelte
<script lang="ts">
	import { InteractiveGridPattern } from "fancy-ui-svelte";
</script>

<div
	class="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-lg border bg-neutral-950"
>
	<InteractiveGridPattern
		width={30}
		height={30}
		squares={[30, 20]}
		squaresClassName="hover:fill-blue-500/30"
		class="[mask-image:radial-gradient(350px_circle_at_center,white,transparent)]"
	/>
	<p class="z-10 text-lg font-medium text-neutral-400">Blue hover effect</p>
</div>
```

### Static Graph Paper

Non-interactive grid with no per-rect listeners, for hard-edge art directions.

```svelte
<script lang="ts">
	import { InteractiveGridPattern } from "fancy-ui-svelte";
</script>

<div
	class="relative flex h-96 w-full items-center justify-center overflow-hidden rounded-lg border bg-white"
>
	<InteractiveGridPattern interactive={false} strokeClassName="stroke-black/40" />
	<p class="z-10 text-lg font-medium text-black">Static graph paper — no hover listeners</p>
</div>
```