@kalaanakonda/distressed-ink-fx

Overlay-based distressed ink dither effect for web UIs.

The effect renders on a canvas with pointer-events: none, so underlying buttons/links remain hoverable and clickable.

Install

npm i @kalaanakonda/distressed-ink-fx three

Usage

import { createDistressedInkEffect } from "@kalaanakonda/distressed-ink-fx";

const root = document.getElementById("hero");
if (!root) throw new Error("Missing root");

const fx = createDistressedInkEffect(root, {
  preset: "mixed",
  paperColor: "#f1efea",
  inkColor: "#111111",
  accentColor: "#d83528"
});

// Optional runtime updates:
fx.setOptions({ roughness: 0.82, speckle: 0.6, contrast: 1.2 });
fx.setPreset("leonardo");
fx.shuffleLayout();

// Cleanup:
// fx.destroy();

API

• createDistressedInkEffect(container, options) -> instance
• instance.setOptions(partialOptions)
• instance.setPreset("mixed" | "leonardo" | "michelangelo")
• instance.shuffleLayout()
• instance.resize()
• instance.destroy()

Notes

• Default source images are loaded from Wikimedia Commons.
• You can override image URLs with imageUrls in options.