Bubbles
Your phone is a glass of water.
Tilt to slosh. Tap to drop things in. Some float. Some sink.
Live demo: https://apps.fuzzyworld.net/bubbles/
Repository: https://code.fuzzyworld.net/bubbles/ (git clone https://code.fuzzyworld.net/bubbles.git)
What it does
| Action | Result |
|---|---|
| Tilt phone left/right | Water sloshes toward the low side |
| Tilt past ~45° | Water spills over the rim (permanently lost) |
| Tap anywhere | A random object drops into the water |
| Desktop | Move mouse left/right to simulate tilt |
Objects
| Icon | Density | Behaviour |
|---|---|---|
| 🏓 Ping pong | 0.10 | Bobs wildly on the surface |
| 🦆 Duck | 0.50 | Floats high |
| 🍎 Apple | 0.80 | Floats |
| 🍋 Lemon | 0.85 | Floats |
| 🧊 Ice | 0.92 | Barely floats |
| 🐟 Fish | 1.05 | Barely sinks |
| 🪨 Rock | 2.60 | Sinks |
| 💎 Gem | 3.50 | Sinks |
| ⚓ Anchor | 7.50 | Sinks fast |
| 🔩 Bolt | 7.80 | Sinks fast |
Max 12 objects at a time — the oldest is removed when you add a 13th.
Tech
- TypeScript + Canvas 2D API (no framework, no WebGL)
- Vite for bundling
- pnpm for package management
- Static hosting at apps.fuzzyworld.net (no server)
Physics:
- 1-D column wave simulation (80 columns, spring-coupled)
- Buoyancy via submerged fraction of circle cross-section
- Elastic damped circle vs. circle + wall collisions
- DeviceOrientationEvent for real tilt; mouse fallback on desktop
Development
# Install dependencies
pnpm install
# Generate favicons and og-image from wind.png
pnpm gen-assets
# Start dev server
pnpm dev
# Type-check + production build
pnpm build
Output goes to dist/.
Deploy
pnpm run deploy
fw deploy (from fuzzyworld-tools) builds a fresh clone of main:
pnpm install → pnpm gen-assets → pnpm build → upload dist/
and publishes it at https://apps.fuzzyworld.net/bubbles/
Attribution
Wind icon by Icongeek26 from Flaticon.