Components / Sonar List

Sonar List

Click the list and a ping sweeps outward from where you clicked. A row at distance d is struck at t = d/c — a propagation time, not a per-index stagger, so the rows nearest your click ring first wherever they sit in the list. Each row is then its own damped oscillator, and their frequencies rise down the list so it rings as a chord. Press again mid-ring and the kicks add; the row under your press answers at once.

Usage

import SonarList from '@/components/sonar-list'

<SonarList speed={900} frequency={9} damping={0.22}>
  {rows}
</SonarList>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/sonar-list.json

Model

xᵢ(t) = Σₖ Δvₖ·h(t − dᵢₖ/c),   h the damped impulse response

dᵢ distance to the row’s nearest edge · c wavefront speed · ω rises down the list by spread · strikes superpose

Props

Property	Type	Default	Description
`speed`	`number`	`900`	Wavefront speed, in px/s. A row is struck at t = d/c, d measured to its nearest edge.
`frequency`	`number`	`9`	Base angular frequency ω, rad/s.
`spread`	`number`	`0.35`	How much ω rises down the list, so it rings as a chord.
`damping`	`number`	`0.22`	Damping ratio ζ. Under 1 the row rings; over 1 it just returns.
`amplitude`	`number`	`14`	Peak displacement of a row struck from rest, in px. Pings that land in phase add, tethered towards 2×.
`axis`	`'x' \| 'y'`	`'x'`	Which way a struck row moves. It is kicked away from the ping along this axis.
`wavefront`	`number`	`0.3`	Opacity of the drawn wavefront as it leaves the press point, 0–1, in currentColor, fading out once it has struck the last row. 0 hides it.
`children`	`ReactNode`	—	The rows. Each direct child is one row of the list.