BlurHash Playground
Read more about BlurHash.
Welcome to BlurHash Playground! Here you'll find a collection of small tools and experiment with blurhash!
To quickly explain what BlurHash is, it's a blurred image representation, encoded in a string of 30'ish characters.
Now go explore the blurry world of blurhash!
Image to blurhash
BlurHash to CSS
You can also use these blurhash values in your CSS. This is not really recommended, because produced CSS string is somewhat really heavy ( from 10 to 25'ish kilobytes )
background: url(null);Generate Random BlurHash
const Animation = () => {
const [hash, setHash] = useState<string | null>(null);
useEffect(() => {
const interval = setInterval(() => {
setHash(`${makeid(36)}`);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<>
{hash && (
<Blurhash
hash={hash}
/>
)}
</>
);
};BlurHash to canvas
Convert any image url to a BlurHash
BlurSplash ( blur_hash from unsplash )
If you don't see any images, it means the app got rate limited. It gets reset every hour.
Resources:
- Learn more about BlurHash
- I've built this, not sure anyone would ever use this but myself but here it is: LukyVj/cloudinary-blurhash