nuts

A phone-focused full-screen toy: a box of hex nuts bouncing around with haptic feedback.

Features

• Physics — Matter.js 2D rigid-body simulation
• Haptics — Web Vibration API fires on every wall impact (intensity scales with collision speed)
• Tilt gravity — Device orientation rotates the gravity vector so nuts roll as you tilt your phone
• Shake — DeviceMotion events detect shakes and punt all nuts with a random impulse + double-vibrate
• Configurable — Slider to set 1–50 nuts; reset positions on demand
• Offline-ready — No server, no data, runs entirely in the browser

Tech stack

• pnpm + TypeScript
• Vite — dev server and bundler
• Matter.js — 2D physics engine

Development

pnpm install
pnpm dev        # http://localhost:5173
pnpm build      # production bundle → dist/
pnpm preview    # preview dist/ build

Deployment

Hosted on GitLab Pages via .gitlab-ci.yml. Pushes to the default branch trigger a build and publish dist/ as the Pages site.

If your project is in a GitLab group/subgroup the Vite base: './' config ensures assets resolve correctly under the Pages sub-path.