The full, copy-pasteable prompt I used to build a satisfying wind-chime app — a single self-contained HTML file with Matter.js pendulum physics, synthesized inharmonic chime tones, and three canvas variants.
Overview
This is a build prompt for a calm, satisfying wind-chime app — a row of chimes hanging from a wooden beam that swing and ring when you brush a cursor or finger across them. The whole thing ships as a single self-contained HTML file: no build step, no dependencies to install, no server. You double-click it and it runs. The physics come from Matter.js, the sound is fully synthesized with the Web Audio API (no audio files), and everything is drawn with the raw Canvas 2D API.
What it produces: a tight cluster of pendulum chimes with clamped, damped swing (never chaotic), struck-metal-tube tones built from inharmonic partials mapped to a pentatonic scale, pointer/touch brushing with per-chime debounce, an ambient "Wind" toggle, a warm paper/zen aesthetic — plus three rendering variants (metallic tubes, vertical text columns, and a cloth-like rope of per-character physics bodies).
The prompt
Copy everything below into Claude (or any capable coding model) to recreate the project from scratch.
Build me a viral, satisfying wind chime app as a single self-contained HTML file (no build step, no dependencies to install, no server — it must run by just double-clicking to open in a browser).
CORE IDEA
A row of chimes hangs from a wooden beam near the top of the screen. When I brush my cursor or finger across them, they swing and play a pleasant wind-chime tone. It should feel calm and beautiful, not chaotic.
PHYSICS (use Matter.js from CDN)
- Load Matter.js 0.19.0 from cdnjs.
- Each chime hangs from a fixed anchor on the beam like a pendulum (pinned at the top via a constraint).
- Critical: chimes must never do a full 360° rotation and must never feel chaotic. Every physics frame, clamp each chime's angle to about ±35° (±0.62 rad) and cap its angular velocity. Use generous air damping so a nudge produces a gentle swing that settles smoothly back to vertical.
- Pack the chimes close together — derive the count from the screen width using a fixed small gap, so they form a tight cluster rather than being spread far apart.
- Vary chime length along a gentle arc (longest in the middle) for a natural cluster look.
AUDIO (Web Audio API — fully synthesized, no sound files)
- Wind-chime timbre = a struck metal tube: additive synthesis with inharmonic partials (ratios like 1, 2.76, 5.4, 8.93, 13.3), each a sine oscillator with a fast attack and exponential decay; higher partials decay faster.
- Add a faint triangle-wave "tick" for the strike transient.
- Add a light reverb tail using a few feedback delay lines with a lowpass in the feedback path.
- Map notes to a pentatonic scale across a couple of octaves; longer chimes = lower notes. This keeps every brush sounding musical.
- Initialize/resume the AudioContext on first interaction.
INTERACTION
- On pointer/touch move, detect which chimes the pointer is brushing and apply a small horizontal impulse in the direction of motion, scaled by pointer speed and capped.
- Debounce each chime (~130–140ms) so it doesn't retrigger every frame.
- Support both mouse and touch (preventDefault on touch).
- Add an ambient "Wind" toggle (bottom-right button): a slow gusting force that makes the chimes sway and occasionally chime on their own.
- Show a subtle "drag across the chimes" hint that fades away after the first interaction.
RENDERING & AESTHETIC
- Use the raw HTML5 Canvas 2D API, drawn each frame in a requestAnimationFrame loop — do NOT use Matter's built-in renderer.
- Make it DPR/retina-aware.
- Aesthetic: warm paper/beige background (radial gradient), a subtle SVG turbulence grain overlay, a dark wooden beam, and elegant serif typography for the title. Minimal, Japanese/zen-inspired, gallery-quality.
- Add a soft warm glow on a chime when it's struck, decaying over time.
CONSTRAINTS
- Everything in ONE .html file: inline CSS and JS.
- No localStorage/sessionStorage — keep all state in memory.
- Verify it runs without console errors before finishing.
THEN MAKE THREE VARIANTS (separate files)
1. wind-chimes.html — chimes rendered as metallic/bamboo tubes (thin rounded rectangles with a gradient and a top cap).
2. wind-chimes-text.html — each chime is a rigid vertical column of characters (like ink text flowing down) instead of a tube. Same physics; render stacked characters rotated with the strand, fading slightly toward the tail, with a small ink bead as the clapper.
3. wind-chimes-cloth.html — each strand is a chain of per-character physics bodies (a rope of beads) linked by distance constraints and pinned at the top, so it ripples and drapes like cloth when brushed and each character has its own physics. Tune the chain (stiffness ~0.9, damping, air friction, velocity cap, extra position/constraint iterations) so it's stable, never explodes or whips, and settles calmly. Draw a thread through the bead positions and rotate each character to follow its segment.
For the text variants, use classic Chinese poetry lines about travel and journeys (wholesome, inoffensive — e.g. lines from Li Bai, Lu You, Wang Bo, Laozi) set in a Song/Ming serif CJK font. Make the strand text easy to swap.
Save all three files into a folder called wind-chimes/.
The details that make it feel calm, not chaotic
A naive pendulum sim looks frantic — bodies whip around, overshoot, and never settle. Three constraints in the prompt fix that:
- Clamp angle and angular velocity every frame. Capping rotation at ±35° and limiting angular velocity is what stops a chime from ever spinning a full circle. This is enforced in the physics loop, not left to the solver.
- Generous air damping. A brush produces one gentle swing that eases back to vertical instead of oscillating forever.
- Per-chime debounce (~130–140ms). Without it, a fast pointer retriggers the same chime every frame and the audio turns into a buzz. Debouncing keeps each strike distinct and musical.
Why the audio is synthesized, not sampled
Real chime timbre comes from a struck metal tube, whose overtones are inharmonic — they aren't clean integer multiples of the fundamental. Using partial ratios like 1, 2.76, 5.4, 8.93, 13.3 with fast attacks and staggered exponential decays reproduces that metallic shimmer with pure oscillators, no sound files to load. Mapping longer chimes to lower pentatonic notes guarantees that any brush — however random — lands on something that sounds intentional.