What is a gyroscope?

A gyroscope is a tiny sensor inside your phone, tablet, or laptop that measures rotation around three axes. Combined with the accelerometer and magnetometer, it tells the device which way it is tilted, how fast it is turning, and which direction it is facing. This data powers screen auto-rotation, augmented reality, racing games, panorama photos, step counting, and image stabilization.

Modern devices expose this information to web browsers through the DeviceOrientationEvent API. The browser reports three angles — alpha, beta, and gamma — which together describe the device's orientation in 3D space relative to the Earth.

Understanding alpha, beta, and gamma

The three orientation angles each describe rotation around a different axis:

  • Alpha (0–360°) — Rotation around the Z axis (vertical). Think of spinning the device flat on a table; alpha is the compass-like heading.
  • Beta (-180–180°) — Rotation around the X axis (left-to-right). This is the front-to-back tilt, like nodding the device toward or away from you.
  • Gamma (-90–90°) — Rotation around the Y axis (top-to-bottom). This is the left-to-right tilt, like tipping the device sideways.

Tool description

This tool reads live orientation data from your device's gyroscope and renders it as a 3D model that mirrors your movement in real time. It also displays the raw alpha, beta, and gamma values in degrees so you can verify the sensor is working correctly and producing accurate readings.

Examples

Device position Alpha Beta Gamma
Lying flat, screen up, top facing N 0° 0° 0°
Held upright in portrait mode 0° 90° 0°
Tilted right edge down (landscape) 0° 0° 90°
Rotated 180° flat, screen still up 180° 0° 0°

Features

  • Live 3D model that rotates in sync with your device
  • Real-time alpha, beta, and gamma readings in degrees
  • Detects whether the browser supports the orientation API
  • Handles iOS permission prompts for motion access
  • Shows whether the orientation data is absolute (referenced to Earth) or relative

Use cases

  • Diagnose a faulty sensor — Verify whether your phone's gyroscope is working correctly before sending it for repair or returning it.
  • Test web apps that use motion — Developers building AR experiences, motion-controlled games, or VR previews can validate sensor input directly in the browser.
  • Calibration check — Confirm that orientation values return to zero when the device is laid flat, helping you spot drift or miscalibration.

How it works

The tool subscribes to the browser's deviceorientation event, which fires whenever your device's orientation changes. Each event provides the current alpha, beta, and gamma values. The 3D model uses Three.js to convert these angles into a quaternion rotation, applied with smooth interpolation on every animation frame to avoid jitter.

Limitations

  • Requires a device with a built-in gyroscope (most desktops and many laptops do not have one)
  • iOS Safari requires explicit permission via a user gesture before sensor data is shared
  • Requires a secure context (HTTPS) on most modern browsers
  • Some browsers report orientation only when the page is in the foreground

Tips

  • If readings stay at zero, your device likely has no gyroscope or the browser is blocking access
  • On iOS, tap the "Enable motion" button after the page loads — permission cannot be granted automatically
  • Lay the device flat on a stable surface to confirm baseline values before testing tilts