REFERENCE
- Gallery page: https://magpui.com/en/i/six-ios-gesture-physics-demos-f97dbf
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/six-ios-gesture-physics-demos-f97dbf/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/six-ios-gesture-physics-demos-f97dbf/clip.mp4
- Original post: https://x.com/shedsgns/status/2111683692716302340 by @shedsgns
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A grid of six phone-sized wireframe demos, each showing one iOS gesture with real spring physics: swipe to dismiss, pull to refresh, bottom sheet detents, drag to reorder, long-press peek, edge swipe back.
DESIGN SYSTEM
- Background #FFFFFF, phone frames 220x460 with 28px radius, #F2F2F2 fill, wireframe blocks #E0E0E0.
- Label under each demo, 12px grey.
MOTION
- All gestures use springs, not durations: stiffness 400, damping 32 for snaps; release velocity carries into the spring.
- Swipe to dismiss: rubber-band beyond 30% width, dismiss if velocity > 800px/s.
- Sheet detents at 25/55/92% of height, snap to the nearest considering velocity.
- Pull to refresh: resistance factor 0.5 past 80px, spinner appears at threshold.
SECTIONS
- Six demos in a 3x2 grid, each self-contained and draggable.
IMPLEMENTATION
- Pointer events + a spring library (Framer Motion useSpring or react-spring); clamp with rubber-banding math.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Flicking fast always beats distance for the snap decision.
- Nothing teleports: every release animates from the current position.
- Works with mouse and touch.
