# Interactive Grid Hero — Skecher UI

A full-page field of responsive square cells that softly round and brighten within a focused radius around the cursor.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/interactive-grid-hero
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
import { InteractiveGridHero } from "@/components/ui/interactive-grid-hero";

export default function InteractiveGridHeroExample() {
  return (
    <InteractiveGridHero
      cellSize={72}
      gap={4}
      proximity={4.35}
      effects={{
        cornerRadius: 20,
        inset: 5.5,
        restingOpacity: 0.72,
      }}
      spring={{ stiffness: 520, damping: 38, mass: 1 }}
    />
  );
}
```

## Source files

- components/ui-components/interactive-grid-hero.tsx — Interactive Grid Hero component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/interactive-grid-hero
- Registry item with complete source: https://skecher-ui.com/r/interactive-grid-hero.json
- Component AI context: https://skecher-ui.com/llms/interactive-grid-hero