m1ckc3s/project-fathom — explained in plain English
Analysis updated 2026-05-18
Study how to trigger native iOS haptic feedback from a plain web page without building a native app.
Copy the CSS technique for overlaying an invisible native switch on a styled button while clipping its tap area correctly.
Test whether a haptic trick still works after an iOS update by running the demo on a physical iPhone.
| m1ckc3s/project-fathom | tommy0103/prism | fffonion/openwrt-win98-theme | |
|---|---|---|---|
| Stars | 51 | 53 | 56 |
| Language | CSS | CSS | CSS |
| Setup difficulty | easy | easy | moderate |
| Complexity | 3/5 | 2/5 | 3/5 |
| Audience | developer | developer | ops devops |
Figures from each repo's GitHub metadata at analysis time.
Only works in iOS Safari or Chrome on WebKit, Android devices need the standard Vibration API instead.
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.
A proof-of-concept web page that makes a button trigger a real iPhone haptic tap, by hiding a native switch control underneath it.
Mainly CSS. The stack also includes Vite, React, TypeScript.
The README does not state a license.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
Verify against the repo before relying on details.