Back to workH/C中文
CASE STUDY / 012026

Dingsheng Gao

A gesture-controlled heritage experience

Dingsheng Gao project overview
Role

Interaction design · Visual direction · Front-end prototyping

Timeline

2026

Methods & tools

MediaPipe · HTML5 Canvas · JavaScript · CSS

01 / Overview

A browser-based somatosensory game that translates the making of Dingsheng Gao, a Song Dynasty pastry, into a four-stage gesture experience. Players pound rice, mix dough, conceal a message, and control steaming through real-time hand movement.

02 / Challenge

The problem had to be experienced, not only seen.

Traditional cultural heritage is often presented through passive text and images. The design challenge was to make the craft memorable for younger audiences without separating gameplay from its historical meaning.

03 / Process

01

Ludonarrative structure

The production sequence became the game structure. A secret note introduced during molding turns the historical story into an action performed by the player.

02

Gesture language

Fist, pinch, hover, fingertip movement, and waving are mapped to culinary actions using skeletal distance, trajectory, and velocity.

03

Immediate feedback

Frequency, mixing uniformity, fill order, heat, sound, and Song-inspired ratings make invisible system states understandable.

04 / Outcomes

04Gesture-driven stages
21Tracked hand landmarks
WEBZero-install experience

05 / Reflection

The project shows how cultural education can become embodied rather than explanatory. Future iterations could test gesture accessibility with a wider range of users and extend the framework to other crafts.

Next caseBashu Type