Gesture dock Gagan

Bidirectional gesture handle at the bottom of the home screen. Drag up = add expense. Drag down = settle. Shows a preview pill with direction-appropriate content once the gesture is armed. The dock replaces a traditional FAB on the home screen.

States

Resting

home screen
↑ add
settle ↓

At rest: a 36×4px pill handle at 35% opacity, flanked by two directional hints in mono uppercase. The hints are subtle — they're teaching the gesture, not competing with content.

Dragging up — add expense armed

home screen
+ add expense

Once the drag crosses the 50px up threshold, the hints fade and an ink pill appears: "+ add expense". The handle dims further. Releasing past this point opens the add-expense sheet. Releasing short of it snaps the dock back to rest.

Dragging down — settle armed

home screen
⇌ settle up

Past the 30px down threshold (shorter — settle is a secondary action), a teal pill appears: "⇌ settle up". Releasing here opens the settle flow. The lower threshold for settle is intentional — it's a slightly less deliberate gesture, so it arms faster.

Spec

PropertyValueNotes
Up threshold (arm)50pxAbove this, show "add expense" pill and commit on release
Down threshold (arm)30pxBelow this, show "settle up" pill and commit on release
Handle follow factor (up)0.32×Handle nudges upward at 32% of finger travel — gives resistance
Handle follow factor (down)0.6×Looser on the settle direction — less resistance
Snap-back duration320msvar(--ease-spring) — handle bounces back on release below threshold
Pill fade-in140msvar(--ease-out), opacity + translateY(4px → 0)
Handle opacity (rest)35%Subtle — does not compete with content
Handle opacity (armed)15%Dims further once gesture is committed

Anatomy

PartElementNotes
Surface.gdock-surfacePaper background, top border, safe-area aware bottom padding.
Directional hints.gdock-hintsTwo mono labels flanking the handle. Fade out once gesture arms.
Handle.gdock-handle36×4px pill. Follows finger at fractional rate. Center-positioned.
Preview pill.gdock-previewInk (add) or teal (settle). Appears after arm threshold. Fades on snap-back.

Usage

Do Place the gesture dock at the very bottom of the home screen, respecting the iOS safe area inset. It sits above the tab bar if a tab bar is present — or replaces it on the home screen if the tab bar is integrated into the dock.
Don't Don't use the gesture dock on any screen other than the home screen. Bidirectional swipe gestures conflict with native scroll and sheet gestures on deeper screens. Use the Radial FAB or a standard sheet for add/settle actions elsewhere.
Do Use haptic feedback at the arm threshold (both directions). The physical confirmation tells the user the gesture has committed before they release.
Don't Don't set the down threshold below 20px — too easy to trigger accidentally on scroll-end bounce. The current 30px is a minimum; test with real users before reducing further.

Accessibility

Gesture alternatives The gesture dock must have non-gesture equivalents. Add two clearly labeled buttons ("Add expense" and "Settle up") accessible via switch access and keyboard. These can be visually hidden but must be focusable. Never rely solely on drag gestures — iOS switch access, keyboard navigation, and motor-impaired users all need a fallback.
Screen readers The dock surface should have role="region" and aria-label="Quick actions". The handle itself is presentational — aria-hidden="true". The preview pill, when visible, should be announced via a live region: aria-live="polite" on a visually hidden element that updates to "Add expense ready" or "Settle up ready" at the arm threshold.

See it in context

Interactive prototype — this component is live below. Tap, swipe, and drag to explore.

Switch the tweaks panel action mode to gestures. The dock appears at the bottom — drag up to add an expense, drag down to settle up. Watch the preview pill animate as you drag.