Neural Processing Mechanisms

    blurhash-to-css
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.3 • Public • Published

    blurhash-to-css

    Converts a BlurHash to a CSS Object using TypeScript, Rust, and WebAssembly.

    NPM version NPM downloads Follow JamieMason on GitHub Follow fold_left on Twitter

    🌩 Installation

    npm install blurhash-to-css
    

    📣 Summary

    BlurHash is a compact representation of a placeholder for an image, which makes it a great option to improve perceived load times. 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.

    An example can be seen at https://blurhash-to-css.vercel.app and the source is in this repo at /example.

    🤝 Credit

    🕹 Usage

    import { blurhashToCss } from 'blurhash-to-css';
    
    const css = blurhashToCss('eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU');

    ↓↓↓↓↓

    {
      "backgroundImage": "linear-gradient(90deg, rgb(139,153,96) 10%,rgb(153,160,118) 10% 20%,rgb(170,172,142) 20% 30%,rgb(177,180,151) 30% 40%,rgb(174,180,146) 40% 50%,rgb(162,172,130) 50% 60%,rgb(148,162,114) 60% 70%,rgb(136,150,104) 70% 80%,rgb(131,145,95) 80% 90%,rgb(130,144,91) 90% 100%),linear-gradient(90deg, rgb(109,129,65) 10%,rgb(117,131,80) 10% 20%,rgb(130,138,101) 20% 30%,rgb(142,148,113) 30% 40%,rgb(146,150,114) 40% 50%,rgb(136,144,103) 50% 60%,rgb(116,130,88) 60% 70%,rgb(102,119,75) 70% 80%,rgb(104,118,71) 80% 90%,rgb(112,123,72) 90% 100%),linear-gradient(90deg, rgb(110,122,70) 10%,rgb(114,122,85) 10% 20%,rgb(126,129,106) 20% 30%,rgb(143,140,122) 30% 40%,rgb(151,147,128) 40% 50%,rgb(144,142,122) 50% 60%,rgb(123,126,107) 60% 70%,rgb(106,111,90) 70% 80%,rgb(108,109,83) 80% 90%,rgb(118,117,83) 90% 100%),linear-gradient(90deg, rgb(134,133,102) 10%,rgb(141,138,120) 10% 20%,rgb(155,150,144) 20% 30%,rgb(172,164,161) 30% 40%,rgb(179,173,168) 40% 50%,rgb(173,168,162) 50% 60%,rgb(156,151,146) 60% 70%,rgb(137,132,127) 70% 80%,rgb(127,124,110) 80% 90%,rgb(128,124,101) 90% 100%),linear-gradient(90deg, rgb(116,124,95) 10%,rgb(125,129,112) 10% 20%,rgb(143,141,135) 20% 30%,rgb(160,156,153) 30% 40%,rgb(169,164,160) 40% 50%,rgb(165,161,155) 50% 60%,rgb(148,145,141) 60% 70%,rgb(124,125,118) 70% 80%,rgb(107,110,97) 80% 90%,rgb(99,106,82) 90% 100%),linear-gradient(90deg, rgb(95,105,51) 10%,rgb(99,105,66) 10% 20%,rgb(110,111,88) 20% 30%,rgb(125,122,107) 30% 40%,rgb(136,131,115) 40% 50%,rgb(134,129,111) 50% 60%,rgb(120,116,98) 60% 70%,rgb(97,97,77) 70% 80%,rgb(78,84,51) 80% 90%,rgb(70,78,30) 90% 100%),linear-gradient(90deg, rgb(109,106,21) 10%,rgb(109,104,44) 10% 20%,rgb(112,104,67) 20% 30%,rgb(122,109,83) 30% 40%,rgb(131,114,88) 40% 50%,rgb(130,112,83) 50% 60%,rgb(119,103,70) 60% 70%,rgb(104,91,51) 70% 80%,rgb(93,84,34) 80% 90%,rgb(92,84,24) 90% 100%)",
      "backgroundPosition": "0 0 ,0 16.666666666666664%,0 33.33333333333333%,0 50%,0 66.66666666666666%,0 83.33333333333334%,0 100%",
      "backgroundSize": "100% 14.285714285714286%",
      "backgroundRepeat": "no-repeat",
      "filter": "blur(24px)",
      "transform": "scale(1.2)"
    }

    To use this a CommonJS project, you should destructure it like so:

    const { blurhashToCss } = require('blurhash-to-css');

    🛠 Options

    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, plaiceholder.co, and have a read of BlurHash for imgix: An Alternative to Generic Image Placeholders 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.

    const css = blurhashToCss('eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU', {
      height: 30,
      width: 30,
    });

    Install

    npm i blurhash-to-css

    DownloadsWeekly Downloads

    38

    Version

    0.4.3

    License

    MIT

    Unpacked Size

    89 kB

    Total Files

    10

    Last publish

    Collaborators

    • fold_left