Elevating the standard vertical z-pattern approach for text heavy content @ smaller breakpoints.

Goals:

A rail of columns is a way to hold more copy than a page has room for. The question is how it should feel when someone moves it. The idea is that a drag followed by a short settle gives the rail a place to land every time, so a column is always aligned to the grid when the motion stops. The two widths test whether the same choreography holds when the distances change.

Building the motion study in Figma Make:

The rail has three columns. At 768 wide a column is most of the width, and at 360 it's one column with the next peeking. The rail stops once per column, and the last stop sits where the rail ends.

There are four moves on an 8.6 second loop. Forward to the second column, forward to the third, back to the second, back to the first. Each move has two segments. The drag runs 600 ms on Exponential, and the cursor and the rail travel together. The settle runs on Circle In/Out and takes 400 ms on the first move and 300 ms on the other three.

The cursor has three glyphs, an arrow, an open hand and a closed hand. They swap with HOLD opacity, because Figma Motion has no interaction triggers and a hover or a drag has to be drawn. The active line under each column switches at the middle of the drag.