KQ-570 · SHRINK/BAR

Shrink Bar

A header that spends its height as you scroll. One progress value, read straight off the container's scrollTop over the first range pixels, drives the bar's height, the title's scale and the subtitle's fold — scroll-linked with no spring anywhere, because a header that keeps moving after your finger stops reads as lag. The title is a single element throughout, so assistive technology sees one heading rather than a large copy handing over to a small one.

KQ-570 · SHRINK/BAR

1,204Runs

0.4%Drift

6Benches

The north bench was recut in March and has held calibration since; its sweep sheets are filed against run 118.

Depot handovers move at 06:00. Crates leave with their drift figures attached, signed for at the gate.

Kettle point runs second shift. Its clamps are torqued in pairs so the plate never carries load on one side.

Cold sweeps are kept for a year. Anything outside the band is re-swept before the run is closed out.

Fernworks

North basin · since 2019

Compaction 0%

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/shrink-bar

Props

container: React.RefObject<HTMLElement | null>; default —; The scrolling element the bar reads. The bar sits over it, never inside its flow.
title / subtitle: string; default —; Header copy. The title is one element in both states; the subtitle folds away as the bar compacts.
range: number; default 80; Scroll pixels over which the bar compacts fully.
actions: React.ReactNode; default —; Right-side controls, centred on the bar at every height.
onCompactionChange: (percent: number) => void; default —; Fires with the compaction percent, reported in fives so a fling does not re-render the host every frame.

Prop	Type	Default	Description
container	React.RefObject<HTMLElement \| null>	—	The scrolling element the bar reads. The bar sits over it, never inside its flow.
title / subtitle	string	—	Header copy. The title is one element in both states; the subtitle folds away as the bar compacts.
range	number	80	Scroll pixels over which the bar compacts fully.
actions	React.ReactNode	—	Right-side controls, centred on the bar at every height.
onCompactionChange	(percent: number) => void	—	Fires with the compaction percent, reported in fives so a fling does not re-render the host every frame.