Chapter 3

Interaction Patterns

Compound gesture behaviors that combine recognition, physics, and layout into reusable patterns. These are the building blocks of gesture-driven interfaces — swipe-to-dismiss, pull-to-refresh, carousels, and more.

Pull to Refresh

Pull a scrollable list downward from the top. The pull creates an overscroll region with rubber band resistance — the further you pull, the harder it gets. Once the pull passes a threshold (~60px of rubber-mapped distance), a refresh indicator appears. Releasing above the threshold triggers the refresh; releasing below it snaps the list back immediately.

The rubber band mapping is critical for feel. Without it, the list would move 1:1 with your finger during overscroll, which feels wrong because there's no content to scroll into. The increasing resistance communicates that you're doing something different from normal scrolling.

Carousel

A horizontal strip of full-width pages inside a viewport. Drag horizontally, and on release the strip snaps to the nearest page boundary. This is the gesture behind photo galleries, onboarding flows, and story carousels.

The snap logic is velocity-assisted: the system predicts where the strip would end up based on release velocity, then rounds to the nearest page. To prevent skipping multiple pages on a single flick, the target is clamped to ±1 page from the current page. At the edges, a rubber band effect communicates the boundary.

Draggable Grid

A 3×3 grid of tiles that can be freely rearranged by dragging. Grab any tile and move it over another — the displaced tile springs into the vacated cell. The swap is triggered by proximity to the nearest grid cell center, so the interaction feels predictable and forgiving.

Each tile has its own x, y, and scale springs. The dragged tile scales up slightly and gains elevation (shadow) to communicate lift. On release, the tile inherits drag velocity and bounces into its final grid position.

Rubber Band Slider

A horizontal slider where dragging past the left or right edge deforms the entire control — stretching in the drag direction and squishing perpendicular to it, like a physical rubber object being pulled beyond its limits.

The deformation uses a square root curve so the stretch grows quickly at first then tapers off, matching the feel of real elastic material. On release, a spring snaps the shape back to its resting form. This communicates “you’ve hit the boundary” through shape rather than just resistance — a more visceral, playful feedback channel.