Canvasexperimentinambience.

Open any episode in Apple Podcasts and the entire screen takes on the mood of the artwork. The background isn't a static color extracted from the cover — it breathes. It rotates slowly, blends into itself, and creates a sense of place that stock UI rarely achieves.

The original implementation runs on PixiJS and WebGL. That felt like overkill for what is, visually, a blurred image rotating behind a scrim. The question this project asked: how close can we get with Canvas 2D and zero dependencies?

Digging into Apple Podcasts' bundled scene file (scene~7b5c360cee.js) exposed the exact filter pipeline: a ColorMatrixFilter with saturation 2.75, brightness 0.7, contrast 1.9, followed by five sequential BlurFilters at 5/10/20/40/80 pixels, plus a ZoomBlur with a small rotation angle.

The CSS filter property can't replicate every step — there's no native ZoomBlur, and stacking five separate blurs would tank performance. But a single blur(60px) approximates the visual outcome closely enough that the difference disappears once a scrim is applied. Four numbers, one CSS line. That's the whole color treatment.

Rotation comes from drawing the artwork four times at slightly different positions and rotating each at its own speed. Because the canvas is heavily blurred, the sprite seams disappear into the haze — the eye reads it as one organic, slowly morphing surface, not as four discrete copies.

Reduced-motion users get the same color treatment minus the rotation. The detection is a single matchMedia check; no extra code paths to maintain.

The whole module is one class, framework-agnostic, importable as an ES module. It's a drop-in for music players, podcast UIs, ambient login screens, or any product page that wants the artwork to set the mood instead of fighting against a flat background.

The bigger lesson isn't about Canvas vs. WebGL. It's that "production-grade" effects often turn out to be a handful of well-chosen numbers wrapped in a tight rendering loop — and reading the source is faster than guessing the values from screenshots.