popcat-clone

A classic Popcat clicking meme game with animated mouth, popping audio, and click counter.

Click, tap, or press Space/Enter on the cat: its mouth pops open for as long as you hold, a "pop" plays, and the counter goes up. Works on desktop and mobile, remembers your count and best score, and has a mute toggle.

• Large Popcat character with open/closed mouth frames (holding keeps the mouth open)
• Procedurally generated pop sound via the Web Audio API — no audio files, no autoplay issues
• Accurate click counter with thousands separators, rolling pops/sec, and persistent best score
• Keyboard accessible (focusable cat button, Space/Enter to pop, labelled controls, live region for the count)
• Responsive layout, touch-friendly (no zoom/scroll fighting), respects prefers-reduced-motion

Requires Node.js 20+.

npm install

npm run dev

Opens a Vite dev server (default http://localhost:5173).

npm run build      # type-checks then bundles into dist/
npm run preview    # serves the production build locally

dist/ is a static site — deploy it to any static host (GitHub Pages, Netlify, Vercel, etc.).

npm test           # unit tests (Vitest) for counter, persistence and rate tracking
npm run typecheck  # TypeScript only

index.html          page shell
public/             static assets (cat SVG frames, favicon)
src/main.ts         input handling, animation, wiring
src/audio.ts        Web Audio pop synthesizer + autoplay unlock
src/counter.ts      counter, localStorage persistence, pops/sec tracker
src/counter.test.ts unit tests
src/style.css       styling

Browsers refuse to play sound until the user interacts with the page. The AudioContext is created lazily and resumed inside the first pointer/keyboard handler, so the very first pop already makes sound. Muting is remembered in localStorage.

• public/cat-closed.svg, public/cat-open.svg, public/favicon.svg — original vector artwork created for this project, released under the repository's MIT license. They are inspired by, but are not, the original Popcat photograph (which is not included to avoid copyright issues).
• Pop sound — synthesized at runtime in src/audio.ts; no third-party samples are used.
• Code — MIT License.