Effects Fancy Stable
InteractiveGridPattern
SVG grid of squares that highlight on hover with smooth fade transitions
Preview
svelte
<script lang="ts">
import { InteractiveGridPattern } from 'fancy-ui-svelte';
</script>
<InteractiveGridPattern width={60} height={60} />Installation
pnpm add fancy-ui-svelte
import { InteractiveGridPattern } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { InteractiveGridPattern } from 'fancy-ui-svelte';
</script>
<InteractiveGridPattern />Examples
Basic Usage
svelte
<script lang="ts">
import { InteractiveGridPattern } from "$lib/fancy-ui/interactive-grid-pattern";
</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 "$lib/fancy-ui/interactive-grid-pattern";
</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 "$lib/fancy-ui/interactive-grid-pattern";
</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>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 |
Links
Related components
An
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
Effects Stable
Bo
BorderBeam
Gradient beam that races around a container's border using a CSS offset-path animation, masked so only the border ring is painted, with configurable size, speed, anchor position, and gradient colors
Effects Stable
Co
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Effects Stable