From ac751449b25c339058b9e3297b15bbf627eed442 Mon Sep 17 00:00:00 2001
From: Fidel Thomet <git@ft0.ch>
Date: Thu, 22 Aug 2024 14:08:37 +0200
Subject: [PATCH] Create README.md

---
 README.md | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..01dabe1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,77 @@
+# dither-dither
+
+[demo](https://fidelthomet.github.io/dither-dither/)
+
+`npm i dither-dither`
+
+`import 'dither-dither'`
+
+`<dither-dither src="…"></dither-dither>`
+
+## What?
+This is a web component for monochrome dithering. It works on images and videos. It's based on shaders and should be quite fast. It uses a blue noise threshold map. But you can also specify a custom threshold map.
+
+## Why?
+- looks nice
+- small media files – in most cases you'll get away with using [images](https://github.com/fidelthomet/dither-dither/blob/main/public/hermannstrasse.jpg) and [videos](https://github.com/fidelthomet/dither-dither/blob/main/public/hermannstrasse.mp4) of atrocious quality
+
+## How?
+install the package through npm
+```sh
+npm i dither-dither
+```
+
+import in javascript…
+```js
+import 'dither-dither'
+```
+…or directly in your html file
+```html
+<script type="module">import "dither-dither";</script>
+```
+
+use
+```html
+<!-- images -->
+<dither-dither src="./hermannstrasse.jpg"></dither-dither>
+
+<!-- videos (the `video` attribute can be omitted for filenames ending in .mp4, .webm, .ogg) -->
+<dither-dither src="./hermannstrasse.mp4" video></dither-dither>
+
+<!-- custom threshold map -->
+<dither-dither src="./hermannstrasse.jpg" threshold-map="./bayer8x8.png"></dither-dither>
+
+<!-- cross origin, sets cross origing mode to `anonymous` see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin -->
+<dither-dither cross-origin src="https://…"></dither-dither>
+```
+
+
+## Development
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify Library
+
+```sh
+npm run build
+```
+
+### Compile and Minify static Page
+
+```sh
+npm run build:site
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```