Components / Weight Grid

Weight Grid

A bento grid where the cell under the cursor takes area from its neighbours and the grid itself never changes size. Every track weight is divided by its axis’s sum, so the columns always total the same however hard the cursor pushes — PressureText’s normalisation, moved into two dimensions. Keyboard focus inside a cell weights it as hovering would, and on touch a tap selects a cell while a sideways drag scrubs.

Usage

import WeightGrid from '@/components/weight-grid'

<WeightGrid columns={4} rows={3} gain={1.1}>
  {cells}
</WeightGrid>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/weight-grid.json

Model

wᵢ′ = wᵢ · n / Σ wⱼ,   wᵢ = 1 + g·falloff(dᵢ)

n tracks on the axis · g gain · d distance in tracks

Props

Property	Type	Default	Description
`columns`	`number`	`4`	Number of column tracks. Whole numbers from 1; children flow into them.
`rows`	`number`	`3`	Number of row tracks. Whole numbers from 1.
`gain`	`number`	`1.1`	Extra weight the track nearest the cursor gains, before renormalising.
`cursorRadius`	`number`	`1.2`	Reach of the cursor's influence, in tracks.
`smoothing`	`number`	`0.075`	Share of the remaining distance a track closes per 60 fps frame, from 0 to 1. Timed by the clock, so it settles at the same speed at any refresh rate. Lower is slower to settle.
`falloff`	`Falloff`	`'smooth'`	Shape of the cursor's bump across its reach.
`gap`	`number`	`10`	Grid gap, in px.
`children`	`ReactNode`	—	The cells. Keyboard focus inside one weights it as hovering would; a tap or a sideways drag does the same on touch.