blur hash

This is the "blur-up" image loading technique, with the blur-hash algorithm, as a web component.

See a live demonstration

[!TIP] Throttle the internet speed with the dev tools.

• install
• API
  • ESM
  • Common JS
  • attributes
• CSS
  • Import CSS
  • variables
• use
  • Bundler
  • pre-built JS
• Create the string
  • Print to system clipboard

install

npm i -S @substrate-system/blur-hash

API

This exposes ESM and common JS via package.json exports field.

ESM

import '@substrate-system/blur-hash'

Common JS

require('@substrate-system/blur-hash')

attributes

Takes the following attributes

time

The time for css transitions and animation. This is set as a CSS variable.

placeholder

The string created by the blurhash algorithm. See node example.

width & height

The dimensions for the image

CSS

Import CSS

import '@substrate-system/blur-hash/css'

Or minified:

import '@substrate-system/blur-hash/css/min'

variables

CSS variables

• --blur-hash-time -- the transition time for animating blurry -> sharp, default is 0.8s
• --blur-hash-opactiy -- the opacity to use for the placeholder image, default is 0.6

use

This calls the global function customElements.define. Just import, then use the tag in your HTML.

Bundler

JS

import '@substrate-system/blur-hash'

HTML

<div>
    <blur-hash
        time="0.6s"
        placeholder="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
        src="..."
        width=100
        height=100
    >
    </blur-hash>
</div>

pre-built JS

This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/blur-hash/dist/blur-hash.min.js ./public

HTML

<script type="module" src="./blur-hash.min.js"></script>

Create the string

This package includes a CLI tool to create the placeholder string. After installing this as a dependency,

npx blur ./my-file.jpg

Will print a string to stdout that can be used as a placeholder attribute.

Print to system clipboard

On mac os,

npx blur ./my-file.jpg | pbcopy