Backgrounds
Interactive Grid Pattern
A grid of cells that lights up under the pointer.
The Interactive Grid Pattern renders its lattice as real SVG cells rather than a pattern fill, so each cell can answer the pointer on its own. Hovering a cell fills it; leaving empties it again.
The viewBox is sized to the cell lattice and drawn with slice, so cells stay square at any container ratio instead of stretching to fit.
Usage
Hover the grid
Every cell lights up under the pointer
<template>
<div class="relative h-64 w-full overflow-hidden rounded-xl border border-default bg-default">
<MInteractiveGridPattern
:width="48"
:height="48"
:squares-x="30"
:squares-y="30"
/>
<div class="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
<h3 class="text-2xl font-bold text-highlighted">
Hover the grid
</h3>
<p class="max-w-xs text-sm text-muted">
Every cell lights up under the pointer
</p>
</div>
</div>
</template>
Examples
Customize
Customize
Color
Height40
Hover Color
Squares X24
Squares Y24
Width40
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 40 | Cell width, in pixels. |
height | number | 40 | Cell height, in pixels. |
squaresX | number | 24 | Columns of cells. Overflow beyond the container is cropped. |
squaresY | number | 24 | Rows of cells. Overflow beyond the container is cropped. |
color | string | 'var(--ui-border)' | Colour of the cell strokes. |
hoverColor | string | 'var(--ui-bg-elevated)' | Fill of the cell under the pointer. |
class | string | '' | CSS classes to apply to the <svg>. The element is absolutely positioned, so give the parent a height. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.interactiveGridPattern in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | interactive-grid-pattern absolute inset-0 h-full w-full |
square | - | transition-colors duration-100 |