Chapter 55: Screen Orientation & Device APIs

The Vibration API & Mobile Haptic Feedback

**Part 11: HTML5 APIs Part 2** — Chapter 55: Screen Orientation & Device APIs

LEARNING OBJECTIVES ⌵

Understand the W3C Vibration API specification (navigator.vibrate()).
Implement single pulses, multi-step vibration patterns, and haptic feedback loops.
Respect user accessibility preferences and prevent battery drain.
Cancel running vibration sequences via navigator.vibrate(0).

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story

Haptic feedback adds physical tactile depth to digital interactions. When tapping an on-screen drum pad, making an e-commerce purchase, or failing a form submission on mobile, a subtle vibration provides instantaneous physical confirmation.

navigator.vibrate([200, 100, 200, 100, 400]);
                   |    |    |    |    |
                   |    |    |    |    +---> Vibrate for 400ms
                   |    |    |    +--------> Pause for 100ms
                   |    |    +-------------> Vibrate for 200ms
                   |    +------------------> Pause for 100ms
                   +-----------------------> Vibrate for 200ms

💻 Interactive Code Playground

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vibration API Haptics</title>
  <style>
    body { font-family: system-ui; background: #0f172a; color: #f8fafc; padding: 2rem; }
    .btn { padding: 0.75rem 1.5rem; margin: 0.5rem; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
    .success { background: #10b981; color: white; }
    .error { background: #ef4444; color: white; }
  </style>
</head>
<body>
  <h1>Mobile Haptic Feedback</h1>
  <button class="btn success" onclick="triggerHaptic('success')">Success Pulse</button>
  <button class="btn error" onclick="triggerHaptic('error')">Error Buzz</button>
  <button class="btn" style="background:#64748b; color:white;" onclick="navigator.vibrate(0)">Cancel</button>

if (type === 'success') {
        // Quick subtle click
        navigator.vibrate(40);
      } else if (type === 'error') {
        // Double-buzz warning
        navigator.vibrate([80, 50, 80]);
      }
    }
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

📌 Key Takeaways

Pass an array of numbers to navigator.vibrate([vibrateMs, pauseMs, vibrateMs]) for complex haptic patterns.
Pass 0 or an empty array [] to immediately cancel any active vibration.
The Vibration API requires a secure context and an active user gesture.
--

❓ Knowledge Check

1. Which of the following is correct?

A) - Pass an array of numbers to navigator.vibrate([vibrateMs, pauseMs, vibrateMs]) for complex haptic patterns. B) The opposite of the above statement is true.

2. Which of the following is correct?

A) - Pass 0 or an empty array [] to immediately cancel any active vibration. B) The opposite of the above statement is true.

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story

💻 Interactive Code Playground

📌 Key Takeaways

❓ Knowledge Check