open-index/open-npm huggingface dataset:
npm package: @kalaanakonda/distressed-ink-fx
Description: Overlay-based distressed ink dither effect with Renaissance collage presets.
Latest version: 0.1.0

# @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

```bash
npm i @kalaanakonda/distressed-ink-fx three
```

## Usage

```ts
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.
npm package: @kalaanakonda/ditherking-react
Description: Interactive dither runtime and React components for image effects.
Latest version: 0.2.1

# @kalaanakonda/ditherking-react

Interactive dither runtime and React components.

## Install

```bash
npm i @kalaanakonda/ditherking-react
```

## React

```tsx
import { DitherImage, ModelDither } from "@kalaanakonda/ditherking-react";

export function Hero() {
  return (
    <DitherImage
      image="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d"
      effect="simple"
      width={900}
      height={620}
      dither="floyd-steinberg"
      shape="dot"
      sampleStep={4}
      particleSize={2}
    />
  );
}
```

### GLB / 3D

```tsx
import { ModelDither } from "@kalaanakonda/ditherking-react";

export function ModelHero() {
  return (
    <ModelDither
      modelUrl="https://your-cdn.com/model.glb"
      width={900}
      height={620}
      dither="bayer"
      shape="line"
      sampleStep={3}
      particleSize={2}
      backgroundColor="#ffffff"
      particleColor="#101010"
      black={7}
      mid={1.2}
      white={245}
      posX={0}
      posY={0}
      posZ={0}
      rotXDeg={0}
      rotYDeg={0}
      rotZDeg={0}
      tiltStrength={0.7}
      ditherBackground={false}
    />
  );
}
```

## Vanilla JS

```ts
import { createDither, createModelDither } from "@kalaanakonda/ditherking-react";

const fx = createDither({
  canvas: document.querySelector("#fx"),
  image: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d",
  effect: "candlestick",
  width: 900,
  height: 620,
  circleColor: "#4ea3ff",
});

const modelFx = createModelDither({
  canvas: document.querySelector("#modelFx"),
  modelUrl: "https://your-cdn.com/model.glb",
  dither: "bayer",
  shape: "line",
  sampleStep: 3,
});
```

## Exports

- `createDither`
- `createModelDither`
- `DitherImage`
- `ModelDither`
- `SimpleDither`
- `CandlestickDither`
- `exportPreset`