Firefly Jar

Build **"Firefly Jar"**: an interactive 3D miniature, a glass **mason jar** on a wooden desk at night with a tiny **forest inside** (pine trees, a little cabin with a lit window, a pond, moss and stones) and dozens of **glowing fireflies** drifting around it. You can tap the glass, turn the jar, switch day and night, and **unscrew the lid** so the fireflies float out into the room. ONE self-contained HTML file.

It must be **beautiful above everything**, like a frame from a premium animated film: warm firefly glow coming through thick glass, soft reflections, a dark cozy room. Every motion eases, overshoots a little and settles; nothing pops or teleports. The very first frame must already look stunning, because people will see it as a still in a feed.

## Priorities

Build in this order and finish each tier properly before the next. A polished tier 1 beats a broken everything.

1. **Must be excellent:** the glass jar (thickness, refraction, Fresnel edges, highlights, the glow showing through it), the fireflies (soft blinking glow, natural wandering flight, light falling on the trees and pond), the night lighting of the room, the lid-opening moment, the demo mode.
2. **Must work:** tapping the glass, turning the jar, day/night, the cabin light, the pond reflections, the control card, sound, camera.
3. **Polish:** moths at the cabin window, ripples where a firefly touches the pond, condensation on the glass that fades, a tiny smoke wisp from the cabin chimney.

Never ship a feature half-working: if a tier-3 feature can't be done well, leave it out cleanly.

## Tech

