Living Backdrop

One still image in. A hero that breathes out: the subject slides against the background with the pointer, swells and lifts on a breath cycle, grass moves, clouds creep, dust hangs in the light. One fullscreen quad, one shader, three textures. No video, no 3D model.

Four rules, each learned by shipping it:

1. Two layers, not one depth map. A single depth-displaced image smears at the subject's edge the moment it moves. Cut the subject out, paint it out of the background, and move them separately. Each layer still gets its own depth.
2. Look at the mask, the plate and the depth map before writing any code. Every later step inherits their quality. build.sh writes one review.png for exactly this.
3. A poster renders first, and the canvas earns its place over it. Server-rendered still, same framing to the pixel, all motion easing in from rest. Reduced motion, no WebGL, failed texture: the poster is the whole experience.
4. You cannot judge motion from a backgrounded tab. Automation tabs never fire requestAnimationFrame. Step frames by hand to check the shader, and say plainly that the live loop still needs human eyes. See Verify.

Fit check

Works when the image has a clear foreground subject against a distant background - a hand, a figure, a creature, a product - ideally one that leaves the frame at an edge (that edge becomes the breathing pivot).

Push back when: the subject fills over ~75% of the frame (nothing to slide against), it is a flat graphic or UI screenshot (no depth to find), or the user wants limbs to actually articulate (that is image-to-video, not this).

1. Build the assets