feat(blurhash): accept arrays of blurhashes

Author: JamieMason

Cargo.lock

@@ -16,6 +16,7 @@ features = [
 [dependencies]
 blurhash = "0.1.1"
 console_error_panic_hook = "0.1.6"
+gloo-utils = { version = "0.1", features = ["serde"] }
 serde = { version = "1.0.123", features = ["derive"] }
 serde_json = "1.0.62"
-wasm-bindgen = "=0.2.83"
+wasm-bindgen = "0.2.83"

Cargo.toml

@@ -1,14 +1,8 @@
 # blurhash-to-css
 
-> Converts a [BlurHash](https://blurha.sh) to a
-> [CSS Object](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style) using
-> [TypeScript](https://www.typescriptlang.org/), [Rust](https://www.rust-lang.org/), and
-> [WebAssembly](https://github.com/rustwasm/wasm-pack).
+> Converts a [BlurHash](https://blurha.sh) to a [CSS Object](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style) using [TypeScript](https://www.typescriptlang.org/), [Rust](https://www.rust-lang.org/), and [WebAssembly](https://github.com/rustwasm/wasm-pack).
 
-[![NPM version](http://img.shields.io/npm/v/blurhash-to-css.svg?style=flat-square)](https://www.npmjs.com/package/blurhash-to-css)
-[![NPM downloads](http://img.shields.io/npm/dm/blurhash-to-css.svg?style=flat-square)](https://www.npmjs.com/package/blurhash-to-css)
-[![Follow JamieMason on GitHub](https://img.shields.io/github/followers/JamieMason.svg?style=social&label=Follow)](https://github.com/JamieMason)
-[![Follow fold_left on Twitter](https://img.shields.io/twitter/follow/fold_left.svg?style=social&label=Follow)](https://twitter.com/fold_left)
+[![NPM version](http://img.shields.io/npm/v/blurhash-to-css.svg?style=flat-square)](https://www.npmjs.com/package/blurhash-to-css) [![NPM downloads](http://img.shields.io/npm/dm/blurhash-to-css.svg?style=flat-square)](https://www.npmjs.com/package/blurhash-to-css) [![Follow JamieMason on GitHub](https://img.shields.io/github/followers/JamieMason.svg?style=social&label=Follow)](https://github.com/JamieMason) [![Follow fold_left on Twitter](https://img.shields.io/twitter/follow/fold_left.svg?style=social&label=Follow)](https://twitter.com/fold_left)
 
 ## 🌩 Installation
 
@@ -18,25 +12,16 @@ npm install blurhash-to-css
 
 ## 📣 Summary
 
-[BlurHash](https://blurha.sh) is a compact representation of a placeholder for an image, which makes
-it a great option to [improve perceived load times](https://blog.imgix.com/2021/01/26/blurhash).
-But, a BlurHash is rendered using a `<canvas>` element, which means client-side JavaScript is needed
-on the critical path when loading our application.
+[BlurHash](https://blurha.sh) is a compact representation of a placeholder for an image, which makes it a great option to [improve perceived load times](https://blog.imgix.com/2021/01/26/blurhash). But, a BlurHash is rendered using a `<canvas>` element, which means client-side JavaScript is needed on the critical path when loading our application.
 
-This tool creates the same visual effect using CSS, which can be rendered on the Server without any
-dependency on client-side JavaScript.
+This tool creates the same visual effect using CSS, which can be rendered on the Server without any dependency on client-side JavaScript.
 
-An example can be seen at https://blurhash-to-css.vercel.app and the source is in this repo at
-[`/example`](https://github.com/JamieMason/blurhash-to-css/tree/main/example).
+An example can be seen at https://blurhash-to-css.vercel.app and the source is in this repo at [`/example`](https://github.com/JamieMason/blurhash-to-css/tree/main/example).
 
 ## 🤝 Credit
 
-- The image buffer to CSS conversion is a port to Rust of
-  [this Script](https://github.com/joe-bell/plaiceholder/blob/d09df807df5d11c5d91a7971c2f90e2faa845843/packages/css/src/index.ts#L18-L51)
-  originally by [**@joe-bell**](https://github.com/joe-bell) for
-  [plaiceholder: Beautiful image placeholders, without the hassle](https://plaiceholder.co/).
-- A lot of help came from the source code in [wasm-image](https://github.com/peerigon/wasm-image) by
-  [**@acidicX**](https://github.com/acidicX).
+- The image buffer to CSS conversion is a port to Rust of [this Script](https://github.com/joe-bell/plaiceholder/blob/d09df807df5d11c5d91a7971c2f90e2faa845843/packages/css/src/index.ts#L18-L51) originally by [**@joe-bell**](https://github.com/joe-bell) for [plaiceholder: Beautiful image placeholders, without the hassle](https://plaiceholder.co/).
+- A lot of help came from the source code in [wasm-image](https://github.com/peerigon/wasm-image) by [**@acidicX**](https://github.com/acidicX).
 
 ## 🕹 Usage
 
@@ -69,19 +54,14 @@ const { blurhashToCss } = require('blurhash-to-css');
 
 ### `blurhash` (required)
 
-A small string generated to represent a blurry version of an image which will download sometime
-soon. Have a play around on [BlurHash](https://blurha.sh),
-[plaiceholder.co](https://plaiceholder.co/), and have a read of
-[BlurHash for imgix: An Alternative to Generic Image Placeholders](https://blog.imgix.com/2021/01/26/blurhash)
-to try them out and find out more.
+A small string (or array of strings) generated to represent a blurry version of an image which will download sometime soon. Have a play around on [BlurHash](https://blurha.sh), [plaiceholder.co](https://plaiceholder.co/), and have a read of [BlurHash for imgix: An Alternative to Generic Image Placeholders](https://blog.imgix.com/2021/01/26/blurhash) to try them out and find out more.
 
 ### `width` and `height` (optional)
 
-The BlurHash is decoded into a 10 x 10 image by default, you can make this larger and it will look
-more like the final image, but it will also generate a lot more CSS.
+The BlurHash is decoded into a 10 x 10 image by default, you can make this larger and it will look more like the final image, but it will also generate a lot more CSS.
 
 ```ts
-const css = blurhashToCss('eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU', {
+const css = blurhashToCss('LEHLh[WB2yk8pyoJadR*.7kCMdnj', {
   height: 30,
   width: 30,
 });

README.md

@@ -1,19 +1,19 @@
 /** More tests can be found in src/lib.rs */
-import { blurhashToCss } from '.';
+import { blurhashToCss, blurhashesToCss } from '.';
 
 it('converts a blurhash into a CSS object', () => {
-  expect(blurhashToCss('eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU')).toEqual({
+  expect(blurhashToCss('LEHLh[WB2yk8pyoJadR*.7kCMdnj')).toEqual({
     backgroundImage: [
-      'linear-gradient(90deg,rgb(144,157,98) 10%,rgb(153,162,114) 10% 20%,rgb(171,173,140) 20% 30%,rgb(183,183,156) 30% 40%,rgb(183,186,156) 40% 50%,rgb(174,182,144) 50% 60%,rgb(160,171,127) 60% 70%,rgb(147,160,113) 70% 80%,rgb(139,152,104) 80% 90%,rgb(134,149,98) 90% 100%)',
-      'linear-gradient(90deg,rgb(132,148,87) 10%,rgb(140,152,101) 10% 20%,rgb(156,162,126) 20% 30%,rgb(169,171,141) 30% 40%,rgb(171,175,142) 40% 50%,rgb(163,171,131) 50% 60%,rgb(148,160,115) 60% 70%,rgb(134,149,101) 70% 80%,rgb(127,142,93) 80% 90%,rgb(126,140,89) 90% 100%)',
-      'linear-gradient(90deg,rgb(109,129,62) 10%,rgb(114,130,73) 10% 20%,rgb(126,136,94) 20% 30%,rgb(139,145,109) 30% 40%,rgb(146,150,114) 40% 50%,rgb(141,148,107) 50% 60%,rgb(125,137,93) 60% 70%,rgb(107,123,78) 70% 80%,rgb(102,118,70) 80% 90%,rgb(109,121,71) 90% 100%)',
-      'linear-gradient(90deg,rgb(103,119,58) 10%,rgb(105,119,67) 10% 20%,rgb(114,123,86) 20% 30%,rgb(129,132,104) 30% 40%,rgb(141,141,113) 40% 50%,rgb(140,140,111) 50% 60%,rgb(123,128,99) 60% 70%,rgb(101,111,83) 70% 80%,rgb(96,105,73) 80% 90%,rgb(108,112,74) 90% 100%)',
-      'linear-gradient(90deg,rgb(121,127,83) 10%,rgb(124,128,93) 10% 20%,rgb(134,134,116) 20% 30%,rgb(150,146,135) 30% 40%,rgb(162,157,146) 40% 50%,rgb(162,157,144) 50% 60%,rgb(147,144,132) 60% 70%,rgb(126,125,115) 70% 80%,rgb(117,115,100) 80% 90%,rgb(122,119,94) 90% 100%)',
-      'linear-gradient(90deg,rgb(132,134,100) 10%,rgb(137,137,113) 10% 20%,rgb(150,146,137) 20% 30%,rgb(167,160,159) 30% 40%,rgb(179,172,169) 40% 50%,rgb(178,172,167) 50% 60%,rgb(164,159,154) 60% 70%,rgb(144,140,136) 70% 80%,rgb(130,126,117) 80% 90%,rgb(127,124,104) 90% 100%)',
-      'linear-gradient(90deg,rgb(123,128,97) 10%,rgb(128,131,109) 10% 20%,rgb(143,141,133) 20% 30%,rgb(160,155,154) 30% 40%,rgb(173,168,165) 40% 50%,rgb(173,169,164) 50% 60%,rgb(160,157,152) 60% 70%,rgb(139,137,133) 70% 80%,rgb(120,120,111) 80% 90%,rgb(111,113,93) 90% 100%)',
-      'linear-gradient(90deg,rgb(101,112,74) 10%,rgb(105,114,84) 10% 20%,rgb(117,121,105) 20% 30%,rgb(135,134,125) 30% 40%,rgb(149,146,138) 40% 50%,rgb(151,148,139) 50% 60%,rgb(140,138,128) 60% 70%,rgb(118,119,109) 70% 80%,rgb(95,100,85) 80% 90%,rgb(81,90,63) 90% 100%)',
-      'linear-gradient(90deg,rgb(94,102,40) 10%,rgb(94,102,51) 10% 20%,rgb(100,104,71) 20% 30%,rgb(114,112,91) 30% 40%,rgb(128,122,104) 40% 50%,rgb(133,125,106) 50% 60%,rgb(124,117,97) 60% 70%,rgb(103,100,78) 70% 80%,rgb(82,84,53) 80% 90%,rgb(71,76,28) 90% 100%)',
-      'linear-gradient(90deg,rgb(109,106,16) 10%,rgb(108,105,34) 10% 20%,rgb(109,103,59) 20% 30%,rgb(117,106,78) 30% 40%,rgb(128,113,88) 40% 50%,rgb(132,115,87) 50% 60%,rgb(124,108,77) 60% 70%,rgb(109,96,59) 70% 80%,rgb(95,86,40) 80% 90%,rgb(90,83,26) 90% 100%)',
+      'linear-gradient(90deg,rgb(134,164,177) 10%,rgb(140,165,177) 10% 20%,rgb(153,170,177) 20% 30%,rgb(168,175,176) 30% 40%,rgb(178,179,173) 40% 50%,rgb(181,179,171) 50% 60%,rgb(176,177,170) 60% 70%,rgb(166,173,172) 70% 80%,rgb(152,169,176) 80% 90%,rgb(141,166,179) 90% 100%)',
+      'linear-gradient(90deg,rgb(133,162,176) 10%,rgb(138,164,176) 10% 20%,rgb(152,168,175) 20% 30%,rgb(166,172,173) 30% 40%,rgb(176,175,170) 40% 50%,rgb(179,176,167) 50% 60%,rgb(174,174,167) 60% 70%,rgb(164,171,170) 70% 80%,rgb(151,167,174) 80% 90%,rgb(140,165,179) 90% 100%)',
+      'linear-gradient(90deg,rgb(129,160,174) 10%,rgb(135,160,173) 10% 20%,rgb(148,162,169) 20% 30%,rgb(161,163,165) 30% 40%,rgb(171,164,159) 40% 50%,rgb(173,165,156) 50% 60%,rgb(169,165,157) 60% 70%,rgb(159,163,162) 70% 80%,rgb(147,162,170) 80% 90%,rgb(137,161,176) 90% 100%)',
+      'linear-gradient(90deg,rgb(124,156,170) 10%,rgb(130,155,168) 10% 20%,rgb(142,153,162) 20% 30%,rgb(155,151,153) 30% 40%,rgb(164,149,144) 40% 50%,rgb(166,150,140) 50% 60%,rgb(162,151,142) 60% 70%,rgb(153,153,152) 70% 80%,rgb(142,155,163) 80% 90%,rgb(133,156,172) 90% 100%)',
+      'linear-gradient(90deg,rgb(121,151,166) 10%,rgb(126,149,163) 10% 20%,rgb(137,144,153) 20% 30%,rgb(149,138,140) 30% 40%,rgb(158,134,127) 40% 50%,rgb(160,134,121) 50% 60%,rgb(156,138,127) 60% 70%,rgb(148,143,140) 70% 80%,rgb(138,148,156) 80% 90%,rgb(129,151,167) 90% 100%)',
+      'linear-gradient(90deg,rgb(119,147,161) 10%,rgb(124,144,157) 10% 20%,rgb(135,137,146) 20% 30%,rgb(146,129,129) 30% 40%,rgb(155,124,114) 40% 50%,rgb(158,124,107) 50% 60%,rgb(154,130,114) 60% 70%,rgb(146,136,131) 70% 80%,rgb(136,142,149) 80% 90%,rgb(128,146,162) 90% 100%)',
+      'linear-gradient(90deg,rgb(121,144,157) 10%,rgb(125,142,152) 10% 20%,rgb(135,135,141) 20% 30%,rgb(147,128,124) 30% 40%,rgb(156,124,108) 40% 50%,rgb(159,124,101) 50% 60%,rgb(157,129,108) 60% 70%,rgb(149,135,126) 70% 80%,rgb(138,140,143) 80% 90%,rgb(129,143,156) 90% 100%)',
+      'linear-gradient(90deg,rgb(125,143,152) 10%,rgb(129,141,149) 10% 20%,rgb(139,137,139) 20% 30%,rgb(151,133,124) 30% 40%,rgb(160,131,111) 40% 50%,rgb(165,133,105) 50% 60%,rgb(163,136,111) 60% 70%,rgb(155,139,125) 70% 80%,rgb(143,141,140) 80% 90%,rgb(131,142,151) 90% 100%)',
+      'linear-gradient(90deg,rgb(130,143,149) 10%,rgb(134,142,146) 10% 20%,rgb(144,142,139) 20% 30%,rgb(156,141,128) 30% 40%,rgb(166,142,119) 40% 50%,rgb(172,144,115) 50% 60%,rgb(170,146,118) 60% 70%,rgb(162,146,128) 70% 80%,rgb(148,144,139) 80% 90%,rgb(134,142,148) 90% 100%)',
+      'linear-gradient(90deg,rgb(134,143,147) 10%,rgb(138,144,145) 10% 20%,rgb(147,145,139) 20% 30%,rgb(160,148,132) 30% 40%,rgb(171,151,125) 40% 50%,rgb(177,153,122) 50% 60%,rgb(176,153,125) 60% 70%,rgb(167,151,131) 70% 80%,rgb(152,147,139) 80% 90%,rgb(137,143,145) 90% 100%)',
     ].join(','),
     backgroundPosition: '0 0,0 11%,0 22%,0 33%,0 44%,0 56%,0 67%,0 78%,0 89%,0 100%',
     backgroundRepeat: 'no-repeat',
@@ -22,3 +22,48 @@ it('converts a blurhash into a CSS object', () => {
     transform: 'scale(1.2)',
   });
 });
+
+it('converts an array of blurhashes into an array of CSS objects', () => {
+  expect(blurhashesToCss(['LEHLh[WB2yk8pyoJadR*.7kCMdnj', 'LGF5?xYk^6#M@-5c,1J5@[or[Q6.'])).toEqual(
+    [
+      {
+        backgroundImage: [
+          'linear-gradient(90deg,rgb(134,164,177) 10%,rgb(140,165,177) 10% 20%,rgb(153,170,177) 20% 30%,rgb(168,175,176) 30% 40%,rgb(178,179,173) 40% 50%,rgb(181,179,171) 50% 60%,rgb(176,177,170) 60% 70%,rgb(166,173,172) 70% 80%,rgb(152,169,176) 80% 90%,rgb(141,166,179) 90% 100%)',
+          'linear-gradient(90deg,rgb(133,162,176) 10%,rgb(138,164,176) 10% 20%,rgb(152,168,175) 20% 30%,rgb(166,172,173) 30% 40%,rgb(176,175,170) 40% 50%,rgb(179,176,167) 50% 60%,rgb(174,174,167) 60% 70%,rgb(164,171,170) 70% 80%,rgb(151,167,174) 80% 90%,rgb(140,165,179) 90% 100%)',
+          'linear-gradient(90deg,rgb(129,160,174) 10%,rgb(135,160,173) 10% 20%,rgb(148,162,169) 20% 30%,rgb(161,163,165) 30% 40%,rgb(171,164,159) 40% 50%,rgb(173,165,156) 50% 60%,rgb(169,165,157) 60% 70%,rgb(159,163,162) 70% 80%,rgb(147,162,170) 80% 90%,rgb(137,161,176) 90% 100%)',
+          'linear-gradient(90deg,rgb(124,156,170) 10%,rgb(130,155,168) 10% 20%,rgb(142,153,162) 20% 30%,rgb(155,151,153) 30% 40%,rgb(164,149,144) 40% 50%,rgb(166,150,140) 50% 60%,rgb(162,151,142) 60% 70%,rgb(153,153,152) 70% 80%,rgb(142,155,163) 80% 90%,rgb(133,156,172) 90% 100%)',
+          'linear-gradient(90deg,rgb(121,151,166) 10%,rgb(126,149,163) 10% 20%,rgb(137,144,153) 20% 30%,rgb(149,138,140) 30% 40%,rgb(158,134,127) 40% 50%,rgb(160,134,121) 50% 60%,rgb(156,138,127) 60% 70%,rgb(148,143,140) 70% 80%,rgb(138,148,156) 80% 90%,rgb(129,151,167) 90% 100%)',
+          'linear-gradient(90deg,rgb(119,147,161) 10%,rgb(124,144,157) 10% 20%,rgb(135,137,146) 20% 30%,rgb(146,129,129) 30% 40%,rgb(155,124,114) 40% 50%,rgb(158,124,107) 50% 60%,rgb(154,130,114) 60% 70%,rgb(146,136,131) 70% 80%,rgb(136,142,149) 80% 90%,rgb(128,146,162) 90% 100%)',
+          'linear-gradient(90deg,rgb(121,144,157) 10%,rgb(125,142,152) 10% 20%,rgb(135,135,141) 20% 30%,rgb(147,128,124) 30% 40%,rgb(156,124,108) 40% 50%,rgb(159,124,101) 50% 60%,rgb(157,129,108) 60% 70%,rgb(149,135,126) 70% 80%,rgb(138,140,143) 80% 90%,rgb(129,143,156) 90% 100%)',
+          'linear-gradient(90deg,rgb(125,143,152) 10%,rgb(129,141,149) 10% 20%,rgb(139,137,139) 20% 30%,rgb(151,133,124) 30% 40%,rgb(160,131,111) 40% 50%,rgb(165,133,105) 50% 60%,rgb(163,136,111) 60% 70%,rgb(155,139,125) 70% 80%,rgb(143,141,140) 80% 90%,rgb(131,142,151) 90% 100%)',
+          'linear-gradient(90deg,rgb(130,143,149) 10%,rgb(134,142,146) 10% 20%,rgb(144,142,139) 20% 30%,rgb(156,141,128) 30% 40%,rgb(166,142,119) 40% 50%,rgb(172,144,115) 50% 60%,rgb(170,146,118) 60% 70%,rgb(162,146,128) 70% 80%,rgb(148,144,139) 80% 90%,rgb(134,142,148) 90% 100%)',
+          'linear-gradient(90deg,rgb(134,143,147) 10%,rgb(138,144,145) 10% 20%,rgb(147,145,139) 20% 30%,rgb(160,148,132) 30% 40%,rgb(171,151,125) 40% 50%,rgb(177,153,122) 50% 60%,rgb(176,153,125) 60% 70%,rgb(167,151,131) 70% 80%,rgb(152,147,139) 80% 90%,rgb(137,143,145) 90% 100%)',
+        ].join(','),
+        backgroundPosition: '0 0,0 11%,0 22%,0 33%,0 44%,0 56%,0 67%,0 78%,0 89%,0 100%',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 10%',
+        filter: 'blur(24px)',
+        transform: 'scale(1.2)',
+      },
+      {
+        backgroundImage: [
+          'linear-gradient(90deg,rgb(177,117,163) 10%,rgb(176,118,169) 10% 20%,rgb(172,119,180) 20% 30%,rgb(161,117,187) 30% 40%,rgb(140,110,184) 40% 50%,rgb(119,99,169) 50% 60%,rgb(118,87,148) 60% 70%,rgb(148,79,131) 70% 80%,rgb(187,78,125) 80% 90%,rgb(216,81,128) 90% 100%)',
+          'linear-gradient(90deg,rgb(173,120,166) 10%,rgb(172,121,172) 10% 20%,rgb(167,122,183) 20% 30%,rgb(155,119,189) 30% 40%,rgb(136,112,183) 40% 50%,rgb(118,101,166) 50% 60%,rgb(121,90,143) 60% 70%,rgb(148,83,127) 70% 80%,rgb(183,83,126) 80% 90%,rgb(209,86,133) 90% 100%)',
+          'linear-gradient(90deg,rgb(165,128,172) 10%,rgb(161,128,178) 10% 20%,rgb(152,128,189) 20% 30%,rgb(138,125,193) 30% 40%,rgb(123,118,182) 40% 50%,rgb(117,107,158) 50% 60%,rgb(126,97,129) 60% 70%,rgb(148,92,115) 70% 80%,rgb(172,94,128) 80% 90%,rgb(190,98,147) 90% 100%)',
+          'linear-gradient(90deg,rgb(153,138,179) 10%,rgb(146,138,185) 10% 20%,rgb(129,137,195) 20% 30%,rgb(111,132,197) 30% 40%,rgb(103,124,181) 40% 50%,rgb(114,114,147) 50% 60%,rgb(132,105,108) 60% 70%,rgb(148,103,99) 70% 80%,rgb(156,106,130) 80% 90%,rgb(159,111,161) 90% 100%)',
+          'linear-gradient(90deg,rgb(142,148,181) 10%,rgb(132,147,187) 10% 20%,rgb(105,145,198) 20% 30%,rgb(78,139,198) 30% 40%,rgb(81,131,178) 40% 50%,rgb(111,121,136) 50% 60%,rgb(136,113,87) 60% 70%,rgb(145,111,83) 70% 80%,rgb(138,115,131) 80% 90%,rgb(122,121,171) 90% 100%)',
+          'linear-gradient(90deg,rgb(137,155,177) 10%,rgb(125,154,184) 10% 20%,rgb(91,151,195) 20% 30%,rgb(51,145,195) 30% 40%,rgb(65,136,174) 40% 50%,rgb(107,125,130) 50% 60%,rgb(135,118,76) 60% 70%,rgb(140,116,77) 70% 80%,rgb(121,120,131) 80% 90%,rgb(85,125,173) 90% 100%)',
+          'linear-gradient(90deg,rgb(140,159,166) 10%,rgb(128,158,173) 10% 20%,rgb(96,155,185) 20% 30%,rgb(60,148,187) 30% 40%,rgb(66,138,170) 40% 50%,rgb(103,128,132) 50% 60%,rgb(129,120,86) 60% 70%,rgb(132,117,84) 70% 80%,rgb(111,120,129) 80% 90%,rgb(70,124,166) 90% 100%)',
+          'linear-gradient(90deg,rgb(149,161,146) 10%,rgb(140,160,154) 10% 20%,rgb(116,156,169) 20% 30%,rgb(89,149,175) 30% 40%,rgb(82,139,165) 40% 50%,rgb(100,128,138) 50% 60%,rgb(118,119,108) 60% 70%,rgb(122,115,101) 70% 80%,rgb(110,115,125) 80% 90%,rgb(87,117,151) 90% 100%)',
+          'linear-gradient(90deg,rgb(160,161,122) 10%,rgb(154,160,131) 10% 20%,rgb(137,156,149) 20% 30%,rgb(115,149,161) 30% 40%,rgb(99,139,160) 40% 50%,rgb(97,127,147) 50% 60%,rgb(104,117,129) 60% 70%,rgb(112,110,117) 70% 80%,rgb(114,108,120) 80% 90%,rgb(113,108,130) 90% 100%)',
+          'linear-gradient(90deg,rgb(168,161,98) 10%,rgb(164,159,109) 10% 20%,rgb(152,155,131) 20% 30%,rgb(133,148,149) 30% 40%,rgb(111,138,157) 40% 50%,rgb(95,126,154) 50% 60%,rgb(92,115,143) 60% 70%,rgb(103,106,129) 70% 80%,rgb(120,101,117) 80% 90%,rgb(132,99,111) 90% 100%)',
+        ].join(','),
+        backgroundPosition: '0 0,0 11%,0 22%,0 33%,0 44%,0 56%,0 67%,0 78%,0 89%,0 100%',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 10%',
+        filter: 'blur(24px)',
+        transform: 'scale(1.2)',
+      },
+    ]
+  );
+});

index.spec.ts

@@ -1,4 +1,4 @@
-import { blurhash_to_css } from './pkg/blurhash_to_css';
+import { blurhash_to_css, blurhashes_to_css } from './pkg/blurhash_to_css';
 
 export interface BlurhashCss {
   backgroundImage: string;
@@ -9,11 +9,21 @@ export interface BlurhashCss {
   transform: string;
 }
 
-export function blurhashToCss(
-  blurhash: string,
-  options?: { width: number; height: number }
-): BlurhashCss {
+export interface Options {
+  width: number;
+  height: number;
+}
+
+export type BlurhashToCss = {
+  (blurhash: string, options?: Options): BlurhashCss;
+  (blurhashes: string[], options?: Options): BlurhashCss[];
+};
+
+export const blurhashToCss: BlurhashToCss = (blurhash, options) => {
   const height = options?.height || 10;
   const width = options?.width || 10;
-  return JSON.parse(blurhash_to_css(blurhash, width, height)) as BlurhashCss;
-}
+  const json = Array.isArray(blurhash)
+    ? blurhashes_to_css(blurhash, width, height)
+    : blurhash_to_css(blurhash, width, height);
+  return JSON.parse(json);
+};