Moonlit Lanterns

What it is

Six paper lanterns, each hanging from a bamboo stick with a candle flickering inside. Drag one to turn it, flick it and it keeps spinning until the paper slows it down. Pick another from the collection and the lantern swings out of view and a new one swings back in, with a soft rustle of paper.

There is a wind control that goes from still air to a typhoon, and an opt-in soundtrack. Every lantern has its own link, so you can send someone the exact one you like.

Why I built it

Mid-Autumn is the one festival where the whole point is a small light you carry around. I wanted to see how close a browser could get to that feeling. Not a game, not a product, just something quiet to hold for a minute.

How it was built

Built with Codex. Every lantern is made in code with Three.js, from the paper panels to the bamboo ribs and the tassel, rather than loaded from a 3D model file.

To make it more interesting, I asked ChatGPT to let four different models each design their own lantern. So four of the six were designed by the models THEMSELVES:

• Luna designed Quiet Column, a softly squared paper column.
• Terra designed Gilded Parlour, an Art Deco parlour with amber windows.
• Sol designed Calyx Afterglow, with petals curling open around a warm light.
• Astra designed Folded Dusk, a diamond of folded paper facets.

The other two, Vermilion Floral and Indigo Hydrangea, were designed by Codex with some design inspiration from me.

The swap between lanterns is a GSAP timeline. The paper sounds are synthesised in the browser, and the music is an original piece generated from code, so there are no samples or downloaded tracks. The page respects reduced-motion settings, falls back to still images where 3D is not available, and was tested on phones as closely as on a laptop.

The full story is on the blog.

Have a look at the lanterns, or come to a free AI Power Users meetup if you want to see how I build with AI.