KQ-381 · CUBE/FOLD

Cube Fold

The interface folds over cube edges as it scrolls. The top and bottom bands of the page hinge away in perspective as the surface enters and leaves the viewport, meeting flat in the middle of the scroll. One mesh, two hinges, real perspective.

KQ-381 · CUBE/FOLD
Mode

Waylight · berth manifest 04

Four berths, the chart folds in with the tide.

The harbourmaster posts the manifest at first light. As the board scrolls into view it hinges up over its own top and bottom edge, the way a chart folds shut on a chart table, and lies flat once the whole berth line is in frame.

B-0406:12Kestrel WakeDocked
B-0707:45Northerly RunInbound
B-1108:30Salt FenHolding
B-0209:05Open ReachVacant

folds as it passes

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/cube-fold

Props

PropTypeDefaultDescription
mode / progress"scroll" | "manual" · numberWhat drives the fold: the viewport, or the progress prop.
band / angle / perspectivenumberHow tall each folding band is as a fraction of the height, the largest fold angle in degrees, and the camera distance.
shadingnumberHow much a folded face darkens.