Five Elements Turn Your Life
Three.js 3D · Phone Motion Controls · Canvas Image Compositing
Play Game
Five Elements Fortune is an interactive mobile web experience based on the Chinese Five Elements: Wood, Fire, Earth, Metal, and Water. Tilt and sway your phone to roll the capsules inside a 3D capsule machine and draw the element that’s meant for you. Then add text or a doodle to create your own digital fortune card and share it with friends. No app download needed. Just open it in your phone’s browser and play.
How to Play
- Enter: a typewriter-style animation opens the experience.
- Spin the capsules: sway your phone to roll the capsules in the 3D machine, then press and hold for 2 seconds to lock in your fortune.
- Open your capsule: a 3D opening animation reveals your element with a matching glow. There’s a 10% chance of drawing the hidden Mystery element.
- Make your fortune card: add text or doodle freely on the card, with a live preview of the result.
- Share: open your phone’s built-in share menu with one tap and send it to friends.
The Five Elements & Their Glow Colors
- Wood: green
- Fire: red
- Earth: brown
- Metal: gold
- Water: blue
- Mystery element (10% chance): black
Technical Implementation
- 3D capsules: Three.js generates capsule geometry in code, with a spin-and-split opening animation
- Motion controls: the DeviceMotionEvent API reads your phone’s tilt to roll the capsules
- Dual-scene architecture: the capsule machine and the capsule chute run as two separate scenes, so their physics never interfere with each other
- Element glow: a glow effect in the matching color is generated in real time based on your element
- Fortune card compositing: Canvas layers the base artwork, your text or doodle, and a drop shadow
- Upload & share: the image is uploaded to a server to get a URL, then shared through the Web Share API
