blur-up image picoapp component in a 11ty sanity setup

.eleventy.js

// just the shortcodes you'll need in eleventy config
const cx = require('nanoclass')
const imageUrlBuilder = require('@sanity/image-url')
const sanityClient = require('./util/sanityClient')
const builder = imageUrlBuilder(sanityClient)

function urlFor(image, width, height) {
  if (width) {
    if (height) {
      return builder
        .image(image)
        .width(width)
        .height(height)
        .auto('format')
        .url()
    } else {
      return builder
        .image(image)
        .width(width)
        .auto('format')
        .url()
    }
  } else {
    return builder
      .image(image)
      .auto('format')
      .url()
  }
}

eleventyConfig.addShortcode('urlFor', urlFor)

eleventyConfig.addShortcode('classNames', (...all) => cx(all))

lazy.js

import { component } from 'picoapp'
import choozy from 'choozy'
import { on, add } from '@selfaware/martha'

export default component((node, ctx) => {
  const { img, imgWrap, lqip } = choozy(node)

  img.onload = () => {
    img.onload = null
    requestAnimationFrame(() => {
      add(node, 'is-loaded')
      let off = on(imgWrap, 'transitionend', () => {
        off()
        lqip && lqip.remove()
      })
      img.removeAttribute('data-src')
    })
  }

  img.src = img.dataset.src
})

lazy.njk

{# props = {
  containerCx,
  lqipCx,
  imgWrapCx,
  imgCx,
  image,
  width,
  padding,
  lqip
} #}

<div
  class="{% classNames 'lazy', containerCx %}"
  data-component="lazy"
  {% if padding %}
    style="padding-bottom: {{ 1 / image.metadata.dimensions.aspectRatio * 100 }}%"
  {% endif %}
>
  {% if not hideLqip %}
    <div class="{% classNames 'lazy__lqip js-lqip', lqipCx %}">
      <img
        {% if imgCx %}
          class="{{ imgCx }}"
        {% endif %}
        src="{{ image.metadata.lqip }}"
        alt=""
      >
    </div>
  {% endif %}
  <div
    class="{% classNames 'lazy__img-wrap js-imgWrap', imgWrapCx %}"
  >
    <img
      class="{% classNames 'lazy__img js-img', imgCx %}"
      data-src="{% urlFor image, width, height %}"
      alt="{{ image.alt }}"
    >
  </div>
</div>

{% set containerCx = null %}
{% set lqipCx = null %}
{% set imgWrapCx = null %}
{% set imgCx = null %}
{% set image = null %}
{% set width = null %}
{% set height = null %}
{% set padding = null %}
{% set hideLqip = null %}

lazy.scss

.lazy {
  @extend .r; // comes from wool https://github.com/selfawarestudio/wool
  z-index: 1; // do not remove, see here https://stackoverflow.com/questions/28112770/chrome-css-filter-blur-and-scale-at-children-and-overflow-hidden-on-parent-resu
  overflow: hidden;

  &__lqip {
    @extend .ro;
    filter: blur(4px);
    transform: scale(1.05);
  }

  &__img-wrap {
    @extend .ro; // comes from wool https://github.com/selfawarestudio/wool
    opacity: 0;
    transition: opacity 0.5s $ease-out-quart;

    .lazy.is-loaded & {
      opacity: 1;
    }
  }
}

usage.njk

// defining aspect ratio using util class on container
{% set image = module.image %}
{% set containerCx = 'r--1x1' %}
{% set imgCx = 'x y o-cover' %}
{% set width = 1080 %}
{% include 'lazy.njk' %}

// dynamic aspect ratio calculated based on image dimensions
{% set image = module.image %}
{% set imgCx = 'x y o-cover' %}
{% set width = 1080 %}
{% set padding = true %}
{% include 'lazy.njk' %}

// no lqip, image just fades in on load (good for images with transparency or svgs)
{% set image = module.image %}
{% set containerCx = 'x y' %}
{% set imgCx = 'x y o-contain' %}
{% set width = 1080 %}
{% set hideLqip = true %}
{% include 'lazy.njk' %}