Skip to content

feat: add haptic feedback on mobile#144

Draft
ntatoud wants to merge 5 commits intodevfrom
ntatoud/haptic-feedback
Draft

feat: add haptic feedback on mobile#144
ntatoud wants to merge 5 commits intodevfrom
ntatoud/haptic-feedback

Conversation

@ntatoud
Copy link
Member

@ntatoud ntatoud commented Mar 2, 2026

Summary

  • Add tactile feedback on mobile devices following Apple HIG haptic patterns
  • Create src/lib/haptic.ts with semantic helpers (hapticSuccess, hapticError, hapticWarning, hapticSelection)
  • Create src/lib/toast.ts wrapper that auto-triggers haptic on toast.success() / toast.error()
  • Add haptic to: buttons (10ms tap), checkboxes (selection), confirmation drawers (warning pulse)
  • Graceful no-op on desktop (checks pointer: coarse)

Haptic patterns (Apple HIG aligned)

Interaction Pattern Rationale
Button press 10ms tap Brief impact feedback
Toast success 50ms tap Light confirmation
Toast error [50, 50, 50] Double-pulse for attention
Checkbox toggle 10ms tap Selection change
Confirm drawer open [30, 30, 60] Warning before destructive action

Test plan

  • Test on iOS Safari: buttons, toasts, checkboxes, confirmation drawers
  • Test on Android Chrome: same interactions + verify custom vibration patterns
  • Verify no haptic on desktop browsers
  • Verify link variant buttons do not trigger haptic

ntatoud added 5 commits March 2, 2026 15:05
Add tactile feedback following Apple HIG patterns:
- Button press: brief 10ms tap (skipped for link variant)
- Toast success: light 50ms tap
- Toast error: double-pulse [50, 50, 50]
- Checkbox toggle: selection haptic (10ms)
- Confirmation drawer: warning pulse [30, 30, 60]

Uses Vibration API on Android and iOS checkbox trick on iOS.
Gracefully no-ops on desktop (pointer: coarse check).
Replace hand-rolled Vibration API + iOS checkbox trick with the
web-haptics package. Use useWebHaptics hook in React components and
WebHaptics class directly in toast.ts. Semantic presets (success,
error, warning, selection) are used where appropriate.
Add src/lib/haptics.ts with a typed triggerHaptic(preset) wrapper and
HapticPresetName derived from its signature. Replace useWebHaptics hook
usage in all components with direct triggerHaptic calls.
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