Mobile Playground
Test every Lumeo gesture, hit target, and haptic primitive in one place. Open DevTools → Device Toolbar (Ctrl+Shift+M) and pick a phone preset, or just try the gestures with mouse-drag — the same pointer events drive both.
Swipe gestures
All sheets, drawers and tabs respond to pointer drags — touch, mouse and pen unified.
Sheet — all 4 sides
Swipe direction matches the Side param.
Drawer — swipe down
Drawer is the swipe-first primitive — gesture always on.
Carousel — horizontal swipe
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Pull to Refresh
Pulled 0 times — drag down
Swipe Actions — iOS Mail.app pattern
Drag a row left or right to reveal leading/trailing actions.
Maria Müller
Re: Quarterly review draft
Daniel Kim
Designs ready for handoff
Anna Schmidt
Friday standup notes
Haptic feedback
Tap a button below — on a supported device (most Android, some iOS) you'll feel a vibration. No-op on desktop and unsupported devices.
Last triggered: —
Hit targets & touch input
All interactive elements meet WCAG 2.5.5 (44×44 CSS px on mobile) — try tapping them on a phone preset.
Chips with dismiss
Pagination — 44px on touch, 36px desktop
Toast — 44px close on mobile
Long-press & wheel pickers
Context menu — long-press
Press and hold on the area below (touch) or right-click (desktop).
Long-press here
Wheel pickers (iOS-style)
Scroll the columns up/down — touch native, mouse-wheel works too.
Safe area & touch ripple
Touch Ripple
Material-style tap feedback. Try tapping the buttons below.
Safe Area
Wraps content with env(safe-area-inset-*) padding. Visible effect only on iPhone notch / Android nav-bar.
Content inside SafeArea
Want the API details? See the dedicated pages — PullToRefresh, SwipeActions, TouchRipple, SafeArea, Sheet, Drawer.