av/safe-sand

What it is

Safe Sand puts a layer of simulated sand on a phone screen. The grains slide when you tilt the phone, lag behind when you jerk it, form a channel when you drag a finger, and fall away when you turn the phone face-down. It is aimed at anyone who wants an interactive physics toy in the browser; the same code is also packaged as an Android app.

The simulation runs on the GPU with WebGL2 and uses physical units (millimetres and 9.81 m/s²). Roughly 100k–460k grains each carry size, mineral colour and friction, so isolated grains roll while bulk sand holds until the tilt passes its angle of repose. A per-frame height field provides slope forces, self-shadowing and ambient occlusion, and the light direction follows the phone's tilt. Audio is granular and synthesized from how much sand is actually moving, so a still scene is silent. Quality steps down on slow devices and is remembered across visits (README).

Quick start

Open the phone build at the project's web address (open the simulator). On the start card, choose a sand type and what lies underneath, tap "Pour", and allow motion access on iOS. For true fullscreen, add the site to the home screen on iOS or install the app on Android. Rotating the phone does not rotate the sand; the image stays fixed to the glass.

To run it locally, no build step is needed. Serve the folder over HTTP and open it in a browser:

python3 -m http.server 8000

On desktop, drag with the mouse to push sand, use arrow keys or WASD to tilt, and hold Space to shake. Query parameters let you set the sand type (sand=river|beach|desert|volcanic|coral), screen theme, grain cap, density, PPI, seed, accelerometer inversion (flip) and manual test stepping (README develop section).

Android build

The Android app (io.github.av.sand) is built with Capacitor and adds AdMob ads, a consent form in the EEA, and a one-time "Sand Pro" purchase that removes ads and unlocks Desert, Volcanic and Coral; without it, a rewarded video unlocks those themes for 24 hours. Android builds need JDK 21, the Android SDK and OpenGL ES 3.0, and are built with npm ci, npm test, npm run sync, then ./gradlew assembleDebug in the android directory. Release signing and Play upload require the documented CI secrets, and remaining account, ad and purchase setup is covered in the release checklist (Capacitor).

Constraints

• Licensing is not declared in the repository, so redistribution and reuse terms are unclear.
• The simulation requires WebGL2; the Android app additionally requires OpenGL ES 3.0.
• Motion input needs permission on iOS, and the silent switch mutes audio there. If tilt moves sand the wrong way on a device, the flip query parameter inverts the accelerometer sign.
• Quality reductions during a session are permanent for that session; the remembered level for the next visit is one step more optimistic.
• The web version has no ads or in-app purchase; those features exist only in the Android wrapper.

HotRepo's take

The project appeared on HotRepo's new JavaScript list with 103 stars and 12 forks on 2026-11-12, after gaining 3 stars in the recorded roughly one-hour growth window. It has no recorded best rank on the all-language daily list, and the available series is too short to support any trend claim. What stands out technically is the choice to simulate individual grains on the GPU in real units and derive both shadows and granular sound from the same per-frame state, which is what makes the tilt and drag interactions feel coherent rather than scripted.