Split Narrative
Two coordinated story planes redistribute their proportions as the active chapter changes — the relationship between primary and secondary content changes with the chapter, not with a new page.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Chapter one
A clear beginning
The primary plane leads, then makes space for a quiet companion surface.
Purpose
Two coordinated story planes redistribute their proportions as the active chapter changes — the relationship between primary and secondary content changes with the chapter, not with a new page.
Good for
- Case studies, product stories and paired before/after narratives
Avoid for
- Unrelated card grids
- Long-form prose that should remain one column
How many items
Two to seven chapters; each chapter needs a clear relationship between its two planes.
Mobile
The active chapter becomes a readable stacked story with primary content first — no squeezed half-width panels.
Motion intensity
Moderate. Proportions transition through one grid template rather than per-card transforms; only the active chapter content gets a keyed handoff.
Accessibility
- Chapter controls are buttons with current and pressed state.
- Arrow, Home and End keys navigate chapters.
- Both content planes remain in the DOM in normal reading order.
Composes with
Focus Rail when a continuous rail fits better than discrete chapter controls; Split-Screen Gallery for a non-narrative, evenly-weighted pairing.
Source: packages/skills/layouts/split-narrative.md