* three.js r170 with WebGPURenderer (automatic WebGL2 fallback). Load it with an importmap from jsDelivr: map "three", "three/webgpu" and "three/tsl" to `three@0.170.0/build/three.webgpu.min.js`, and "three/addons/" to `three@0.170.0/examples/jsm/`.
* Use TSL node materials, OrbitControls from the addons, and a BloomNode pass (strength ~0.6, threshold ~1.2) so only emissive things glow (fireflies, the cabin window, the desk lamp's bulb, the moon).
* No other network requests: no images, textures, fonts or audio files. Draw every texture on a canvas or generate it as pixel data. Synthesize every sound with WebAudio. Use a system rounded sans-serif font stack.
* Start the file with `<!doctype html>`, `<meta charset="utf-8">` and a viewport meta tag.
* It must run inside a sandboxed iframe (`sandbox="allow-scripts allow-pointer-lock"`, no `allow-same-origin`). There, `localStorage` and cookies throw: wrap every storage access in `try/catch`. No `alert`, pop-ups or top-level navigation.
* Neutral tone mapping, soft shadows (2048 map, 1024 on phones).
* Fireflies are instanced (one draw call), each also feeding a small budget of real point lights (about 6–8, assigned to the fireflies nearest the camera or the scene centre) so their glow actually lights the trees, moss and water.
* Known three r170 pitfalls, avoid them:
   * the scene background is drawn after transparent objects, so draw the room backdrop as a mesh, or transparent things disappear;
   * never `.clone()` a CanvasTexture (the clone uploads black);
   * an InstancedMesh whose `count` is below its capacity when its shader is first built gets a wrong-size uniform buffer: build it at full count, and never drop below 2 instances.
* The simulation runs on a fixed 60 Hz timestep and is frame-rate independent.
* A quality scaler lowers the pixel ratio, then the light budget, when frames get slow.
* Respect prefers-reduced-motion: calmer camera, slower fireflies.

## The scene

* **The jar:** a classic tall mason jar (about 20 cm) of slightly green-tinted thick glass with embossed lettering drawn on a canvas, a rounded shoulder, and a brass **screw lid** with a few punched air holes. Real-looking glass: refraction of what is inside and behind, bright rim highlights, Fresnel reflections, a faint caustic on the desk.
* **Inside:** a mossy mound filling the bottom third: 5–7 small pine trees of different heights, a tiny log cabin with a warm lit window and a chimney, a still pond reflecting the fireflies, a few stones, ferns and a small wooden bridge or path.
* **Fireflies:** 40–60 of them, soft yellow-green, each blinking on its own rhythm (slow fade in, hold, fade out, dark pause), wandering on smooth noise paths, avoiding the glass, trees and each other, sometimes resting on a branch and blinking there. Occasionally a few sync up and blink together.
* **The room:** a dark wooden desk with visible grain, a closed book and a pencil beside the jar, a window behind with a deep blue night sky, a moon and a few stars, and an unlit desk lamp at the edge of the frame. The fireflies are the main light at night.

## Interaction

* **Tap the glass:** a soft clink, the jar wobbles a little, and the fireflies nearest the tap scatter, glow brighter for a moment, then calm down.
* **Turn the jar:** drag to rotate it on the desk; the fireflies drift with a little inertia.
* **Open the lid:** drag around the lid (or press `O`) to unscrew it with a satisfying spin; it lifts off and rests tilted on the desk. The fireflies notice the opening one by one and **drift up and out into the room**, lighting the desk, the book and the window as they wander. Close the lid (or `O` again) and they slowly come home to the jar.
* **Tap the cabin:** its window light turns on or off; when it is on, a few moths circle it.
* **Day / night slider:** day is soft daylight through the window, the fireflies are faint; dusk is pink; night is deep blue and the fireflies light everything.
* **Desk lamp:** tap it to switch it on (warm pool of light, fireflies look smaller) or off.

## Easter egg

At night, with every firefly back in the closed jar, if you leave everything still for 10 seconds they all blink **in sync** three times and the moon outside the window flickers back once. Never hint at it in the UI.

## Interface

Light and minimal; it must never cover the jar. On phones the card becomes a compact bottom sheet.

* Top left: small caps "POKEABLE · ARENA", a big rounded heading "Firefly" / "Jar" with a tiny firefly blinking above the "i", caption "Open it gently."
* Top right: status dot with "WEBGPU · LIVE" (or "WEBGL2 · LIVE") and a speaker pill (ON / MUTED).
* Right card "Jar": about 220 px wide, off-white, 20 px corners, soft shadow, warm amber accent, collapsible to a pill. It holds a count "Fireflies in the jar: 42 / 42", buttons Open / Close lid, Tap the glass, Cabin light, Desk lamp, sliders Time of day, Fireflies (count), Glow, Sound, switches Slow motion and Cinema, and a Reset button.
* Bottom left: a one-line hint: "Drag to turn the jar. Tap the glass. Unscrew the lid."
* Keys: O open/close lid, T tap the glass, L cabin light, K desk lamp, N toggle night/day, Space pause, R reset, M mute, S slow motion, C cinema, 0 reset view.

## Camera

* OrbitControls with damping, limited so you never go under the desk or inside the glass.
* The default framing is a slightly low three-quarter view with the jar a bit right of centre, the window and moon behind it, and the card not covering it.
* **Cinema (`C`):** hides all UI and slowly orbits the jar at night.

## Sound

* WebAudio only. Create the AudioContext on the first gesture, never before.
* Master gain feeds a compressor; limit voices; wrap every audio call in try/catch.
* Loops: soft night ambience (crickets, a distant frog, gentle wind), muffled while the lid is on and clearer when it is open.
* One-shots: a glass clink on tap (pitch from where you tap), a metallic screw sound and a soft pop when the lid comes off, tiny high chimes when fireflies sync, a click for the lamp and the cabin light.

## Demo mode (required)

If the URL has `?demo=1` (or `#demo`), auto-play a deterministic 4.0 s loop:

* Hide all UI and the cursor; never create an AudioContext. Fixed quality, fixed seed, night, default camera, no OrbitControls. Drive the simulation from real elapsed time with the fixed timestep and restart from the identical state every 4.0 s. Start moving within 1 s and stay readable at 15 fps.
* Timeline:
   * 0.0–1.0 s: the closed jar glows on the dark desk, fireflies blinking inside, the pond reflecting them.
   * 1.0–1.5 s: an invisible tap on the glass: a small wobble, nearby fireflies scatter and flare brighter.
   * 1.5–2.5 s: the lid unscrews and lifts off.
   * 2.5–4.0 s: the first fireflies drift up and out of the jar into the room, lighting the desk, then the loop restarts.

## Before you finish, check

* The first frame at night looks stunning: glow through glass, reflections, dark room.
* Fireflies never pass through the glass, trees or cabin, and never all blink at once except in the sync moments.
* Tap, turn, lid open and close (fireflies leave and come home), cabin light, desk lamp, day/night.
* Every button, slider, switch and key; Cinema; pause; resizing to phone width.
* It works inside `<iframe sandbox="allow-scripts allow-pointer-lock">` with no errors (storage blocked).
* `?demo=1` matches the timeline.
* No console or WebGPU validation errors, and it stays smooth on a mid-range laptop.

Get the glow through the glass and the lid-opening moment right first. It should feel like holding a real jar of fireflies on a summer night.