ES Let's talk_
← Projects

[Project 07 · 3D game]

Totopía_

A pocket-sized planet where a company's story is played instead of read. You walk around, chop trees, build bridges and stairs, and at every station you uncover a chapter of the brand. We made it in the lab, from modeling in Blender to a game that runs in the browser.

TypeIn-house project · Lab Format3D browser game Our roleConcept, 3D, game and sound
How to play Play ↗
Totopía's start screen on a phone: the title in colorful letters over a low-poly planet with forests, desert and sea.

[totopia.vercel.app]

[The idea]

The "About us" page nobody reads, turned into a world you actually want to explore. Every chapter of the story is a place on the planet, and you have to earn your way there_

The character, an explorer in a turquoise cap, walks through the trees toward a little house with an orange roof; above, the mission “Find the little house where it all began” and a compass.

[Mission 1 of 5]

[Five missions]

One company,
five stations_

For the demo we invented Cuadro Alto, a fictional brand of hand-welded bikes from Guadalajara. When you reach each station, the camera turns cinematic and a chapter appears with its key fact. Some stations give you a tool to keep moving forward.

01 Station 1 card next to the little house: “A garage in Guadalajara,” 2016, the first weld; reward: axe.

Origin_

The little house where it all began: a garage, two friends and the first welded frame. Reward: axe.

02 Station 2 card next to the campfire: “The hands of the workshop,” 24 people in the workshop.

Team_

Around the campfire you meet the people who make the bikes.

03 Station 3 card next to the giant gear: “Every frame, by hand,” 1,200 bikes a year; reward: pickaxe.

Workshop_

The workshop is on an island. To get there you have to chop trees and build a bridge. Reward: pickaxe.

04 Station 4 card next to the lighthouse: “How far we've come,” 9,000 riders in 6 cities.

Lighthouse_

From the lighthouse you can see how far the brand has come and who it helps.

05 Station 5 card next to the rocket on the plateau: “What's next,” 2027, a folding e-bike.

Rocket_

What's next sits on top of a plateau, and you climb up on a staircase you build by hand.

[Earn the way]

Chop, mine,
build_

Tools change the map. With the axe, every tree gives you one plank, and ten planks build a bridge. The pickaxe breaks rocks, and thirty stones raise a spiral staircase. Finish all five missions and you unlock a boat to sail around the world.

Axe → 10 planks → bridgePickaxe → 30 stones → staircase5 missions → boat
A wooden bridge with railings crosses the sea toward the workshop island, where a giant gear turns.
[Bridge]
A stone spiral staircase climbs the wall of the plateau.
[Staircase]
The character sails a boat across a bay surrounded by forest, leaving a wake.
[Boat]

[Finding your way]

Nobody gets lost
on a small planet_

A light interface, in Totot's colors, that guides you without covering the world. Each station has its own color and icon throughout the interface.

Map view: the whole planet from above, with station 2 marked in red at 96 meters.

[Map view]

  • MissionA hint for the current mission and a bar with all five stations.
  • CompassShows which way each station is as you walk.
  • BeaconA beam of light and a marker with the distance, in meters, to the next station.
  • MapPress M and the camera rises to show the entire planet.
  • ActionsPrompts to chop, mine or build appear over the object in the world.
  • InventoryTools, planks and stones always in view.

[On the phone]

Played
with your thumb_

On touch screens, a joystick and buttons to jump and interact appear. Graphics quality adjusts automatically if the phone can't keep up.

Totopía's start screen on a phone.
The first station's card on a phone.
End screen: “You explored Totopía!”, boat unlocked and stats from the journey.

[Under the hood]

What we did_

The world, the character, the physics, the sound and the story, end to end.

A world made in Blender

A low-poly planet with forests, desert, islands and a plateau; a character with separate joints, and pieces for the bridge, staircase and boat. All exported to GLB with Draco compression.

Walking on a sphere

Gravity points to the center of the planet: the character walks, jumps and collides with trees and rocks anywhere in the world.

Building

The game measures the gap in front of you to know whether a bridge fits, and lays out the staircase so it always starts on solid ground.

Game-quality visuals

Contact shadows, bloom and tilt-shift blur; water shaders with foam along the shore, trees swaying in the wind, and particles.

Sound made in code

Footsteps, axe chops, the sea and a music box that changes chords are generated in the browser with Web Audio, without a single sound file.

A swappable story

The name, copy, facts and rewards for every station live in a single file. Change them and Totopía becomes another brand's story.

BlenderThree.jsthree-mesh-bvhpostprocessingN8AOWeb AudioViteDracoVercel

[Live]

Go around
the world_

Five missions and a boat at the end. Play with a keyboard or on your phone.

Play Totopía ↗