Skip to content

Phone motion: sheet spring and drag, UI-thread press, rows that leave, booking confirmation - #183

Merged
chandralegend merged 3 commits into
mainfrom
feat/motion
Oct 25, 2026
Merged

chandralegend merged 3 commits into
mainfrom
feat/motion

Conversation

@chandralegend

Copy link
Copy Markdown
Contributor

The approved motion review for the phone (packages/mobile), built.

  • Tokens in src/motion.ts (press, list, sheet, success) with their Reduce Motion forms, from Reanimated's useReducedMotion; the hand-rolled hook in sheet.tsx is gone. Adds react-native-reanimated, react-native-worklets, react-native-gesture-handler and expo-haptics at the SDK 58 versions; GestureHandlerRootView at the root.
  • Sheet: Modal with animationType="none"; the panel rises on the sheet spring while the scrim fades on its own; drag down past 30% of its height or faster than 800 pt/s closes it (a selection tick at the threshold); Reduce Motion fades both; VoiceOver focus goes to the title (SheetTitle, used by every sheet).
  • Press: kit Button and Row, More's tiles and the AI button use Press (UI thread, scale 0.98 + opacity 0.85); unavailable is 0.45 and still.
  • Rows: Home's and Attention's rows enter, leave and settle with the list tokens; marking done is optimistic (onMutate, rolled back on error) with a light haptic and an announcement (src/reminders.ts).
  • Booking: success haptic, the booked card rises in and takes VoiceOver focus; a reversal is a warning haptic.
  • 120 Hz: CADisableMinimumFrameDurationOnPhone.
  • Docs: docs/design/mobile.md's new Motion section (principles, tokens with fallbacks, haptics, what's deferred) replaces the old 120–200 ms line.

Verified on the iOS Simulator (dev build) with Reduce Motion off and on: the sheet rises, snaps back on a short drag and closes on a long one (fading with Reduce Motion); presses dim and scale; a reminder marked done leaves and the rows below settle; booking shows the confirmation card. No console pages changed.

🤖 Generated with Claude Code

chandralegend and others added 3 commits October 26, 2026 01:52
…, booking confirmation

The phone's motion now follows the approved review. src/motion.ts holds the
tokens and their Reduce Motion forms (Reanimated's useReducedMotion). Sheets
open with animationType none: the panel rises on a critically damped spring
while its scrim fades on its own, a drag past 30% of the height or a flick
over 800 pt/s closes it (a selection tick at the point), Reduce Motion fades
both, and VoiceOver starts at the sheet's title (SheetTitle). Buttons, rows,
More's tiles and the AI button press on the UI thread (scale 0.98, opacity
0.85), and an unavailable one is dimmed and still, never what a press looks
like. Marking a reminder done on Home or Attention removes the row at once
(react-query onMutate, rolled back on error) with a light haptic and an
announcement; rows enter, leave and settle with the list tokens. Booking an
entry is the one success haptic, its confirmation rises in and takes
VoiceOver's focus, and a reversal booked is a warning. The app runs at 120 Hz
(CADisableMinimumFrameDurationOnPhone). docs/design/mobile.md's Motion
section has the principles, tokens with their fallbacks, the haptics rules
and what is deferred.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@chandralegend
chandralegend merged commit 8ea6849 into main Oct 25, 2026
24 of 25 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant