Cereal Stays: a booking demo with its own scene controls

· 1 min read · react-three-fiber, three.js, tooling, launch

A 3D location booking scene with a small house in a stylized environment, the Cereal Stays demo

Cereal Stays is a 3D location booking demo, and the most interesting part of it is not the scene. It is the set of controls that was built to shape the scene.

The Cereal Stays scene

The idea #

Building with Three.js is about creative freedom, and this project leans into that. Together with @dieg0liv, I made custom scene controls that let us reshape the environment in real time: lighting, atmosphere and composition, all tunable while the scene stays live.

The debug tools are part of the demo #

What I like most is that these tools double as a way to share the process. Seeing how something was built has taught me more than any finished render, so the demo invites you behind the scenes: you can change the scene yourself and see which control does what.

What is in it #

  • live lighting controls,
  • atmosphere tuning,
  • composition controls, and a debug UI that is meant to be used as part of the experience,
  • React Three Fiber holding the scene together.

Try it #

The demo is live at cerealbnb-demo.vercel.app, and the details are on the project page.

Related projects