https://github.com/substrate-system/blur-hash
Image component with a blurry placeholder
https://github.com/substrate-system/blur-hash
Last synced: about 1 year ago
JSON representation
Image component with a blurry placeholder
- Host: GitHub
- URL: https://github.com/substrate-system/blur-hash
- Owner: substrate-system
- License: mit
- Created: 2024-07-12T00:00:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-26T05:05:47.000Z (about 1 year ago)
- Last Synced: 2025-04-13T00:08:03.216Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://substrate-system.github.io/blur-hash/
- Size: 82 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# blur hash
[](README.md)
[](README.md)
[](https://semver.org/)
[](LICENSE)
This is the ["blur-up" image loading technique](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/), with the [blur-hash algorithm](https://blurha.sh/), as a [web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
[See a live demonstration](https://substrate-system.github.io/blur-hash/)
> [!TIP]
> Throttle the internet speed with the dev tools.
- [install](#install)
- [API](#api)
* [ESM](#esm)
* [Common JS](#common-js)
* [attributes](#attributes)
- [CSS](#css)
* [Import CSS](#import-css)
* [variables](#variables)
- [use](#use)
* [Bundler](#bundler)
* [pre-built JS](#pre-built-js)
- [Create the string](#create-the-string)
* [Print to system clipboard](#print-to-system-clipboard)
## install
```sh
npm i -S @substrate-system/blur-hash
```
## API
This exposes ESM and common JS via [package.json `exports` field](https://nodejs.org/api/packages.html#exports).
### ESM
```js
import '@substrate-system/blur-hash'
```
### Common JS
```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](#create-the-string).
#### width & height
The dimensions for the image
## CSS
### Import CSS
```js
import '@substrate-system/blur-hash/css'
```
Or minified:
```js
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
```js
import '@substrate-system/blur-hash'
```
#### HTML
```html
```
### 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
```sh
cp ./node_modules/@substrate-system/blur-hash/dist/blur-hash.min.js ./public
```
#### HTML
```html
```
## Create the string
This package includes a CLI tool to create the placeholder string. After installing this as a dependency,
```sh
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,
```sh
npx blur ./my-file.jpg | pbcopy
```