Test browser vibration patterns instantly with this free Vibration API Tester. Build, customize, and generate JavaScript code for mobile haptic feedback.
AI Generation Prompt
Technical Specification: Vibration API Tester & Haptic Pattern Builder
Overview
This tool is a lightweight, high-performance browser utility designed to help web developers build, test, and export haptic feedback patterns using the native navigator.vibrate() API. It provides a visual interface to string together vibration durations and pauses, instantly generating the required JavaScript code.
Core Features
- Visual Pattern Editor: Add, remove, and reorder vibration/pause segments via an intuitive UI.
- Real-time Trigger: A "Test Pattern" button that executes the current pattern on the mobile device immediately.
- Code Export: Automatically generates the clean JavaScript syntax needed for the
navigator.vibrate()function based on the created pattern. - Preset Library: One-click loading of common patterns (e.g., SOS, Heartbeat, Notification Pulse, Error Shake).
- Accessibility & UX: Clear labels for millisecond inputs and an indicator to show if the device supports the API.
UI Layout
- Header: Clean, minimalist title with a short description.
- Main Tool Area:
- A vertically scrolling list of "Segments" (Each segment has a Type toggle: "Vibrate" vs "Pause", and a "Duration" input in ms).
- "Add Segment" and "Clear All" buttons.
- Output Section: A large, read-only code block (using a syntax-highlighting style) that updates dynamically as the user modifies the pattern.
- Action Bar: A sticky bottom or prominent central "Test Vibration" button (Primary call-to-action).
Design System (Light Mode Only)
- Palette:
- Background: Off-white (#F9FAFB).
- Cards: Pure white (#FFFFFF).
- Primary Accent: Indigo (#4F46E5).
- Text: Slate 900 (#111827).
- Border/Input: Slate 200 (#E5E7EB).
- Typography: Sans-serif, Inter or system-ui stack.
- Styling: Soft shadows (shadow-sm) on cards, rounded corners (border-radius: 8px), and 0.2s smooth transitions on all interaction states (hover, focus).
Developer Directives
- Environment: Strictly single-file HTML5. Include Tailwind via CDN for rapid styling.
- State Management: Use a simple JavaScript array
[200, 100, 200]to hold the pattern data in memory. Do not use localStorage or cookies. - Sandboxing:
- Do NOT use
alert(),confirm(), orprompt(). Replace these with custom CSS overlays/modals if user input is needed. - Ensure all
<a>tags usetarget="_blank"andrel="noopener noreferrer".
- Do NOT use
- Functionality:
- Validate that inputs are numeric.
- Use
navigator.vibrate(patternArray)wherepatternArrayis an array of integers. - Handle the
navigator.vibratereturn boolean to provide visual feedback (e.g., "Vibration triggered successfully" vs "Vibration not supported/blocked").
- Responsive: Ensure input fields are large enough for thumb-touch input on mobile devices (min 44px height for buttons/inputs). The layout should be single-column on mobile.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I test haptic feedback in a mobile browser?
To test haptic feedback in a browser, you must use the standard Web Vibration API, accessible via 'navigator.vibrate()'. Most mobile browsers, particularly on Android, support this feature, provided the user has granted permission and interacted with the page first. Our tool simplifies this process by providing a visual interface where you can input durations in milliseconds for both vibration pulses and pauses. Once you construct a pattern, you can trigger it directly from your mobile device to verify the physical haptic response instantly.
Which browsers support the Vibration API?
The Vibration API is primarily supported by Android-based browsers like Chrome, Firefox, and Samsung Internet. Unfortunately, iOS Safari does not currently support the Vibration API, meaning haptic feedback will not trigger on iPhone or iPad devices regardless of the code used. Because support is limited to specific mobile environments, we recommend using this tool specifically on Android mobile devices during your development process. Always ensure your code includes a fallback or check to prevent errors in unsupported environments.
Why does the vibration not trigger when I click the button?
The browser security model strictly requires a 'user gesture' to trigger vibration. This means you must explicitly tap a button on the screen for the vibration to occur; it cannot be triggered automatically upon page load or via a script running in the background. If you have already interacted with the page and it still does not vibrate, check that your device's physical vibration setting is turned on and that the browser has the necessary system-level permissions. Ensure your device is not in 'Power Saving' or 'Do Not Disturb' mode, as these often disable haptic feedback.
Can I save my vibration patterns for later use?
This application runs entirely in your browser's memory for security and privacy reasons, meaning it does not use local storage or cookies to save data. Once you build your desired vibration pattern, you should copy the generated JavaScript snippet directly into your project's codebase. To persist patterns for your own workflow, we recommend bookmarking the page or keeping your code snippets in a separate text editor or documentation file. The tool is designed as a lightweight, 'fire-and-forget' testing utility to speed up development without data management overhead.
