Haptic Rhythm Designer

Design & test physical feedback for phones and controllers.

System Idle

Pattern Sequence (ms)

Format: [Duration, Pause, Duration, Pause...] in milliseconds.

Rhythm Presets

Haptic Resolution Test

Advanced

This sends rapidly decreasing pulses. If the vibration feels like a "blur" or continuous buzz early on, your motor has high inertia (ERM). If you feel distinct clicks until the end, you have a linear actuator (LRA).

Mastering the Physics of Digital Touch: A Comprehensive Guide to Haptic Technology

Welcome to the forefront of tactile design. The Web-Haptic Feedback Designer is more than just a vibration tester; it is a professional-grade diagnostic tool for developers, gamers, and hardware enthusiasts. By bridging the digital-physical divide, haptic feedback stimulates the mechanoreceptors in your skin, creating immersive experiences that audio and visual cues simply cannot replicate.

Whether you are a game developer fine-tuning a recoil effect, a UX designer creating accessible notifications, or a user testing a new controller, this guide covers everything from the physics of LRA motors to the complexities of the Web Vibration API.

Haptics 101: Understanding the Hardware

Not all vibrations are created equal. The "feel" of your pattern depends entirely on the actuator hardware inside the device. Modern devices typically use one of two technologies:

1. ERM (Eccentric Rotating Mass)

Found in older phones, budget devices, and the primary rumble motors of Xbox/PS4 controllers. It consists of an off-center weight spun by a DC motor.

Characteristics: High inertia. Takes ~50ms to "spin up" and ~50ms to stop. It cannot produce sharp "clicks." Best for long, powerful rumbles (explosions, car engines, heavy impact).

2. LRA (Linear Resonant Actuator)

Found in modern flagship smartphones (Apple Taptic Engine, Pixel Haptics) and the Switch JoyCons / DualSense controllers. A magnetic mass moves linearly on a spring coil.

Characteristics: Extremely fast start/stop times (~5ms). Can simulate sharp clicks, surface textures, and subtle "ticks." This allows for "High Definition Haptics."

Chapter 1: The Web Vibration API for Mobile Developers

The pattern designer above utilizes the standard Navigator.vibrate() method found in modern browsers. This method allows web developers to programmatically trigger the vibration hardware on a user's device.

How the Code Works

The API accepts a pattern of integers. This is a sequence representing milliseconds of time, alternating between Vibration and Silence.

Browser Constraints and Policy

While powerful, browsers impose strict limits to prevent abuse (such as annoying vibrating ads or battery-draining scripts):

Chapter 2: PC Gamepad Rumble Testing (Dual-Rumble)

For desktop users, the Web Vibration API often does nothing because laptops and desktops rarely have built-in motors. However, the Gamepad API allows access to connected controllers.

Our tool automatically detects connected gamepads via USB or Bluetooth and activates "Dual-Rumble" mode. This is distinct from mobile vibration because it offers two channels of feedback:

Low Frequency (Strong)

Usually the left motor with a large weight. Simulates heavy impacts, explosions, and engine idling.

High Frequency (Weak)

Usually the right motor with a smaller weight. Simulates tire traction, gunshots, or sliding textures.

When you run a pattern in our designer while a controller is connected, the tool maps the pulse duration to the gamepad's actuators. This is an excellent way to test if your controller's motors are functioning correctly without launching a game.

Chapter 3: Troubleshooting Haptic Feedback

Is your device not vibrating? Follow this diagnostic checklist to isolate the issue.

1. Check System Settings (Android)

The most common reason for failure is system-level settings. Go to Settings > Sound & Vibration and ensure that "Haptic Feedback" or "Touch Vibration" is enabled. Also, check if "Battery Saver" mode is on, as this often disables vibration motors to save power.

2. The iOS Safari Limitation

If you are using an iPhone, you will notice the tool says "Unsupported." This is not a bug in the tool. Apple's Safari browser on iOS does not support the Vibration API. Apple restricts this feature to native apps downloaded from the App Store. To test haptics on an iPhone, you must use a native app, as no website can trigger the Taptic Engine on iOS.

3. Browser Permissions

Some browsers (like Brave or Firefox Focus) may block the Vibration API by default for privacy reasons. Check your site permissions icon in the URL bar to ensure vibration is allowed.

Chapter 4: The Future of Web Haptics

The future of tactile internet is expanding. The W3C is currently discussing extensions to the Gamepad API that would allow for Trigger Rumble (found in Xbox One/Series controllers) and Adaptive Triggers (DualSense). This would allow web games to provide resistance when pulling a virtual bowstring or driving over gravel.

Furthermore, standardizing "Haptic Phantoms" could allow developers to create the sensation of a touch moving across a screen between two actuators, significantly enhancing accessibility for visually impaired users navigating the web.

Frequently Asked Questions (FAQ)

Why doesn't vibration work on my iPhone/iPad?
Apple's WebKit engine (used by Safari and all browsers on iOS) actively blocks the navigator.vibrate() API. This is a deliberate policy decision by Apple to prevent web ads from vibrating the phone. Currently, only Android devices and desktop computers with connected controllers support web vibration.
How do I test my PS5 DualSense or Xbox Controller on PC?
Simply connect your controller via USB or Bluetooth. Once connected, press any button on the controller to "wake" the browser's Gamepad API. This tool will automatically detect the controller (showing "Gamepad Connected") and route the vibration patterns to the controller's rumble motors instead of the device itself.
Can I control the strength (intensity) of the vibration?
On Android phones via the Web API: No. The standard API is binary (On/Off). You can simulate lower intensity by pulsing the motor rapidly (e.g., 10ms on, 10ms off), but you cannot set the voltage directly.

On Gamepads: Yes. The Gamepad API supports `weakMagnitude` and `strongMagnitude` values from 0.0 to 1.0, allowing for detailed force feedback.
Is continuous vibration harmful to my phone?
Generally, no. Modern smartphones use robust LRA or ERM motors designed for years of use. However, sustained vibration (running for minutes at a time) can drain your battery significantly faster than normal use. Extreme prolonged usage could theoretically cause heat buildup, but the browser usually caps vibration duration at 10 seconds to prevent this.

Feel the Pulse

Stop guessing how your app or game feels. Prototype the physical sensation right in your browser.

Test Pattern

Recommended Logic Tools