EffectSoup/Docs

EffectSoup is a browser-based, non-AI image transformation engine. Upload a photo, choose an effect, adjust controls, and export — every pixel is processed in a Web Worker on your device. No uploads to a server, no AI generation.

Every effect is a deterministic, mathematical image pipeline. The same photo with the same settings always produces the same pixel output.

How Rendering Works

  1. Decode — Image is decoded into a PixelBuffer via Canvas 2D API.
  2. Viewport — Crop, zoom, and offset are applied non-destructively via applyViewportTransform.
  3. Resolve — The preset's intensityMapper converts the 0–100 slider and advanced overrides into resolved parameters.
  4. Pipeline — The preset's createPipeline builds a render function that runs the effect chain.
  5. Render — If using EffectsWorkerClient, steps 2–4 run off the main thread and the result is transferred back via postMessage with zero-copy ArrayBuffer transfer.
  6. Export — The final buffer is drawn to an offscreen canvas and exported as PNG, JPEG, or WebP via the Canvas toBlob API.

Packages

The engine is split into four npm packages under the @effectsoup scope (113 exported symbols total):

PackageDescriptionKey exports
@effectsoup/corePure TS image primitivesPixelBuffer, createPixelBuffer, toGrayscale, dithering, ASCII, glow, distortion, halftone, stipple, and more (39 functions, 22 types)
@effectsoup/presetsEffect presets with intensity mappingEffectPreset, allPresets (25 presets), getPresetById, intensityMapper, createPipeline
@effectsoup/workerWeb Worker clientEffectsWorkerClient class for off-thread rendering with job versioning
@effectsoup/effectsoupAll-in-one meta-packageRe-exports core + presets + worker

Quick Links

See Also