Mana World: a scan score that becomes a living landscape
· 1 min read · three.js, react-three-fiber, shaders, launch
Mana is a science-backed, community-powered scanner. You point it at something you are about to buy, and it gives a Mana Score, grounded in research, at the moment you choose. The idea is that people should understand what goes in or on their body before they buy it.
The Three.js experience I built for it answers a design question: how do you make a score something you can see, and not only read?
A score that becomes a place #
The answer is a world. Your companion moves through five biomes that shift according to your scanning patterns, from Toxic to Harmony. The Biome Score drives the atmosphere, the environment and the mood, in real time, in the browser.
So the products you scan change the place you are in, from a Toxic world to a Harmony one.
How it is told #
It is built as an interactive story for Mana World: scan, learn, decide. Custom shaders handle the atmosphere, and React Three Fiber holds the scene together.
Try it #
The experience is live at mana-world-app.vercel.app, and there is more on the project page.
Related projects
- Mana Health — React Native 3D App