@kalaanakonda/ditherking-react

Interactive dither runtime and React components.

Install

npm i @kalaanakonda/ditherking-react

React

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

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

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