Bubble Wrap Popper — Free HTML CSS JS Stress Relief Snippet

Real bubble wrap is oddly satisfying to pop because it combines three sensory cues at once: a visible pressure change, a physical squash, and a sharp little sound. This snippet reconstructs all three in the browser with an 8x10 grid of 80 individually poppable bubbles, each one a plain div rendered as a raised plastic dome using layered CSS box-shadow and radial-gradient, and permanently flattened once popped so the sheet fills up exactly like the real thing.

Making a flat div look like a raised bubble

Each .bubble is a circle (border-radius: 50% on a square aspect-ratio: 1 element inside a CSS grid) whose 3D "puffed up" appearance comes entirely from layered shadows and a gradient, no images involved. The background uses radial-gradient(circle at 32% 28%, #ffffff, #dbeafe 45%, #93c5fd 100%) — the light spot is offset toward the upper-left, mimicking a light source hitting a convex dome. Two inset shadows reinforce the illusion: a dark inset shadow on the opposite (lower-right) side suggests the shaded underside of the bulge, while a light inset shadow near the highlight corner adds a subtle rim-light. A third, non-inset shadow beneath the whole shape gives it a slight lift off the sheet.

The pop animation

Clicking an unpopped bubble adds a .popping class that runs a single @keyframes popAnim over 280ms: scale drops sharply to 0.72 with a -6deg rotation (the "squash" and a bit of jitter for a tactile, slightly chaotic feel), overshoots back up to 0.9 with a +4deg rotation, and settles at a permanent 0.8 scale. When the animationend event fires, the JS swaps .popping for a persistent .popped class that flips the gradient to flat greys and swaps the shadow to a fully inset, pressed-in look with no more raised highlight — that's what makes a popped bubble read as genuinely "spent" rather than just temporarily squished, and it stays that way since onPop() checks classList.contains('popped') and returns immediately for bubbles that are already flat.

Synthesizing the pop sound with the Web Audio API

Rather than loading an audio file, playPop() builds a tiny two-node graph on demand: an OscillatorNode whose frequency is swept from 520 Hz down to 140 Hz in 90 milliseconds using exponentialRampToValueAtTime, layered with a GainNode envelope that starts at a modest 0.22 and decays to near-silent over 100 milliseconds using the same exponential ramp shape. A falling-pitch, fast-decaying sine burst is a classic, cheap synthesis trick for a soft "thock" or "pop" sound — it's the same principle used for kick-drum and UI-click synthesis, just tuned higher and shorter here to stay gentle rather than loud or jarring. Because it's generated in code, there's no audio file to load and no latency waiting on a network request.

The staggered reset ripple

The "Reset sheet" button doesn't snap every bubble back instantly — resetSheet() iterates the 80 bubbles and staggers each one's re-inflate animation by i * 12 milliseconds using setTimeout, so the sheet visibly refills in a left-to-right, top-to-bottom ripple over roughly one second. Each bubble's .reinflate class plays a bouncy cubic-bezier(0.34, 1.56, 0.64, 1) keyframe that overshoots to 1.12 scale before settling at 1, giving the refill a springy, elastic pop-back feel that mirrors the original pop's overshoot.

Why it works as a stress-relief interaction

The appeal of bubble wrap is that each pop is small, irreversible, low-stakes, and immediately rewarding — you get instant visual, physical, and audible confirmation with zero cognitive load. This snippet's live "X / 80 popped" counter adds a light completionist pull that keeps people popping until the sheet is done, and the reset ripple turns "starting over" into its own small moment of visual satisfaction rather than an abrupt reset.