INTERACTIVE

Rangnam Loy Krathong

Walk for a krathong, float it on the real river.

Rangnam Loy Krathong
01

The Brief

A Loy Krathong you walk into. For the 2024 festival the City of Bangkok and King Power turned Santiphap Park into a single connected experience — part treasure hunt, part craft table, part light show on the water. Open the web app and the park becomes a trail: walk it, and at each stop your phone hands you a different krathong to collect. Trade what you gather for a paper krathong, colour it by hand, and scan it back in — and your krathong appears, projection-mapped, on the real surface of the river, floating among everyone else's. It keeps the ritual of Loy Krathong intact — make a krathong, set it on the water, make a wish — and rebuilds every step of it with light.

02

How it plays

Walk, collect, colour, float. It opens with no download — you register straight in the web app and start walking. The park is laid out as a location-based AR trail: reach a point and a krathong materialises through your phone camera to be collected, and every point gives a different one, so the route itself is the reward. Each krathong you collect can be exchanged for a physical colouring sheet — and walking the whole trail unlocks the full set, so the more you explore the more designs you can choose from. You colour your paper krathong by hand at the craft station, then scan it; the app reads your artwork, and out on the river you pick exactly where to set it down. A moment later it's there — your hand-coloured krathong, drifting on the real water under the projectors.

The loop

Open

Web app

Register in the browser — no install, just start walking.

Walk

AR trail

A location-based trail; each point reveals a different krathong to collect.

Colour

By hand

Trade your krathongs for a paper one and colour it at the station.

Scan

Read it in

Scan the finished krathong so the system can rebuild it digitally.

Float

On the river

Choose a spot; your krathong appears, projection-mapped, on the real water.

At a glance

1 night
Festival

Loy Krathong · 15 Nov 2024

3+
Projectors

Mapping krathongs onto the real river surface

Walk → Float
Loop

AR collection · hand-colouring · live projection

Hand-coloured
Krathongs

Every krathong on the water was coloured by a visitor

03

From paper to river

The magic trick is the river itself. Beneath the surface of the water at Santiphap, a mesh screen was laid out and lit by more than three projectors angled down onto it — so what looks like krathongs floating on the river is really a projection landing on the actual water. When a visitor scans their hand-coloured krathong and chooses a spot, it appears there in real time, sitting alongside every other krathong already on the surface; the whole crowd's work builds into one drifting field of light. The play screen and the projection mapping — the hardest, most physical part of the build — were created in TouchDesigner by CHAYANON, while the web app and realtime backend fed it a live stream of who'd floated what, and where.

Under the hood

~100
Capacity

Concurrent players — capped by the projection surface

25,000+
WS tx/sec

WebSocket throughput the server was benchmarked for

30+
Peak CCU

Concurrent players on the night

100+
tx/sec

Live updates flowing during the show

The stack

Next.js

App

Trail, collection and scan flow in one install-free web app.

Vercel

Hosting

Serves the app to every phone in the park.

MongoDB

Records

Players, collected krathongs and floats.

AR.js

On the trail

Location-based AR places each krathong at its point.

Elysia + Bun

Realtime

A Bun WebSocket server streams every float to the river screen live.

TouchDesigner

The screen

Drives the play screen and projection mapping onto the water (by CHAYANON).

Golden Lantern

#efc11b

Candle Rose

#c6494f

River Sapphire

#034ca0
04

Digital, but still by hand

What makes it land is that nothing about the ritual is faked away. You still walk to find your krathong, you still colour it yourself, you still choose where it goes on the water and watch it drift — the technology sits underneath, carrying the parts that couldn't scale otherwise. Built under 27JUNE Studio, with the river screen and projection mapping by CHAYANON in TouchDesigner, it stitched a location-based AR hunt, a physical craft station and a live projection-mapped river into a single loop — so a hundred people could each make one krathong, by hand, and see it floating on the real river of Santiphap Park.

Walk the trail to earn your krathong, colour it by hand, scan it — and watch it drift onto the real river, beside everyone else's light.

WALKCOLLECTCOLOURSCANFLOATWALKCOLLECTCOLOURSCANFLOATWALKCOLLECTCOLOURSCANFLOAT