Use the EffectSoup engine in your own app.

@effectsoup/core

Pure TypeScript image-processing primitives. No DOM, no framework dependencies, and safe to run in a browser or Node.js.

The core currency is a PixelBuffer:

type PixelBuffer = { width: number; height: number; data: Uint8ClampedArray };

import { createPixelBuffer, toGrayscale } from "@effectsoup/core";
import type { PixelBuffer } from "@effectsoup/core";

// Create a buffer and fill it from a canvas.
const canvas = document.querySelector("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d")!;

const width = canvas.width;
const height = canvas.height;
const source: PixelBuffer = createPixelBuffer(width, height);

const imageData = ctx.getImageData(0, 0, width, height);
source.data.set(imageData.data);

// Run a core primitive in-place.
toGrayscale(source);

// Draw the result back to the canvas.
ctx.putImageData(
  new ImageData(source.data, source.width, source.height),
  0,
  0
);

@effectsoup/presets

Product presets that bundle core primitives into tunable pipelines. Each preset exposes an Intensity slider and optional advanced controls.

Run a preset by resolving its parameters and building a pipeline:

import { getPresetById } from "@effectsoup/presets";
import type { PixelBuffer } from "@effectsoup/core";

const preset = getPresetById("dotHalftone")!;

// Map the product Intensity slider (0-100) to the preset's internal params.
const params = preset.intensityMapper(75, {});

// Build and run the pipeline.
const pipeline = preset.createPipeline(params);
const output: PixelBuffer = pipeline(source, params);

Override advanced controls by starting from the schema defaults:

const preset = getPresetById("dotHalftone")!;

// Start from the schema defaults, then override individual controls.
const overrides = preset.advancedControlSchema.reduce(
  (acc, control) => {
    acc[control.id] = control.defaultValue;
    return acc;
  },
  {} as Record<string, number | string | boolean>
);

// Only override the values you care about.
overrides.dotSize = 8;

const params = preset.intensityMapper(75, overrides);
const output = preset.createPipeline(params)(source, params);

@effectsoup/worker

Web Worker client that runs heavy rendering off the main thread. Handles job versioning, cancellation of stale renders, and buffer transfer.

Create a client pointed at the worker script, then render:

import { EffectsWorkerClient } from "@effectsoup/worker";

// Point the client at the worker script. The exact path depends on your
// bundler (Vite, webpack, esbuild, Next.js, etc.).
const client = new EffectsWorkerClient(
  new URL("@effectsoup/worker/dist/worker.js", import.meta.url)
);

const output = await client.render({
  presetId: "dotHalftone",
  resolvedParameters: params,
  source,
  crop: {
    aspectRatio: "original",
    zoom: 1,
    offsetX: 0,
    offsetY: 0
  },
  targetWidth: 1200,
  targetHeight: 1600
});

// Clean up when you're done.
client.terminate();

The exact worker script URL depends on your bundler. In Vite you can import with ?worker; in other setups use the package's dist/worker.js entry.