Documentation improvement

README.md

@@ -2,44 +2,45 @@
 
 The smoothest CSS squircles south of Saskatchewan.
 Powered by superellipses and CSS Houdini 🪄.
+Visit the project site and [experience the
+magic](https://tim-harding.github.io/superellipse-squircle/).
 
 ## Usage
 
 ### CSS
 
-First, initialize the library.
+First, initialize the library. Unlike most JavaScript, the worklet cannot be
+imported as a module, so the worklet file must be served at the provided URL.
+You can either use the minified files from [unpkg](https://unpkg.com/) or use
+your bundler to get a URL.
 
 ```js
-import { register } from "superellipse-squircle/index.mjs";
-register("superellipse-squircle/worklet.min.js");
-```
-
-Optionally, also import the provided `squircle` CSS class or link it in your
-CSS. This provides a fallback to ordinary rounded rectangles on unsupported
-browsers.
-
-```jsx
-import "superellipse-squircle/index.css";
-```
-
-Note that the worklet is not a JavaScript module and your bundler won't know to
-include it automatically. Make sure it's included in your build and that the
-worklet path matches the route it is served from.
+import url from "superellipse-squircle/worklet.min.js?url"; // Vite
+import url from "url:superellipse-squircle/worklet.min.js"; // Parcel & WMR
+import url from "omt:superellipse-squircle/worklet.min.js"; // Rollup
+import url from "url-loader!:superellipse-squircle/worklet.min.js"; // WebPack 4 & 5
+const url = "https://unpkg.com/[email protected]/worklet.min.js"; // unpkg
 
-Elements with the `squircle` class will draw as squircles or fall back to
-ordinary rounded rectangles on browsers that don't support the Paint API. At
-the time of writing, only Chromium-based browsers work.
+import { register } from "superellipse-squircle";
+register(url);
 
-```html
+import "superellipse-squircle/index.css"; // Optional
 <div
   class="squircle"
   style="
     --squircle-radius: 1rem;
     --squircle-fill: black;"
-></div>
+></div>;
 ```
 
-These properties control the squircle drawing.
+Linking or importing the provided CSS creates a `squircle` class with fallbacks
+for unsupported browsers. Alternatively, use the image source directly in your
+CSS. For example, try `mask-image: paint(squircle);` to create a squircle layer
+mask. At time of writing, only Chromium-based browsers support the Paint API, so
+use `@supports (paint(id)) {...}` to check for support. See [Can I
+Use](https://caniuse.com/css-paint-api) for updates.
+
+These properties control the squircle drawing:
 
 | Property                  | Equivalent         |
 | ------------------------- | ------------------ |
@@ -48,8 +49,8 @@ These properties control the squircle drawing.
 | `--squircle-border-width` | `border-width`     |
 | `--squircle-border-color` | `border-color`     |
 
-To reduce the verbosity, you can alias the property names in your CSS. For
-example, to use `--radius` instead of `--squircle-radius`:
+To reduce verbosity, consider aliasing the CSS properties. For example, to use
+`--radius` instead of `--squircle-radius`:
 
 ```css
 .squircle {

src/index.css

@@ -6,7 +6,7 @@
   border-style: solid;
 }
 
-@supports (background: paint(id)) {
+@supports (paint(id)) {
   .squircle {
     border-color: initial;
     border-width: initial;