Wooden Fish
Online Wooden Fish Meditation Tool
Quick update on — shipped a feature I've been wanting since launch: a meditation mode.
What it does
Instead of tapping manually, you can now flip an auto-play toggle and the wooden fish taps itself at a steady rhythm. You pick the speed (slow / medium / fast) and a duration (10, 20, 30, 60 min, or unlimited). When the session ends, it stops. That's it.
The intended use case: put on headphones, turn on auto-play at slow speed, and just listen. The wooden fish sound works surprisingly well as a meditation anchor — brief, predictable, not asking anything of you.
What made it annoying to build
Web Audio on mobile is a nightmare. A few things I ran into:
iOS suspends the AudioContext between taps if it was created without a user gesture. Each auto-tap then hit a resume() → warmup buffer → play chain that added ~150ms of latency. Fixed by pre-warming the context inside the toggle's change event (which counts as a user gesture), before the first auto-tap fires from setTimeout.
The animation and sound were out of sync — the fish visually "hit" 80ms after the sound played. Switched from a CSS transition to a keyframe animation that starts at the hit position, so both fire at t=0.
bfcache (back/forward cache): if you navigate away mid-session and hit Back, the page restores from cache with the toggle still on but the timer dead. Fixed with a pagehide listener that stops auto-play before the snapshot is taken.
What's next
Watch how meditation mode affects session length and return visits — curious if people actually use it for more than a few minutes
Keep building out SEO content. Just added meditation guide pages in EN/ZH/JA targeting "wooden fish meditation timer" — waiting to see if they get any traction in GSC
Niche directories and community posts. Still early on distribution, mostly experimenting with where the audience actually is
Hey IH,
Just launched Wooden Fish — a free, browser-based version of the wooden fish (muyu), the Buddhist percussion instrument that went viral on TikTok last year as "tap for merit."
Link: https://tapwoodenfish.com
Why I built it
Every other "online wooden fish" I found was crammed with ads or wanted me to sign up for what should be a 5-second interaction. I wanted something that respects the meditation roots — clean, free, no tracking, no install.
It's also my first SEO experiment on a 100% static site. I wanted to see how far you can get with no ops, no backend, and no JS framework.
Stack
- Pure HTML / CSS / vanilla JS, no build step
- Cloudflare Pages (drag-drop deploys, free tier)
- Real recorded muyu sample (3 KB MP3) + Web Audio fallback for instant first-tap response
- localStorage for the merit counter
- Trilingual (EN / 中文 / 日本語) with hreflang + Schema.org markup
- Total page weight: ~50 KB, loads in <300ms
Total cost: $9/year for the domain. That's all.
What's next
- Apply for AdSense in ~10 days (the only planned monetization)
- A blog covering the instrument's history, the TikTok angle, and Buddhist meditation context
- Watch GSC data and iterate on long-tail keywords
Where I'd love your feedback
1. Does the tap feel responsive on your phone? Mobile Web Audio is finicky and I want to make sure latency is OK across devices.
2. Anyone here bootstrapped a static content site to 1k DAU? Curious what actually moved the needle for you in the first 3 months — Reddit, niche directories, patient SEO, or something else?
Thanks for reading.
Comment