Split-Screen Gallery
Use for paired project views where two media planes belong to the same selection and should change together.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
The room as instrument
Material / rhythm
1 / 2
Purpose
Use for paired project views where two media planes belong to the same selection and should change together.
Use when
- A primary image and related detail, comparison or caption should share navigation.
- The collection is short enough for both planes to remain legible.
Avoid when
- The two columns are unrelated feeds.
- A normal one-up gallery already explains the content better.
Interaction
Previous/next buttons are the primary path. Touch swipe is an accelerator. Focusable panes and the polite position announcement keep keyboard and assistive technology users oriented.
Reduced motion and performance
Crossfades and opposing offsets disappear under reduced motion. Only the selected pair transitions; keep supplied media lazy and bounded.
Source: packages/skills/layouts/split-screen-gallery.md