Split-Screen Gallery
Two coordinated media planes that change together with a cinematic but controlled handoff.
- editorial
- split-screen
- gallery
- cinematic
- controlled
The room as instrument
Material / rhythm
1 / 2
Usage
usage
import { SplitScreenGallery } from "@pinky-ui/layouts";
<SplitScreenGallery items={projects} index={index} onIndexChange={setIndex} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SplitScreenGalleryItem[] | — | Paired primary and secondary media for each collection entry. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- Previous and next are explicit buttons with a polite current-position announcement.
- Each media pane can receive focus and does not require hover.
- Touch swipe is an accelerator, never the only navigation path.
Performance
- Only the selected pair participates in the transition.
- Uses transform/opacity handoffs without an image preloader.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- Paired project views, editorial before/after stories and art direction.
When not to use
- Independent feeds where two items do not share a relationship.
Skill
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.