Highlight Grid Hover

A bordered grid of labelled cells with a colored highlight block that glides and resizes onto whichever cell the cursor is over.

Open in

highlight-grid-hover-demo

( html )

( css )

( javascript )

( gsap )

( scrolltrigger )

( react )

( next.js )

( three.js )

components/ui/highlight-grid-hover-demo.tsx

import { HighlightGridHover } from "@/registry/tween/highlight-grid-hover"

export function HighlightGridHoverDemo() {
  return <HighlightGridHover />
}

Installation


pnpm dlx shadcn@latest add https://tween-www.vercel.app/r/highlight-grid-hover.json

Usage

import { HighlightGridHover } from "@/components/ui/highlight-grid-hover"

<HighlightGridHover
  rows={[
    ["Design", "Build", "Ship"],
    ["React", "Next.js", "Three.js", "GSAP"],
  ]}
  colors={["#E24E1B", "#4381C1", "#04A777"]}
/>

Each inner array of rows becomes a row of cells. A single absolutely-positioned highlight block reads the hovered cell's bounding box on every pointermove (resolved with elementFromPoint) and transitions its transform, width, height, and background color to match — so it appears to glide and morph between cells while the labels stay readable above it. On narrow containers the rows stack vertically (via container queries) and the highlight is hidden, leaving a clean stacked list. When prefers-reduced-motion: reduce is set the CSS transition is disabled so the highlight snaps instantly.

Props

Prop	Type	Default	Description
`rows`	`React.ReactNode[][]`	2 defaults	Each inner array is one row of cell labels.
`colors`	`string[]`	8 defaults	Highlight colors, cycled across the flattened cells.
`background`	`string`	`"#1a1a1a"`	Outer background color.
`foreground`	`string`	`"#ffffff"`	Label text color.
`borderColor`	`string`	translucent	Color of the grid lines.
`className`	`string`	—	Extra classes on the outer container.

ASCII Grid Hover Infinite Drag Gallery

On This Page

Installation Usage Props

Contribute