Bold contrast and visual tension through split-screen composition. Content exists in two parallel worlds simultaneously.
Explore ↓Layout Variants
Four distinct split configurations
Equal-weight panels. Maximum visual tension. Ideal for binary choices, comparisons, or brand duality.
50
Equal visual weight. Dark dominant tone asserts contrast authority.
50
Equal visual weight. Light editorial tone creates reading clarity.
Tailwind: grid grid-cols-1 md:grid-cols-2
Content Patterns
Common split-screen content configurations
Image
Plus
Text
The foundational split pattern. Striking visual on the left draws the eye; measured typographic content on the right builds trust and drives action.
Component Demos
Sharp editorial cuts — black / white inversion at 150ms, no gradient easing
Color System
Design Rules
- Use CSS Grid or Flexbox for the split: grid-cols-1 lg:grid-cols-2
- Stack vertically on mobile, split on large screens
- Keep maximum contrast between panel backgrounds
- Let one panel breathe visually while the other speaks
- Allow subtle panel expansion on hover for emphasis
- Add transitions to guide user attention between sides
- Consider sticky scroll locking for deep narrative content
- Never duplicate content across both sides
- Never force split layout on narrow mobile viewports
- Never use soft gradients as primary panel backgrounds
- Never let one panel dominate without visual counterweight
- Never add border-radius to structural split panel edges
Interaction Physics
Counter-Weight Focus
peer-hover/left:opacity-55 + grayscaleHovering one panel dims and desaturates the opposite, creating total visual focus without hiding content.
Sharp Editorial Cuts
duration-150, black-white inversionButtons invert with a hard 150ms cut. No ease-in-out softening. The switch is decisive and immediate.
Panel Expansion
hover:flex-[1.1] duration-500Hovered panel grows its flex share gently. The opposite compresses proportionally — balanced tension.
Seam Intensification
split-pair:hover .split-dividerThe center seam transitions from 1px subtle to 2px sharp on hover or focus-within — marking the divide.
“Two worlds held in tension — neither swallows the other.”
Split Screen is not just a layout. It is a visual argument. One side states; the other responds. Together, they create meaning that neither could generate alone.