m1ckc3s/project-fathom

Project Fathom is a small proof-of-concept that demonstrates how to trigger a native haptic vibration on an iPhone from a regular web page, with no native app involved. It was built to answer a specific question: can a button on a website produce the same kind of physical tap feedback that native iOS apps use? The approach relies on a WebKit-only HTML element: a native switch control added with an input element set to type checkbox and the switch attribute. When a real finger tap toggles this control, the iOS system plays a haptic tick. The trick is to place the switch invisibly over a normal-looking styled button, so the user sees a pill button but their finger is actually tapping the native control. iOS plays the haptic, and the visible button appears to respond. As of iOS 26.5, the haptic can only fire from a direct physical tap, not from JavaScript code. That constraint turns out to be fine for a button, which is always tapped directly. The readme includes detailed CSS notes on sizing and clipping the invisible switch correctly. A button that is rounded or pill-shaped needs an overflow clip on the container, otherwise the rectangular hit area of the hidden switch extends into the blank corners outside the visible shape and fires haptics when the user taps near the button rather than on it. Two CSS approaches are shown: a quick scale-based method used in this repo and a cleaner width-and-height fill approach recommended for real use. The project runs with Vite, React, and TypeScript. It is described as a throwaway test for the technique, verified on a physical iPhone running iOS 26.5, and works in iOS Safari and Chrome. Android devices can use the standard browser Vibration API instead.