Gradient Studio

Understanding Color Banding and Bit-Depth Quantization

A persistent challenge in digital gradients is color banding—visible, stepped ridges appearing between adjacent color shades instead of a smooth blend. This phenomenon occurs due to 8-bit quantization limits: in 8-bit color, each channel has only 256 discrete values. When blending between two subtle tones across thousands of screen pixels, there simply are not enough discrete color values to prevent stepping.

To eradicate banding, high-end studios employ temporal dithering or procedural noise overlays. By introducing a micro-textured film grain noise layer over the gradient, adjacent pixel values are dithered stochastically, tricking the human eye into perceiving a perfectly seamless transition.

Procedural Film Grain Noise Cache at 60 FPS

Calculating pseudo-random noise across high-resolution viewports on every mouse drag would cause significant frame drops. To maintain buttery-smooth 60 frames per second responsiveness, BlankImages pre-renders a tileable 256×256 px noise texture to an offscreen buffer upon application initialization.

During active scrubbing of the film grain slider (1% to 60%), our engine stamps this tileable pattern across the canvas via ctx.createPattern() with globalAlpha compositing, delivering filmic texture with near-zero GPU overhead.

// Offscreen procedural film grain noise pattern generator
export function createNoisePattern(ctx: CanvasRenderingContext2D, opacity: number): CanvasPattern | null {
  const offscreen = document.createElement('canvas');
  offscreen.width = 256;
  offscreen.height = 256;
  const offCtx = offscreen.getContext('2d')!;
  const imgData = offCtx.createImageData(256, 256);
  const data = imgData.data;

  for (let i = 0; i < data.length; i += 4) {
    const val = (Math.random() * 255) | 0;
    data[i] = val;
    data[i + 1] = val;
    data[i + 2] = val;
    data[i + 3] = (opacity * 255) | 0;
  }

  offCtx.putImageData(imgData, 0, 0);
  return ctx.createPattern(offscreen, 'repeat');
}

Gradient Geometries: Linear, Radial, Conic & Mesh

Our generator supports four distinct mathematical projection models. Linear gradients interpolate along an arbitrary angle vector (0° to 360°). Radial gradients compute Euclidean distance from a central focal point outward in concentric ellipses. Conic gradients sweep colors around a 360-degree radial pivot like a color wheel, creating dynamic disc highlights. Mesh gradients calculate multi-point bicubic interpolation for rich, aurora-like organic textures.