sdf-lens-blur

SDF shapes with distance-based edge blur. The closer a region is to a focal point (typically the cursor), the softer its edges become — like a depth-of-field effect applied to 2D geometry.

Includes 5 shape variations: rounded rectangle stroke, circle fill/stroke, pill fill/stroke.

Quick Start

import { createSdfLensBlur } from './gpu-modules/sdf-lens-blur/sdf-lens-blur';

const lens = createSdfLensBlur(device);

// Each frame
lens.render(targetTexture, {
  mouseX: normalizedX, // 0–1
  mouseY: normalizedY, // 0–1
  variation: 'round-rect-stroke'
});

lens.destroy();

API

createSdfLensBlur(device, options?)

• device — GPUDevice
• options.format — Output texture format. Default 'rgba8unorm'.

Returns { render, destroy }.

render(target, params?)

Renders the SDF shape into a GPUTexture.

• target — The GPUTexture to render into.
• params.mouseX — Focal point X (0–1). Default 0.5.
• params.mouseY — Focal point Y (0–1). Default 0.5.
• params.variation — Shape type: 'round-rect-stroke', 'circle-fill', 'circle-stroke', 'pill-stroke', 'pill-fill'. Default 'round-rect-stroke'.
• params.circleSize — Radius of the blur influence zone. Default 0.3.
• params.circleEdge — Softness of the influence zone edge. Default 0.5.
• params.shapeSize — Size of the shape. Default 1.2.
• params.roundness — Corner roundness (for round-rect). Default 0.4.
• params.borderSize — Stroke width (for stroke variations). Default 0.05.
• params.shapeRadius — Radius (for circle/pill variations). Default 0.3.
• params.invert — Invert the output. Default false.

How to Modify

• Add a new shape: Write a new SDF function (see sd_round_rect, sd_circle, sd_pill for examples), add a variation branch in the fragment shader, and add the corresponding string to VARIATION_MAP in the TypeScript.
• Change the blur source: Replace cursor distance with time, audio input, or any other value — edit the sdf_circle lens calculation in the fragment shader.
• Use as a mask: The output is grayscale. Sample it in another shader to mask or composite layers.
• Add color: Replace the vec4(v, v, v, 1.0) output with a color ramp or gradient based on v.