Dither Image

Renders an image with a dithering effect. It applies different dithering algorithms to create a pixelated look. Use it to add visual texture to images in a UI.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/dither-image

npx layro-cli add @educlopez/dither-image

npx layro-cli add @educlopez/dither-image

bunx layro-cli add @educlopez/dither-image

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { useEffect, useMemo, useRef, useState } from "react";

export type DitherAlgorithm =
  | "bayer"
  | "atkinson"
  | "floyd-steinberg"
  | "threshold";

export interface DitherImageProps {
  /** Dithering kernel used to quantise the image. */