InteractiveGrid
A grid that responds to the pointer, with the density declared rather than tuned in CSS.
@luc/ui/motionLive preview
A pointer-reactive field with a soft edge; under reduced motion it becomes a static grid.
Move the pointer
<div className="relative h-48 overflow-hidden rounded-xl">
<InteractiveGrid cell={26} radius={180} fade />
<div className="relative grid h-full place-items-center">
<Text variant="label">Move the pointer</Text>
</div>
</div>Other configurations
The same primitive, arranged differently. Each snippet is printed from the props its preview above was rendered with.
Dots, larger cells
Dots at a larger cell read as a surface texture rather than as graph paper.
Move the pointer
<div className="relative h-40 overflow-hidden rounded-xl">
<InteractiveGrid cell={44} radius={140} variant="dots" fade />
<div className="relative grid h-full place-items-center">
<Text variant="label">Move the pointer</Text>
</div>
</div>Still and wide
No drift and a wide radius: the field only exists where the pointer is.
Move the pointer
<div className="relative h-40 overflow-hidden rounded-xl">
<InteractiveGrid cell={26} radius={260} drift={false} />
<div className="relative grid h-full place-items-center">
<Text variant="label">Move the pointer</Text>
</div>
</div>Usage
import { InteractiveGrid } from "@luc/ui/motion";<div className="relative h-48 overflow-hidden rounded-xl">
<InteractiveGrid cell={26} radius={180} fade />
<div className="relative grid h-full place-items-center">
<Text variant="label">Move the pointer</Text>
</div>
</div>API
| Export | Kind | Signature |
|---|---|---|
InteractiveGrid | 6 documented props | ({ className, cell, variant, radius, drift, fade, interactive, ...props }: InteractiveGridProps) => import("@types/react").JSX.Element |
InteractiveGrid props
Type: InteractiveGridProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
cell? | number | undefined | — | Cell size in px. |
drift? | boolean | undefined | — | Let the grid drift slowly on its own. Off under `functional`/`none`. |
fade? | boolean | undefined | — | Soft-edge the whole field so it never ends on a hard line. |
interactive? | boolean | undefined | — | Track the pointer. Turn off for print or a purely decorative field. |
radius? | number | undefined | — | Radius, in px, of the pointer-reactive highlight. |
variant? | "lines" | "dots" | undefined | — |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Surfaces
Panels that respond to a pointer, a scroll or a state change.
Related