Spotlight Grid

A grid of dark tiles that share one light.

$149 once · every Pro piece

Customize

Light radius (px)

Columns

Min tile width (px)

Tile height (px)

Layout

notes

dense

The 1px gaps between tiles are the grid's own background, which carries a single radial light at the pointer, so neighbouring edges catch it together and warm toward the accent within about 160px while the faces pass a trace of it. The pointer moves two CSS variables on the root and nothing else; focusing a tile glides the light onto it.

Install

npx shadcn@latest add @obsyde/spotlight-grid

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { SpotlightGrid } from '@/components/obsyde/ember/spotlight-grid/SpotlightGrid';

export function Example() {
  return (
    <SpotlightGrid />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/spotlight-grid/SpotlightGrid.tsxcomponent
ember/spotlight-grid/spotlight-grid-demo.cssstyles
ember/spotlight-grid/spotlight-grid.cssstyles
ember/spotlight-grid/SpotlightGridDemo.tsxdemo
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`radius`Light radius (px)	`number`	`160`
`columns`Columns	`number`	`3`
`minTile`Min tile width (px)	`number`	`160`
`tileHeight`Tile height (px)	`number`	`148`
`layout`Layout	`'notes' \| 'dense'`	`'notes'`