v156 · web haptics · configuration & inspection

Effect design tool

Choose an intent, set an intensity, and read everything the platform does with it: the exact proposed call, the per-OS waveform mapping from the explainer, an audio-free visual sketch of the pulse with a text equivalent, and the hand-tuned legacy vibrate() pattern you would ship today — playable for real where vibration hardware exists.

Design an effect

Semantic effect
Intensity (normalized 0.0 – 1.0, default 1.0)
0.8

The effective strength is system haptic setting × this value. Out-of-range values are clamped; non-finite values are rejected — the gates page proves it.

The proposed call

Pulse sketch (illustrative)

This sketch illustrates the intent described in the explainer. The real waveform is chosen by the operating system per device and is never exposed to the page — that opacity is a deliberate anti-fingerprinting property, so no timeline of the true output can exist.

Platform mapping for the selected effect (explainer table — illustrative, may vary by user agent)
effectWindows waveformmacOSiOSAndroid
No call made yet.

Declarative future: CSS @haptic

The CSS half of the proposal — a nested @haptic <effect> <intensity>? at-rule that fires when its parent rule starts matching — is design-TBD in the Chromium design doc. No build parses it, so this page shows the proposed syntax but makes no attempt to run it; a live concept will be added once a grammar lands.

see also