diff --git a/README.md b/README.md index 600cf80..85bfb01 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,32 @@ -# Gradient +# `@bedard/gradient` -Docs coming soon... Or never. +A customizable version of the background animation used by Stripe.com + +[Click here for a live example](https://gradient.scottbedard.net) + +### Basic usage + +Install the script using the CDN + +```html + +``` + +Or via NPM + +```bash +npm install @bedard/gradient +``` + +Then instantiate an instance with reference to a canvas + +```js +const canvas = document.querySelector('canvas') + +new Gradient(canvas, { + colors: ['#ffffff', '#f87171', '#f9a8d4', '#fef08a'], + seed: Math.random(), +}) +``` + +The animation can be started / stopped using the `play` and `pause` methods.