BlurHash Generator

// 1. Install: npm install blurhash
// 2. Generate hash server-side from actual image:

import { encode } from "blurhash";
import sharp from "sharp";

async function getBlurHash(imagePath: string): Promise<string> {
  const { data, info } = await sharp(imagePath)
    .raw().ensureAlpha()
    .resize(32, 32, { fit: "inside" })
    .toBuffer({ resolveWithObject: true });

  return encode(new Uint8ClampedArray(data), info.width, info.height, 4, 3);
  // hash is ~28 chars for 4×3 components
}

// 3. Decode and render client-side:
import { decode } from "blurhash";

function BlurHashImage({ hash, width, height }: { hash: string; width: number; height: number }) {
  const pixels = decode(hash, 400, 300);
  // Draw to canvas or use next/image with blurDataURL
}

// 4. With Next.js Image:
<Image
  src="/hero.jpg"
  blurDataURL={blurHashToDataURL(hash)}
  placeholder="blur"
  width={400} height={300}
  alt="..." />