Behind the bounce

POP DEPT. is a fictional studio built to prove that "playful" is an engineering discipline. Every wobble on that page is the same equation wearing different hats. One HTML file, no libraries.

01 — One spring to rule them all

Three signature moves — the gooey cursor, the poke-able headline, the general vibe — are all damped springs, four lines of physics:

v += (target - current) * stiffness;  // pull
v *= damping;                          // friction
current += v;                          // move

• Blob cursor — stiffness .16, damping .78, so it overshoots and jiggles. Its scale stretches along the velocity vector (squash & stretch, the first law of animation) and mix-blend-mode:multiply makes it feel like jelly passing over the page.
• Poke-able headline — each letter is a span with its own spring. Pointer proximity injects upward velocity; the spring brings it home with a wobble. Move fast across the title and it ripples like piano keys.
• CSS springs — where JS is overkill, cubic-bezier(.34,1.8,.44,1) fakes an overshoot curve (the 1.8 pushes past 100% and settles back).

02 — Confetti with real gravity

Every click spawns 42 rectangles with random velocity, spin, and one of six brand colours. Each frame: gravity (vy += .35), air drag, rotation, fade. They tumble because they're drawn as rotated rects, not circles — paper, not dots. Cheap, and endlessly satisfying.

03 — The "sticker sheet" design system

• Hard shadows only — box-shadow: 6px 6px 0 (no blur) makes everything read as die-cut vinyl.
• 3px ink borders on every element, like printed stickers.
• Buttons physically depress — on hover they translate into their own shadow.
• Nothing is straight — stickers, marquee, and headings all carry 1–9° rotations. Precision-crooked.
• The rotating lemon badge is SVG textPath on a circle.

04 — Type & colour choices

Bricolage Grotesque at weight 800 has the chunky warmth this needs; Gochi Hand plays the handwritten margin notes. Six candy colours stay coherent because they share similar saturation and lightness — the palette is a bag of the same sweets in different flavours, not six random hues.

05 — Reproduce it

Copy the three-line spring; use it everywhere an easing curve feels dead. Hard shadows, thick borders, slight rotations. And write the copy funny — bounce with serious copy is just a glitch.