Horizontal Story

Purpose

HorizontalStory maps a section’s vertical travel to a horizontal row of panels. It is an advanced product or portfolio narrative for four or five visual panels, not a default carousel.

Use generous panel widths, a clear start/end and a visible reason for the horizontal progression. Do not trap the page, hijack wheel input, or use it for content that is naturally a simple list. Keep the vertical section long enough to feel predictable.

Reduced motion, coarse pointers and compact layouts use native horizontal overflow instead of scroll hijacking. Panels remain in DOM order, can be reached by keyboard, and do not require drag. Test focus, zoom, trackpad and touch boundaries.