ns-ui
Pull-to-refresh as a crank and flywheel: pulling down winds a spoked SVG wheel through a rack-and-pinion drivetrain, release hands it angular momentum, and the wheel freewheels through the request in flight before the response brakes it to a stop as new rows settle in.
Use when pull-to-refresh where the gesture should hand real momentum to the request, the pull winding a flywheel through a rack and pinion that freewheels for the flight and brakes as new rows settle in; pick feed-escapement instead when the problem is metering arrivals into the feed rather than triggering the fetch, or swipe-row-detent when the gesture belongs to a single row rather than the whole list.
Install
npx shadcn add https://design.helpmarq.comns-ui / refresh-pull-flywheel — wind it up, let it spin
Pull the wheel down, or press Refresh.
Grab the wheel and pull down — the rack, pinion and flywheel wind together, 1:1 with pull distance. Let go and the wheel spins on the energy you gave it, freewheeling through the request and braking to rest exactly as the new rows settle in. Or just press Refresh.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultItems? | FlywheelPullItem[] | — | Initial feed rows, newest first. |
| onRefresh? | () => Promise<FlywheelPullItem[]> | — | Called on release/refresh; resolve with the new rows to prepend. Omit to use a built-in simulated request (900-1500ms) that manufactures rows — fine for a demo, but a real feed should supply this. |
| label? | string | — | Accessible label for the row list. |
| className? | string | — | — |