Zhuzhiliao: The Single-File Web Toy That Preserves a Vanishing Sound
A physics-first bamboo cicada built to run offline, survive dependency rot, and recreate the feel of a folk object through motion, audio, and procedural form.
- Zhuzhiliao preserves a folk toy by preserving its motion-sound loop, not just its shape.
- The core experience lives in one HTML file, which makes the project unusually durable and portable.
- Its audio only feels convincing because the physics engine drives it directly.
- The 3D layer adds polish, but the architecture is designed to survive without it.
The interesting thing about Zhuzhiliao is not that it is a web toy. It is that it behaves like a digital heirloom. The project tries to preserve a bamboo cicada, a folk object whose appeal lives in motion, friction, and sound, and it does that with a stack built to outlast the usual web churn.
That goal changes the engineering. Instead of leaning on a build pipeline, remote assets, or a package ecosystem that will age out, the repository keeps the core experience inside a single index.html. The result is less like a demo and more like a self-contained instrument.
What Exactly Is Being Preserved?
A bamboo cicada is simple in form and specific in behavior. You spin it, the string tenses, the stick vibrates, and the toy answers with that rough, rising wah-wah sound. Zhuzhiliao treats that chain as the artifact. The shape matters, but only because it helps produce the sensory loop.
The only official site is â any deployment on another domain is unauthorized and unaffiliated with this project or its author, who bears no responsibility for its content.
A Toy Built Like a Time Capsule
The architecture is aggressively small. The main file handles the physics engine, the 2D rendering path, the audio logic, and the offline behavior. A separate 3d/ directory adds a decoupled Three.js layer, but the baseline experience does not depend on it.
| Typical web toy | Zhuzhiliao |
|---|---|
| Build step, packages, remote assets | Single-file core, no build system |
| Offline as a bonus | Offline as a design constraint |
| External media and CDN reliance | Embedded audio and vendored support code |
| WebGL required for the main experience | Graceful fallback to 2D |
| UI animation drives the effect | Physics drives the effect |
The Part That Makes It Feel Real
Zhuzhiliao uses a fixed-step simulation at 1/240s, which matters more than it sounds. The toy depends on stable motion, not just pretty motion. That fixed cadence lets the program derive angular velocity and other state cleanly, then feed those values straight into the audio layer.
The audio branch has two paths. One uses a high-quality embedded recording and manipulates playback rate and phase so the recorded toy still feels alive. The other synthesizes the effect with oscillators, clipping, and bandpass filters. That fallback is not a consolation prize. It exposes the acoustic shape the sample is trying to capture.
Why the Sound Is Better Than a Loop
A loop would have been easier. It would also have been weaker. The sound here changes with motion, so the ear hears cause and effect instead of repetition. That is what makes the simulation believable: the audio is not decorative feedback, it is a consequence of state.
This is also where the project earns its preservation label. A static recording can remember a sound. Zhuzhiliao tries to remember the conditions that produce it. That is a harder target, and a more interesting one.
The 3D Layer Is a Bonus, Not the Core
The 3D layer lives in its own corner of the repo. It can fail, or be unavailable, and the main artifact still works. That separation matters because it keeps the experience honest: visual polish can disappear without breaking the thing that matters most.
`model.js` generates bamboo-like geometry and texture procedurally instead of loading a pile of assets. `boot3d.js` then receives the simulation state and applies it to the 3D view. The result is a nice extra, but the project does not depend on it to feel complete.
Off-topic content â in particular remarks targeting other individuals or public figures â will be removed.
Why This Stack Ages Better Than Most Web Demos
| Web demo habit | Zhuzhiliao choice |
|---|---|
| Multiple packages and tooling layers | No build process |
| Remote assets and external CDNs | Embedded or vendored dependencies |
| Optional offline support | Offline-first posture |
| Feature works only in the happy path | Fallbacks are part of the design |
| Visual novelty carries the project | Behavior carries the project |
That is the quiet bet underneath the repository. Zhuzhiliao is not trying to out-muscle the modern web stack. It is trying to survive it. The design says that a preserved experience should still be runnable when the surrounding ecosystem has moved on.
There is also a tougher edge to that bet. The README makes clear that the author wants control over where the project appears and how it is presented. That is a reminder that digital preservation is not only technical. It is also an argument about authorship, context, and consent.