Kinetiq

KQ-571 · SIDE/SCROLL

Side Scroll

A section that pins itself while the track inside it moves sideways. The container's vertical travel maps linearly onto the track's horizontal travel — deliberately no spring, because a scroll-linked value that springs lags the finger and reads as jank — and the section reserves exactly its frame height plus the track's travel, so the pin lasts as long as there is track left. Native scroll means Page Down and the arrow keys already work, and a skip control at the top of the pin jumps a keyboard past the run and lands focus on the far side.

KQ-571 · SIDE/SCROLL
Fernworks

Season kit

Keep scrolling. The track below moves across instead of down.

  1. Bench survey

    Every rail is measured cold before it goes on the bench, and the sheet travels with it.

  2. Twin sweep

    Two passes, one cold and one at working temperature. The drift between them is the record.

  3. Paired clamps

    Clamps torque in pairs so the plate never carries load on one side alone.

  4. Depot handover

    The run leaves as one crate. The depot signs for the drift figures, not the count.

01 / 04

Past the track the page carries on as usual.

Progress 0%

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/side-scroll

Props

panels
React.ReactNode[]
default —
The panels, left to right.
container
React.RefObject<HTMLElement | null>
default —
The scrolling element whose travel drives the track.
panelWidth
number
default 280
Width of one panel, px.
onProgressChange
(percent: number) => void
default —
Fires with whole-percent progress, 0–100, when the percent changes.
label
string
default Pinned track
Names the pinned section.
skipLabel
string
default Skip the track
Text of the control that jumps past the pinned run.