Puff Pilot

Puff Pilot is a tiny daily browser timing game. Hold to grow a bright puff, release to shrink it, and try to match 16 incoming target rings before the 45-second route ends.

Why it is fun

• It is playable in one click and one button: the tension comes from deciding when to hold and when to release.
• The route is seeded by the Asia/Shanghai date, so everyone gets the same short challenge each day.
• Scoring is immediate: every ring becomes Perfect, Clear, Graze, or Miss, then the final grade is easy to share.

What it can do

• Runs as a static HTML/CSS/JavaScript game with no dependencies and no login.
• Tracks score, chain, daily best score, final grade, and gate-by-gate results.
• Labels the daily route as Calm, Gusty, or Storm so the challenge has a readable personality.
• Supports mouse, touch, and keyboard play.
• Copies a short share result with grade, route profile, local best, and best chain after a run.
• Adapts to desktop and narrow mobile screens.

Why it is useful

It is not a productivity tool. It is a small browser toy for a quick break, a daily score challenge, or a shareable example of a complete no-dependency canvas game.

Why it may be worth starring

• The premise is understandable from the screenshot and first click.
• The code is compact enough to read, fork, and remix.
• The daily seed gives it repeat-play value without a backend.
• It is complete: polished UI, responsive layout, route personality, scoring, local best, sharing, README, and license are all included.

Inspiration

This was inspired by recent public web-interest around short browser-native toys and pace-based interactions, including Show HN posts for quick web games and a simple paced-breathing CLI. Only the broad interaction idea was borrowed; the code, visuals, text, and scoring are original for this repository.

Run locally

npm install
npm run check
npm run serve

Then open:

http://localhost:5220/

Because the app has no runtime dependencies, opening index.html directly also works in modern browsers.

Core gameplay

1. Start the run.
2. Hold the grow button, mouse, touch, or spacebar to inflate the puff.
3. Release to shrink it before the ring arrives.
4. Finish all 16 gates and compare the grade, score, and chain.

Validation

The project includes npm run check, which verifies required files, mobile CSS coverage, README positioning, deterministic daily route generation, and scoring invariants.

With the local server running, npm run verify:browser opens Chrome through the DevTools protocol, checks desktop play, checks a 390x844 mobile viewport, confirms the canvas is not blank, and rejects horizontal overflow.

Manual browser validation should cover:

• First page load is not blank.
• Start button begins the route.
• Hold control changes puff size and score feedback advances.
• Copy Result enables after completion and includes the route profile plus local best.
• Desktop and 390x844 mobile layouts avoid horizontal overflow.

Future ideas

• Add a ghost replay of your best run.
• Add a daily leaderboard export format that remains privacy-safe.
• Add reduced-motion mode with discrete ring steps.