Exclusion Zones for Floating Overlays: Per-Element, Scroll-Linked Avoidance on Large Screens
Floating navigation surfaces such as pill-shaped rails are increasingly common on tablets and unfolded foldables. They free space compared with edge-docked navigation, but they also cover whatever scrolls underneath them. The two prevailing responses, a page-wide inset or letting content pass underneath, either waste the space the overlay was meant to free or hide content. This idea paper describes exclusion zones, a layout pattern in which every element computes its own inset from its current distance to the overlay, easing in over a short feather distance with a smootherstep curve. The inset is a pure function of geometry rather than an animation, so it stays synchronised with scrolling, folding and resizing, and the side to pad follows from where the overlay sits, so it works on either edge. The paper distinguishes four element roles (shifting, compressing, padding-shifting and full-bleed), presents the algorithm, discusses platform placement including the iPhone Duo camera column, related techniques in text layout and platform inset systems, and limitations. Reference implementations: Jetpack Compose (https://github.com/moatazhamada/FloatAround) and Flutter (https://pub.dev/packages/float_around, version 0.2.0).
Authors
- Moataz Mohamed (ORCID: https://orcid.org/0000-0002-1345-7240)
Publication Details
- Journal
- Zenodo (CERN European Organization for Nuclear Research)
- Published
- 2026-11-11
- DOI
- https://doi.org/10.5281/zenodo.24144274
- Primary Topic
- Interactive and Immersive Displays
- Type
- preprint