Zhuzhiliao: What It Is and How I Turned It into a Mobile Web Game

Zhuzhiliao: What It Is and How I Turned It into a Mobile Web Game

Zhuzhiliao is a traditional Chinese bamboo whirring toy made from a small bamboo body, a thin membrane, string and a handle. Pulling and spinning it produces a distinctive sound. If you searched for “Zhuzhiliao” because you want to know what it is or try one online, you can play XBSTACK’s no-download browser version below before reading the build log.

I kept seeing the toy appear in social feeds as a nostalgic stress reliever and, jokingly, as “the best toy under ten million yuan.” What makes it compelling is the short feedback loop: a small movement immediately changes the sound and motion, which naturally makes you try again and spin it faster.

Instead of buying one, I rebuilt that interaction as a browser game. It works on desktop and mobile: taps add speed, press-and-hold applies continuous drive, dragging changes the anchor and trajectory, and supported phones can enable gyroscope and accelerometer input.

Play it before reading the build log

Open the Zhuzhiliao web game and tap once to spin

There is no account, installation or onboarding wall. Open the page and interact with the toy directly.

Why a simple traditional toy still works

Zhuzhiliao fits a broader shift toward participatory, nostalgic and low-friction play.

QuestMobile’s 2026 report on China’s “childlike economy” found that nearly 30% of adult users followed related content in April 2026, with more than 26 million heavy-interest users. The report also notes that demand is expanding from collecting products toward hands-on participation, immediate relaxation and emotional experience. Read the original QuestMobile report.

Zhuzhiliao works because it has almost no learning curve. It can be picked up instantly, produces a clear response and does not demand a long session.

The interaction loop is short:

Apply a little force
→ the toy moves immediately
→ speed and sound change
→ the player tries again

That is the loop the web version needed to preserve.

This is not a looping animation

The easiest implementation would have been a rotating illustration with a canned sound effect. It would look active, but player input would not meaningfully affect the result.

The XBSTACK version uses Canvas 2D and a real-time pendulum-style simulation. Rope length, anchor position, angular velocity, damping, gravity and tangential impulses all influence the next frame. Tapping, holding and dragging modify the simulation state rather than switching between prerecorded animations.

Web Audio generates feedback from the current energy level. At low speed the sound remains subtle; as energy rises, the volume and tone change. Muting audio does not stop the physical simulation.

The game tracks score, energy, rotation count, active time, speed tier and the device’s best score. The best score remains in local browser storage, and the game does not require a user account or upload gameplay data to a server.

The first tap had to do something

The first release had a clear mobile UX problem.

The press-and-hold acceleration control sat below the canvas, so users could not see it without scrolling. The first tap only started the session instead of producing a strong visible acceleration.

That is acceptable for some tools, but it wastes the most important second of a toy.

I compressed the mobile first screen, moved the hold control into the bottom of the game canvas and changed the input model:

First tap: apply an immediate impulse
Rapid taps: stack additional speed
Press and hold: apply continuous tangential drive
Release: allow damping to reduce speed naturally

Rapid taps are grouped within a 420-millisecond window. The faster the user taps, the larger the additional impulse becomes.

The interface no longer expects the user to read instructions before understanding the toy.

Four ways to control it

Tap to accelerate. A tap on the toy or canvas immediately increases rotational energy.

Hold to keep driving. Holding the main button applies force continuously and is the fastest way to reach higher energy tiers.

Drag to change the trajectory. Dragging changes the rope anchor rather than moving a flat image. The body responds to the new anchor, current velocity, rope length and gravity.

Use phone motion controls. On supported devices, tilt changes the anchor offset while stronger rotation or shaking can be converted into a bounded acceleration impulse.

Motion input is optional. Tap, hold and drag remain the reliable fallback when permission is denied or the browser does not expose the required sensors.

Faster motion should not mean visual chaos

I considered adding constant likes, flowers, applause, stamps and particle effects. That quickly became distracting.

The final system triggers feedback from simulated energy rather than raw phone movement. Low speed produces a small prompt. Medium speed can unlock leaves, petals, likes and a short vibration. Higher sustained energy produces stronger trails and milestone feedback.

Each tier has a cooldown, so the same reward does not repeatedly cover the toy.

The principle is simple: feedback should explain the state, not become the main subject.

Why motion sensors matter

Many mobile web experiences are desktop interfaces squeezed onto a smaller screen. Zhuzhiliao is different because the physical toy depends on hand movement.

The optional motion mode combines device orientation, acceleration and gyroscope signals. Tilt affects the anchor, a deliberate shake becomes a controlled impulse, and rotation direction influences movement.

Sensor values are clamped and cooled down before they affect the simulation. The sensors provide input, but the simulation still determines the visible result.

The phone becomes part of the controller instead of merely displaying an animation.

What has been verified

The web core currently has 11 automated tests covering rope constraints, large-frame stability, tap impulses, hold drive, low-energy scoring, sustained high-energy time, best-score persistence, share copy, rotation formatting, reset behavior and tiered feedback.

The page also passes Astro type checks and production builds. It does not depend on login or a backend API, so the static game remains playable even when unrelated backend services are unavailable.

Why the project is open source

A trend can bring one burst of attention. A repository can keep the implementation discoverable.

The game has been extracted into a standalone React, TypeScript, Canvas 2D, Web Audio and Vite project under the MIT License:

View the xbstack/zhuzhiliao-web repository

The repository does not contain the XBSTACK site source, private operations logic or internal configuration. It contains the game implementation, architecture notes, local setup, tests and project documentation.

There is no separate GitHub Pages demo. The official playable version remains on XBSTACK Toy Folk Laboratory.

Search and social platforms
→ XBSTACK article
→ playable Zhuzhiliao page
→ open-source GitHub repository

Turning a short trend into a durable asset

A trend-only article loses value quickly. A game without an explanation page is difficult to discover.

This project connects three assets:

• the article answers informational searches about what Zhuzhiliao is and why it is interesting;
• the playable Zhuzhiliao page serves people looking for a Zhuzhiliao web game;
• the GitHub repository serves developers interested in Canvas physics, Web Audio and device sensors.

The trend brings people in, the product gives them something real to use, and the open-source repository creates a path for references and external links.

Play now

No download and no account are required. Desktop and mobile browsers are supported, audio can be muted, motion control is optional, and the best score remains on the current device.

Open the Zhuzhiliao web game: the first tap accelerates immediately

Zhuzhiliao is toy number 001 in the XBSTACK Toy Folk Laboratory. The next step is not adding endless features, but finding other traditional toys that can still feel good when translated into modern interaction.

Changelog

August 5, 2026: First public web release with mouse, touch, keyboard and mobile motion support.

August 6, 2026: Added immediate first-tap acceleration and rapid-tap stacking, compressed the mobile first screen, moved hold-to-accelerate into the canvas, and completed the standalone open-source repository and site cross-links.