Split Narrative
Two coordinated story planes redistribute their proportions as the active chapter changes.
- editorial
- narrative
- split
- reflow
- story
Primary / arrivalA surface that gives the story room.
Secondary / noteA surface that gives the story room.
Chapter one
A clear beginning
The primary plane leads, then makes space for a quiet companion surface.
Usage
usage
import { SplitNarrative } from "@pinky-ui/layouts";
<SplitNarrative items={chapters} defaultActiveId={chapters[0].id} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SplitNarrativeItem[] | — | Story chapters with primary and secondary content planes. |
| activeId | string | — | Controlled chapter id. |
| balance | "primary" | "secondary" | "primary" | Per-chapter hint for which plane should receive more space. |
Accessibility
- Chapter controls are buttons with current and pressed state.
- Arrow, Home and End keys navigate chapters.
- Both content planes remain in the DOM and their hierarchy is announced in normal order.
Performance
- Proportions transition through one grid template rather than per-card transforms.
- Only the active chapter content gets a keyed handoff.
Reduced motion
The active chapter and its final proportion render immediately with no crossfade or reflow animation.
When to use
- Case studies, product stories and paired before/after narratives.
When not to use
- Unrelated card grids or long-form prose that should remain one column.