amphtml icon indicating copy to clipboard operation
amphtml copied to clipboard

feat: Added <amp-blurhash> component to render BlurHash placeholders for AMP pages

Open sloppysaint opened this issue 5 months ago • 0 comments

Adds a new AMP component that renders BlurHash-encoded image placeholders using an HTML canvas. This is useful for displaying lightweight, visually coherent previews before the actual image loads, improving perceived performance and user experience.

Key features:

  • Renders a valid BlurHash string using canvas.
  • Custom element layout support (fixed, responsive, etc.).
  • Lightweight: ~150 LOC, zero production dependencies.
  • Fully unit-tested with coverage.
  • Includes example page (examples/amp-blurhash.html) for easy testing.
  • Validator rule added for runtime support.

This component is ideal for image-heavy AMP pages where placeholder polish matters.

sloppysaint avatar Jul 20 '25 17:07 sloppysaint