Move the jar slowly toward a firefly. They'll dodge once you're close — keep it on them for about half a second and they're caught. Fill the jar to 7 and a button appears: release them as a constellation. The meadow refills, the hunt continues.
A "don't disturb" widget: anywhere a user is supposed to slow down. The whole mechanic punishes rushing. Drop it in a "thank you" page after submission, a reading pause inside a long essay, a meditation app, or a slow homepage section.
Also: it makes a charming 404. The meadow is empty, the fireflies are not.
The meadow, the jar (follows cursor), a HUD, fireflies injected by JS.
<div class="meadow" id="meadow" data-count="7" data-quota="7"> <div class="jar" id="jar">...svg jar...</div> <div class="hud">...counter + release button...</div> </div>
Each firefly has a slow drift (sine + noise). On each frame: if jar is within
ALERT px, push the firefly directly away from the jar; if it stays
within CATCH px for CATCH_MS, it's caught.
// Swamp UI — Firefly Catch (dodge + catch loop) const ALERT = 90; // px — distance at which they start dodging const CATCH = 22; // px — distance that counts as "on top" const CATCH_MS = 500; // must stay close this long flies.forEach(f => { // natural drift f.vx += Math.cos(f.t) * 0.02; f.vy += Math.sin(f.t * 1.3) * 0.02; f.vx *= 0.92; f.vy *= 0.92; // dodge if jar is near const dx = f.x - jar.x, dy = f.y - jar.y; const d = Math.hypot(dx, dy); if (d < ALERT) { const push = (ALERT - d) / ALERT * 0.9; f.vx += (dx / d) * push; f.vy += (dy / d) * push; f.el.classList.add('alert'); } else f.el.classList.remove('alert'); // catch timer if (d < CATCH) f.held += 16; else f.held = Math.max(0, f.held - 8); if (f.held >= CATCH_MS) capture(f); f.x += f.vx; f.y += f.vy; f.t += 0.04; bounce(f); draw(f); });
| Where | Default | Effect |
|---|---|---|
HTML data-count | 7 | How many fireflies live in the meadow at once. |
HTML data-quota | 7 | How many you need before the RELEASE button appears. |
JS ALERT | 90 px | Dodge radius. Lower = harder to scare. Higher = jumpier. |
JS CATCH | 22 px | How close the jar must be. Lower = harder. |
JS CATCH_MS | 500 | How long you must hold them. Higher = more patient game. |