Experiment 007

Reflow 320 px

Three mini-pages share the same content in a 320 px stage. Which stays intact without horizontal scrolling?

Mini-page variant

Fluid layout: wrapping, minmax grid, independent scrolling regions for tables and code.

320 px stage · variant A · measurement target

Mini catalog

https://katalog.contoh.id/eksperimen/reflow-tanpa-scroll-dua-arah

  • Interruptible motion

    Transitions reverse from the current position without wrong-way movement.

  • Feedback at the trigger

    Confirmation appears at the point of attention without shifting its neighbors.

  • Links that add context

    Stacked panels keep earlier notes visible.

Four experiments and their statuses
NameAreaYearStatus
MotionMotion2026Supported
FeedbackMicrointeractions2026Supported
Context linksNavigation2026Conditional
FrequencyMotion2026Supported
if (width <= 320) {
  wrap(); allowScroll("table", "code");
} // no two-dimensional page scrolling

Instrument

For each variant, record stage overflow (scrollWidth − 320 px), components outside the stage or wider than their containers, clipped content, stray elements, keyboard-accessible scroll regions, and page overflow at the current viewport width.