Mobile Motion Experiment
Gravity Lab
A mobile-first motion toy using phone tilt, rotation, liquid slosh, hourglass-style sand, a gravity marble, and browser-generated sound. Open it on your phone for the real version.
Status
Open this page on your phone, tap Enable Motion + Sound, then tilt your phone.
Motion
Not Started
Sound
Off
Tilt Strength
0/100
Mode
Manual
Desktop / Fallback Controls
Test the physics without phone motion.
These sliders simulate phone tilt. On a phone, tap Enable Motion + Sound and the real device orientation will take over.
Liquid Cup
Tilt your phone and the liquid surface rotates. Tilt too far and it starts pouring.
Pour Count
0
Liquid Height
52%
Phone Tilt Hourglass
Rotate your phone forward or backward and the sand visually transfers between chambers.
Sand is mostly in the bottom chamber.
Flip Count
0
Tilt Y
0.0°
Gravity Marble
A little marble rolls based on phone tilt. On desktop, the fallback sliders control gravity.
Bounces
0
Position
50, 50
Live Motion Readout
Raw phone sensor values and calibrated effective tilt values.
Raw Gamma
0.0°
Raw Beta
0.0°
Raw Alpha
0.0°
Effective X
0.0°
Effective Y
0.0°
Strength
0/100
Mobile note
This works best on a real phone over HTTPS. iPhone usually asks for permission first. Android often starts immediately after the button tap.
Portfolio Value
This is a mobile-first frontend experiment.
Gravity Lab demonstrates the DeviceOrientation API, permission handling, mobile motion input, browser-generated sound, physics-like movement, animation, React state, refs, timers, calibration, and responsive UI design.