3D and WebGL · 3.3
Radial bulge and pinch
Gradients that push toward you. A fish-eye lens; the bulge of an old TV.
A radial UV distortion that pushes the field toward or away from the viewer like a lens.
4 knobs
How it actually works
The cheapest "whoa" in the index. One signed number covers bulge, flat, and pinch, and the flat setting in the middle is worth sitting on for a second: zero is a real value here, and the effect politely disappears rather than degrading into something odd.
One line, sourced verbatim from the article: float distortion = 1.0 + u_strength * r * r, where r is distance from centre, applied to the UV before sampling. That is the entire technique. Sign the strength negative and the same line pinches instead of bulging.
The knobs, named
u_strength is the bulge and the pinch and the flat. Centre and falloff exponent do the rest. The exponent is the difference between a lens and a CRT: r squared is glass, r to the fourth is a tube.
| Knob | Source | What it teaches |
|---|---|---|
| u_strength | sourced | The sourced uniform. Positive bulges toward you, zero is flat, negative pinches. One number, three effects. |
| Centre X | sourced | Where the lens sits. |
| Centre Y | sourced | The other half. |
| Falloff exponent | sourced | How fast distortion grows with radius. The sourced line uses r * r. r⁴ is the CRT curvature look. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author) for the mechanism; VERIFIED (rendered) for the gradient form's existence
Codrops "4WIDE" (2026) publishes the distortion line verbatim; Codrops "Efecto" covers CRT curvature. /features/sphere-warp confirmed on gradientlab.co.
- Seen on
- Codrops "4WIDE"; Codrops "Efecto" (CRT); gradientlab.co/features/sphere-warp (SPHERE, "Gradients that push toward you").
- Dependencies
- Three.js + GSAP in the source; vanilla-possible (ours)
- Difficulty
- trivial
- Performance
- Negligible GPU cost.
- Accessibility and the floor
- Distorted text is a legibility and motion-sickness concern at high strength. The sourced guidance is to bind strength to reduced-motion and drive it to zero; ours does exactly that when the effect is animated.
Notes
Composability. The index dedupes two published techniques into this one entry: awwwards' "fisheye/barrel pass" and gradientlab's SPHERE warp are the same radial UV distortion, presented once as an image treatment and once as a gradient type. One entry, one line of shader.