https://github.com/lorissigrist/blurhash-gradients

https://github.com/lorissigrist/blurhash-gradients

Last synced: 27 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/lorissigrist/blurhash-gradients
• Owner: LorisSigrist
• Created: 2023-09-14T20:00:13.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-14T20:43:43.000Z (about 1 year ago)
• Last Synced: 2023-09-15T13:41:27.751Z (about 1 year ago)
• Language: JavaScript
• Size: 8.79 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🎨 Blurhash Gradients

Draw blurhashes using CSS gradients.

Blurhash's main drawback is that it absolutely requires some client side JS. It cannot be server rendered.

## 🥅 Goals

- [x] Tiny CSS output (<1kb)

- [x] Fast enough to run on the fly during SSR

- [x] No Client side JS required

- [x] Run in both browser and node

- [ ] Don't need a wrapper element (not achieved yet)

## 🚀 Getting Started

Install the package using npm or yarn.

```bash

npm install blurhash-gradients

```

Then simply call the `blurhashAsGradients` function with the blurhash and use the resulting CSS object on a placeholder element behind your image.

```js

import { blurhashAsGradients } from 'blurhash-gradients';

const css = blurhashAsGradients('LEHV6nWB2yk8pyo0adR*.7kCMdnj');

/*

{

    backgroundImage: string;

    backgroundSize: string;

    backgroundPosition: string;

    backgroundRepeat: string;

    boxShadow: string;

    filter: string;

    clipPath: string;

}

*/

```

```html



    


     



```


## 📖 Options

You can also optionally pass in an options object as the second argument. Here are the defaults:

```js

import { blurhashAsGradients } from 'blurhash-gradients';

const css = blurhashAsGradients('LEHV6nWB2yk8pyo0adR*.7kCMdnj', {

    width: 8, //The horizontal resolution of the gradients

    height: 8, //The vertical resolution of the gradients

    blur: 20, //The amount of blur to apply to the gradients (in pixels). Increase this on large display sizes.

});

```

## 🤝 Credits

- [blurhash-to-css](https://github.com/JamieMason/blurhash-to-css) for the idea. Unfortunately it didn't quite do all I needed so I made this package.