Breathing Vignette

A bright central area expands and contracts over time — like a chest rising and falling. The size animation comes from one line:

Let's break it down.

What a vignette effect is

A vignette is a common photography effect: bright in the center, dark around the edges.

The implementation measures each pixel's distance d from the center, then uses smoothstep to smoothly transition from bright to dark at a certain radius.

strength controls where that transition occurs — larger strength means a smaller bright area (vignette closes in); smaller strength means a larger bright area (vignette opens up).

Using sin to make strength breathe

sin(u_time) * 0.25 + 0.55 maps the sine output to the range 0.3–0.8:

• At its lowest: -1.0 * 0.25 + 0.55 = 0.30 (largest bright area, nearly all lit)
• At its highest: 1.0 * 0.25 + 0.55 = 0.80 (smallest bright area, only the center is lit)

So strength oscillates between 0.3 and 0.8, and the vignette breathes with it.

The smoothstep transition

• Distance less than strength - 0.15 → fully bright (1.0)
• Distance between strength - 0.15 and strength → smooth blend
• Distance greater than strength → fully dark (0.0)

The transition width of 0.15 produces a soft, painterly glow effect.

Try changing it

Exercise

The exercise canvas has a fixed vignette size. Replace float strength = 0.55 with a dynamic value using sin(u_time) to make the vignette breathe over time.

Answer Breakdown

• sin(u_time) oscillates between -1.0 and 1.0
• * 0.25 sets the amplitude — a ±0.25 swing
• + 0.55 centers the breathing range around 0.55, so it oscillates between 0.3 and 0.8

The starting code has strength = 0.55, a constant — the vignette size never changes. Switching to the dynamic calculation makes strength different each frame, and the vignette boundary expands and contracts.

Try changing + 0.55 to + 0.7 — the "resting point" shifts higher, so most of the time the vignette is heavy, only opening up during the troughs.