Layouts

Split Panel Handoff

Loading…
Scene8.4s typicallandscape · portrait · square

Overview

A shared divider reallocates space between information and imagery, preserving continuity through the handoff.

Build

  1. 01

    Give both panels a shared edge and clear roles.

  2. 02

    Move the divider while adapting each panel’s content.

  3. 03

    Pause at each allocation so the new hierarchy reads.

Example source React / TSX

examples/split-panel-handoff.tsx · Uses the catalog’s shared composition helpers.

Loading source…