@gallerykit/blur-placeholder

@gallerykit/blur-placeholder renders a low-res blurred image (or solid colour fallback) while the full image is decoding. Pair it with any layout package or use it stand-alone — both a <BlurPlaceholder> component and a useBlurPlaceholder hook are exposed.

• Stability: experimental
• Peer dependencies: react, react-dom
• Dependencies: @gallerykit/core

Install

pnpm add @gallerykit/blur-placeholder

Quick example

import { BlurPlaceholder } from "@gallerykit/blur-placeholder";

export function Cover({ src, blurDataUrl }: { src: string; blurDataUrl: string }) {
  return <BlurPlaceholder src={src} placeholder={blurDataUrl} alt="" />;
}

See Getting Started for the full walkthrough and API for the public exports.