KQ-719 · MOVER/LIST

Mover List

A board of assets ranked by percent change. When prices tick, every row that changes seat travels to its new one with a position-only FLIP on glide while the rank column re-reads in place, and each updated chip mounts a wash keyed to that tick that flashes and fades on the exit ease. A radio pair swaps gainers for losers with Left and Right, Home and End, and Space; a polite live region names the leader once the tape goes quiet.

KQ-719 · MOVER/LIST

Basinworks movers

Leading BSN +2.41% · 0 ticks · 0 resorts

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/mover-list

Props

assets: MoverAsset[]; default —; The board: id, symbol, name, price and previousClose. Changing a price flashes that row's chip and re-sorts the rows.
view / defaultView: "gainers" | "losers"; default "gainers"; Controlled or initial sort direction.
onViewChange: (view: MoverView) => void; default —; Fires from the radio that changed the view.
limit: number; default 5; Rows shown; the rest leave on the exit ease.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Prints every price. The default pins an explicit locale so server and client agree.
flashMs: number; default 900; How long a chip's flash takes to fade, and the quiet the live region waits for before naming the leader.
label: string; default "Movers"; Names the list for assistive technology and prints in the header.
onOrderChange: (ids: string[]) => void; default —; Fires from the effect that observed a new order, with the visible ids top to bottom.

Prop	Type	Default	Description
assets	MoverAsset[]	—	The board: id, symbol, name, price and previousClose. Changing a price flashes that row's chip and re-sorts the rows.
view / defaultView	"gainers" \| "losers"	"gainers"	Controlled or initial sort direction.
onViewChange	(view: MoverView) => void	—	Fires from the radio that changed the view.
limit	number	5	Rows shown; the rest leave on the exit ease.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Prints every price. The default pins an explicit locale so server and client agree.
flashMs	number	900	How long a chip's flash takes to fade, and the quiet the live region waits for before naming the leader.
label	string	"Movers"	Names the list for assistive technology and prints in the header.
onOrderChange	(ids: string[]) => void	—	Fires from the effect that observed a new order, with the visible ids top to bottom.