01 Interaction study

Drag Layout Lab

Drag a card by its grip, or focus a grip and press Space. Try moving a long title from Studio to Dispatch and watch the preview grow as the title wraps.

Sample board Server revision 1

Wide column

Studio

3
  • ST-01 High

    Sketch a field guide for the neighborhood night market

    • writing
    • guide
  • ST-02 Normal

    Choose the display type

    • design
  • ST-03 Normal

    Mark the quiet paths and the busiest corners on the foldout map

    • map
    • research

Medium column

Review

1
  • ST-06 High

    Confirm the stall list with the market office

    • vendors

Narrow column

Dispatch

2
  • ST-04 High

    Check the final proof

    • print
  • ST-05 Low

    Print address labels

    • print
    • mail

Narrow column

Done

1
  • ST-07 Low

    Pick the cover photo

    • design
Move a card with a form

Ready.

Geometry

Measurement trace

Pretext measures the destination title. Datastar uses that height to preview the gap between cards.

Title width
—
Title lines
—
Card height
—

Drag over a column to see its prediction.

Server response

Save timing

Each drop posts once. Gleam reports its apply and render time in a Server-Timing header. The browser measures the round trip, the patch, and the response size.

Gleam server
—
Round trip
—
Patch to paint
—
Response size
—