KQ-443 · RIBBON/TWIST
Ribbon Twist
The interface as a ribbon that twists about its vertical axis as you scroll: the top and bottom turn opposite ways, the middle stays flat, and the back of the ribbon is a darker face. Scroll past and it twists the other way.
KQ-443 · RIBBON/TWIST
Mode
Waylight · berth board 09
Four berths, the board turns with the tide line.
The board hangs at the head of the pontoon and reads flat once it settles mid-frame. Scroll past it and the whole sheet twists about its own spine, the way a length of ribbon turns in a draught, showing its plain reverse before it rights itself again.
B-0105:40Fair TideDocked
B-0606:55Wide ReachInbound
B-0907:30Slack WaterHolding
B-0308:15Grey FenVacant
turning with the page
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/ribbon-twist
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode / progress | "scroll" | "manual" · number | — | What drives the twist. |
| turns / shading / back | number · number · string | — | How many quarter-turns across the height, face shading, and the back face's colour. |