# Mana World: a scan score that becomes a living landscape

> A Three.js experience for Mana, where a product score drives the world around your companion: five biomes from Toxic to Harmony, in real time.

Canonical page: https://andersonmancini.dev/blog/mana-world-biomes

Published: 2026-09-10 · 1 min read · Tags: 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 landscape from Mana World](https://andersonmancini.dev/images/mana_health.webp)

## 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](https://mana-world-app.vercel.app/), and there is more on the [project page](https://andersonmancini.dev/projects/mana-health.md).

## Related projects

- [Mana Health](https://andersonmancini.dev/projects/mana-health.md) — React Native 3D App