From 8f41fce4bc1b080e0b450c6bc40284ea14513984 Mon Sep 17 00:00:00 2001
From: Jason Lee <jason@zerodevx.com>
Date: Sat, 19 Aug 2023 23:18:04 +0800
Subject: [PATCH] Prep for `patch`

---
 README.md               |  13 +--
 package-lock.json       | 226 +++++++++++++++++++++-------------------
 package.json            |  26 ++---
 src/routes/+page.svelte |  60 ++++++-----
 4 files changed, 164 insertions(+), 161 deletions(-)

diff --git a/README.md b/README.md
index 95b290b..cf74739 100644
--- a/README.md
+++ b/README.md
@@ -115,9 +115,7 @@ widths in `avif/webp/jpg` formats; and a `16px webp/base64` low-quality image pl
 To change this globally, edit your `vite.config.js`:
 
 ```js
-import { defineConfig } from 'vite'
-import { sveltekit } from '@sveltejs/kit/vite'
-import { imagetools } from '@zerodevx/svelte-img/vite'
+import ...
 
 // By default, directives are 'w=480;1024;1920&format=avif;webp;jpg' (9 variants)
 export default defineConfig({
@@ -346,8 +344,7 @@ for me, but you can apply your own using CSS.
 
 ### Fade-in on reveal
 
-Reveal images with a fade-in/zoom effect (aka medium.com) when they are loaded **and** in the
-viewport.
+Reveal images with a fade-in effect (aka medium.com) when they are loaded **and** in the viewport.
 
 <!-- prettier-ignore -->
 ```html
@@ -363,9 +360,9 @@ viewport.
     width: 640px;
     height: 480px;
     
-    /* These CSS vars (shown with their default vals) are exposed */
-    --reveal-transform: scale(1.05);
-    --reveal-transition: opacity 1s linear, transform 0.75s ease-out;
+    /* These CSS vars (with their default values) are exposed */
+    --reveal-transform: scale(1.02);
+    --reveal-transition: opacity 1s ease-in, transform 0.8s ease-out;
     --reveal-filter: blur(20px);
   }
 </style>
diff --git a/package-lock.json b/package-lock.json
index be913f0..f434a61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,31 +9,31 @@
       "version": "2.0.1",
       "license": "ISC",
       "dependencies": {
-        "vite-imagetools": "5.0.7"
+        "vite-imagetools": "5.0.8"
       },
       "devDependencies": {
         "@fontsource-variable/inter": "^5.0.8",
         "@iconify-json/mdi": "^1.1.54",
         "@iconify/tailwind": "^0.1.3",
-        "@playwright/test": "^1.36.2",
+        "@playwright/test": "^1.37.1",
         "@sveltejs/adapter-static": "^2.0.3",
-        "@sveltejs/kit": "^1.22.4",
-        "@sveltejs/package": "^2.2.0",
+        "@sveltejs/kit": "^1.22.6",
+        "@sveltejs/package": "^2.2.1",
         "@tailwindcss/typography": "^0.5.9",
-        "autoprefixer": "^10.4.14",
+        "autoprefixer": "^10.4.15",
         "daisyui": "^3.5.1",
-        "eslint": "^8.46.0",
+        "eslint": "^8.47.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-svelte": "^2.32.4",
-        "postcss": "^8.4.27",
+        "postcss": "^8.4.28",
         "postcss-load-config": "^4.0.1",
-        "prettier": "^3.0.1",
+        "prettier": "^3.0.2",
         "prettier-plugin-svelte": "^3.0.3",
-        "prettier-plugin-tailwindcss": "^0.5.1",
-        "svelte": "^4.1.2",
-        "svelte-check": "^3.4.6",
+        "prettier-plugin-tailwindcss": "^0.5.3",
+        "svelte": "^4.2.0",
+        "svelte-check": "^3.5.0",
         "tailwindcss": "^3.3.3",
-        "tslib": "^2.6.1",
+        "tslib": "^2.6.2",
         "typescript": "^5.1.6",
         "vite": "^4.4.9"
       },
@@ -452,9 +452,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz",
-      "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
+      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -475,9 +475,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.46.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz",
-      "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.47.0.tgz",
+      "integrity": "sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -633,13 +633,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.36.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.2.tgz",
-      "integrity": "sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==",
+      "version": "1.37.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.37.1.tgz",
+      "integrity": "sha512-bq9zTli3vWJo8S3LwB91U0qDNQDpEXnw7knhxLM0nwDvexQAwx9tO8iKDZSqqneVq+URd/WIoz+BALMqUTgdSg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.36.2"
+        "playwright-core": "1.37.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -658,9 +658,9 @@
       "dev": true
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
-      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.3.tgz",
+      "integrity": "sha512-hfllNN4a80rwNQ9QCxhxuHCGHMAvabXqxNdaChUSSadMre7t4iEUI6fFAhBOn/eIYTgYVhBv7vCLsAJ4u3lf3g==",
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^2.0.2",
@@ -693,9 +693,9 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "1.22.4",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.4.tgz",
-      "integrity": "sha512-Opkqw1QXk4Cc25b/heJP2D7mX+OUBFAq4MXKfET58svTTxdeiHFKzmnuRsSF3nmxESqrLjqPAgHpib+knNGzRw==",
+      "version": "1.22.6",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.22.6.tgz",
+      "integrity": "sha512-SDKxI/QpsReCwIn5czjT53fKlPBybbmMk67d317gUqfeORroBAFN1Z6s/x0E1JYi+04i7kKllS+Sz9wVfmUkAQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -710,7 +710,7 @@
         "sade": "^1.8.1",
         "set-cookie-parser": "^2.6.0",
         "sirv": "^2.0.2",
-        "undici": "~5.22.0"
+        "undici": "~5.23.0"
       },
       "bin": {
         "svelte-kit": "svelte-kit.js"
@@ -724,9 +724,9 @@
       }
     },
     "node_modules/@sveltejs/package": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@sveltejs/package/-/package-2.2.0.tgz",
-      "integrity": "sha512-TXbrzsk+T5WNcSzrU41D8P32vU5guo96lVS11/R+rpLhZBH5sORh0Qp6r68Jg4O5vcdS3JLwpwcpe8VFbT/QeA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/package/-/package-2.2.1.tgz",
+      "integrity": "sha512-7Yv4SdoOZFPYWK1/A8LtZ7+WLlZny/4q5sWbU7dnkEqbIt5j4V3TzrquT9nAE6sUy6Dghxf35dXoPIdvRH7w7g==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
@@ -746,9 +746,9 @@
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.4.tgz",
-      "integrity": "sha512-Q5z7+iIjs3sw/Jquxaa9KSY5/MShboNjvsxnQYRMdREx/SBDmEYTjeXenpMBh6k0IQ3tMKESCiwKq3/TeAQ8Og==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.5.tgz",
+      "integrity": "sha512-UJKsFNwhzCVuiZd06jM/psscyNJNDwjQC+qIeb7GBJK9iWeQCcIyfcPWDvbCudfcJggY9jtxJeeaZH7uny93FQ==",
       "dev": true,
       "dependencies": {
         "@sveltejs/vite-plugin-svelte-inspector": "^1.0.3",
@@ -811,9 +811,9 @@
       "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
     },
     "node_modules/@types/node": {
-      "version": "20.4.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.9.tgz",
-      "integrity": "sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==",
+      "version": "20.5.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.1.tgz",
+      "integrity": "sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==",
       "dev": true
     },
     "node_modules/@types/pug": {
@@ -924,9 +924,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.14",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "version": "10.4.15",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
+      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
       "dev": true,
       "funding": [
         {
@@ -936,11 +936,15 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "browserslist": "^4.21.5",
-        "caniuse-lite": "^1.0.30001464",
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001520",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -1131,9 +1135,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001519",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
-      "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
+      "version": "1.0.30001521",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001521.tgz",
+      "integrity": "sha512-fnx1grfpEOvDGH+V17eccmNjucGUnCbP6KL+l5KqBIerp26WK/+RQ7CIDE37KGJjaPyqWXXlFUyKiWmvdNNKmQ==",
       "dev": true,
       "funding": [
         {
@@ -1199,14 +1203,14 @@
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
     },
     "node_modules/code-red": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.3.tgz",
-      "integrity": "sha512-kVwJELqiILQyG5aeuyKFbdsI1fmQy1Cmf7dQ8eGmVuJoaRVdwey7WaMknr2ZFeVSYSKT0rExsa8EGw0aoI/1QQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
+      "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.14",
-        "@types/estree": "^1.0.0",
-        "acorn": "^8.8.2",
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1",
+        "acorn": "^8.10.0",
         "estree-walker": "^3.0.3",
         "periscopic": "^3.1.0"
       }
@@ -1464,9 +1468,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.488",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.488.tgz",
-      "integrity": "sha512-Dv4sTjiW7t/UWGL+H8ZkgIjtUAVZDgb/PwGWvMsCT7jipzUV/u5skbLXPFKb6iV0tiddVi/bcS2/kUrczeWgIQ==",
+      "version": "1.4.496",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.496.tgz",
+      "integrity": "sha512-qeXC3Zbykq44RCrBa4kr8v/dWzYJA8rAwpyh9Qd+NKWoJfjG5vvJqy9XOJ9H4P/lqulZBCgUWAYi+FeK5AuJ8g==",
       "dev": true
     },
     "node_modules/end-of-stream": {
@@ -1542,15 +1546,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.46.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz",
-      "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==",
+      "version": "8.47.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz",
+      "integrity": "sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.1",
-        "@eslint/js": "^8.46.0",
+        "@eslint/eslintrc": "^2.1.2",
+        "@eslint/js": "^8.47.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -1561,7 +1565,7 @@
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.2",
+        "eslint-visitor-keys": "^3.4.3",
         "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
@@ -1709,9 +1713,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2009,9 +2013,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -2224,9 +2228,9 @@
       "dev": true
     },
     "node_modules/jiti": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
-      "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==",
+      "version": "1.19.3",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz",
+      "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==",
       "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
@@ -2542,9 +2546,9 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.45.0.tgz",
-      "integrity": "sha512-iwXuFrMAcFVi/ZoZiqq8BzAdsLw9kxDfTC0HMyjXfSL/6CSDAGD5UmR7azrAgWV1zKYq7dUUMj4owusBWKLsiQ==",
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.47.0.tgz",
+      "integrity": "sha512-2s6B2CWZM//kPgwnuI0KrYwNjfdByE25zvAaEpq9IH4zcNsarH8Ihu/UuX6XMPEogDAxkuUFeZn60pXNHAqn3A==",
       "dependencies": {
         "semver": "^7.3.5"
       },
@@ -2756,9 +2760,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.36.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.2.tgz",
-      "integrity": "sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==",
+      "version": "1.37.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.37.1.tgz",
+      "integrity": "sha512-17EuQxlSIYCmEMwzMqusJ2ztDgJePjrbttaefgdsiqeLWidjYz9BxXaTaZWxH1J95SHGk6tjE+dwgWILJoUZfA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -2768,9 +2772,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.27",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
-      "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
+      "version": "8.4.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
+      "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==",
       "dev": true,
       "funding": [
         {
@@ -2909,9 +2913,9 @@
       }
     },
     "node_modules/postcss-scss": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.6.tgz",
-      "integrity": "sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.7.tgz",
+      "integrity": "sha512-xPv2GseoyXPa58Nro7M73ZntttusuCmZdeOojUFR5PZDz2BR62vfYx1w9TyOnp1+nYFowgOMipsCBhxzVkAEPw==",
       "dev": true,
       "funding": [
         {
@@ -2921,6 +2925,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "engines": {
@@ -3010,9 +3018,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
-      "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.2.tgz",
+      "integrity": "sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -3035,9 +3043,9 @@
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.1.tgz",
-      "integrity": "sha512-dvJRVoYlzTXa7mD1DooUl0m+7XXMiaClTgZATah27x0vqWAnmoTdndGdpRZDUXl9chk1FFiaQ0ncquUOKBhMoQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.3.tgz",
+      "integrity": "sha512-M5K80V21yM+CTm/FEFYRv9/9LyInYbCSXpIoPAKMm8zy89IOwdiA2e4JVbcO7tvRtAQWz32zdj7/WKcsmFyAVg==",
       "dev": true,
       "engines": {
         "node": ">=14.21.3"
@@ -3371,9 +3379,9 @@
       "dev": true
     },
     "node_modules/sharp": {
-      "version": "0.32.4",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.4.tgz",
-      "integrity": "sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==",
+      "version": "0.32.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.5.tgz",
+      "integrity": "sha512-0dap3iysgDkNaPOaOL4X/0akdu0ma62GcdC2NBQ+93eqpePdDdr2/LM0sFdDSMmN7yS+odyZtPsb7tx/cYBKnQ==",
       "hasInstallScript": true,
       "dependencies": {
         "color": "^4.2.3",
@@ -3631,9 +3639,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.1.2.tgz",
-      "integrity": "sha512-/evA8U6CgOHe5ZD1C1W3va9iJG7mWflcCdghBORJaAhD2JzrVERJty/2gl0pIPrJYBGZwZycH6onYf+64XXF9g==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.0.tgz",
+      "integrity": "sha512-kVsdPjDbLrv74SmLSUzAsBGquMs4MPgWGkGLpH+PjOYnFOziAvENVzgJmyOCV2gntxE32aNm8/sqNKD6LbIpeQ==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.1",
@@ -3655,9 +3663,9 @@
       }
     },
     "node_modules/svelte-check": {
-      "version": "3.4.6",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.4.6.tgz",
-      "integrity": "sha512-OBlY8866Zh1zHQTkBMPS6psPi7o2umTUyj6JWm4SacnIHXpWFm658pG32m3dKvKFL49V4ntAkfFHKo4ztH07og==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.5.0.tgz",
+      "integrity": "sha512-KHujbn4k17xKYLmtCwv0sKKM7uiHTYcQvXnvrCcNU6a7hcszh99zFTIoiu/Sp/ewAw5aJmillJ1Cs8gKLmcX4A==",
       "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.17",
@@ -3790,9 +3798,9 @@
       }
     },
     "node_modules/svelte2tsx": {
-      "version": "0.6.19",
-      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.19.tgz",
-      "integrity": "sha512-h3b5OtcO8zyVL/RiB2zsDwCopeo/UH+887uyhgb2mjnewOFwiTxu+4IGuVwrrlyuh2onM2ktfUemNrNmQwXONQ==",
+      "version": "0.6.20",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.20.tgz",
+      "integrity": "sha512-zaSnHSERYceKxugFbjiZ3YiNcC2fNbVjpQ9qaE5hrYI4tIOX9ZqHS+I30Hp2HF+MVXLOVWVErgn/6pAlQNnheA==",
       "dev": true,
       "dependencies": {
         "dedent-js": "^1.0.1",
@@ -3940,9 +3948,9 @@
       "dev": true
     },
     "node_modules/tslib": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
-      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
     "node_modules/tunnel-agent": {
@@ -3994,9 +4002,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.22.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.22.1.tgz",
-      "integrity": "sha512-Ji2IJhFXZY0x/0tVBXeQwgPlLWw13GVzpsWPQ3rV50IFMMof2I55PZZxtm4P6iNq+L5znYN9nSTAq0ZyE6lSJw==",
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.23.0.tgz",
+      "integrity": "sha512-1D7w+fvRsqlQ9GscLBwcAJinqcZGHUKjbOmXdlE/v8BvEGXjeWAax+341q44EuTcHXXnfyKNbKRq4Lg7OzhMmg==",
       "dev": true,
       "dependencies": {
         "busboy": "^1.6.0"
@@ -4105,9 +4113,9 @@
       }
     },
     "node_modules/vite-imagetools": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-5.0.7.tgz",
-      "integrity": "sha512-8g7RU+liA4uWuujSe3hdMTCNWimMJsdLIU5uB+/SUBQ+j0TcaMKnQZ6n4LCBF2w30ml1X8WNFGOcTblquWrgGQ==",
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/vite-imagetools/-/vite-imagetools-5.0.8.tgz",
+      "integrity": "sha512-oFNfc58iLz1lHFsIKQy+wp0RNcZjiaDeHYTexYowpf4RYx9tZ97eWEcw8lQ1jDT8AnOso6XZi5iGjLNAeTR9Tw==",
       "dependencies": {
         "@rollup/pluginutils": "^5.0.2",
         "imagetools-core": "^4.0.5"
diff --git a/package.json b/package.json
index 2719b45..aa80c1f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@zerodevx/svelte-img",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "High-performance responsive/progressive images for SvelteKit",
   "author": "Jason Lee <jason@zerodevx.com>",
   "scripts": {
@@ -16,7 +16,7 @@
     "deploy": "npx gh-pages -d build -t -f"
   },
   "dependencies": {
-    "vite-imagetools": "5.0.7"
+    "vite-imagetools": "5.0.8"
   },
   "peerDependencies": {
     "svelte": "^3.55.1 || ^4.0.0"
@@ -25,25 +25,25 @@
     "@fontsource-variable/inter": "^5.0.8",
     "@iconify-json/mdi": "^1.1.54",
     "@iconify/tailwind": "^0.1.3",
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.37.1",
     "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.22.4",
-    "@sveltejs/package": "^2.2.0",
+    "@sveltejs/kit": "^1.22.6",
+    "@sveltejs/package": "^2.2.1",
     "@tailwindcss/typography": "^0.5.9",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.15",
     "daisyui": "^3.5.1",
-    "eslint": "^8.46.0",
+    "eslint": "^8.47.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-svelte": "^2.32.4",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.28",
     "postcss-load-config": "^4.0.1",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.2",
     "prettier-plugin-svelte": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.1",
-    "svelte": "^4.1.2",
-    "svelte-check": "^3.4.6",
+    "prettier-plugin-tailwindcss": "^0.5.3",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.5.0",
     "tailwindcss": "^3.3.3",
-    "tslib": "^2.6.1",
+    "tslib": "^2.6.2",
     "typescript": "^5.1.6",
     "vite": "^4.4.9"
   },
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fa1fb10..ec70af8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,7 +7,7 @@ import i3 from './assets/1920/3.jpg?h=720&as=run'
 import i4 from './assets/1920/4.jpg?h=720&as=run'
 import i5 from './assets/1920/5.jpg?h=720&as=run'
 import pllx from './assets/pllx.jpg?h=1024&as=run'
-import Img, { FxReveal, FxParallax } from '$lib/index.js'
+import Img, { FxReveal, FxParallax } from '$lib'
 import { version } from '$app/environment'
 import testSingle from './assets/640/01.jpg?w=80&h=80&format=jpg&as=run:0'
 import testFallback from './assets/640/01.jpg?h=80'
@@ -31,9 +31,9 @@ let selected = 0
       <h1>svelte-img</h1>
       <div class="badge badge-neutral ml-2 font-mono text-xs">v{version}</div>
       <p>High-performance responsive/progressive images for SvelteKit.</p>
-      <a class="btn btn-primary" href="https://github.com/zerodevx/svelte-img">
+      <a class="btn btn-primary" href="https://github.com/zerodevx/svelte-img" target="_blank">
         <span class="icon-[mdi--github] h-6 w-6" />
-        View Github Repo
+        Visit Github Repo
       </a>
     </div>
   </div>
@@ -67,19 +67,19 @@ export default defineConfig({
 <Img class="cool kitty" src={cat} alt="Very meow" />`)}</code
     ></pre>
   <h2>Showcase</h2>
-  <blockquote>
+  <p>
     By default, the original image is transformed into 9 variants - <code>480/1024/1920</code>
     widths at <code>avif/webp/jpg</code> formats, with an inline <code>base64</code> low-quality image
     placeholder (LQIP) background.
-  </blockquote>
+  </p>
 </div>
 
 <Img class="mx-auto mb-16 h-[32rem] w-full max-w-[1920px] object-cover" src={i1} alt="cat" />
 
 <div class="prose mx-auto mb-8 px-4">
-  <blockquote>
-    The LQIP is usually a 16px <code>webp;base64</code> data URI at about ≈150 bytes.
-  </blockquote>
+  <p>
+    The LQIP is typically a 16px <code>webp;base64</code> data URI at about ≈150 bytes.
+  </p>
 </div>
 
 <img
@@ -89,23 +89,20 @@ export default defineConfig({
 />
 
 <div class="prose mx-auto mb-8 px-4">
-  <blockquote>
-    Though not recommended, you can apply a Gaussian blur <code>backdrop-filter</code>.
-  </blockquote>
+  <p>
+    It's <em>not</em> recommended, but you can apply a Gaussian blur <code>backdrop-filter</code>.
+  </p>
 </div>
 
 <div class="mx-auto mb-16 h-[32rem] w-full max-w-[1920px] overflow-hidden">
-  <img
-    class="h-full w-full scale-105 object-cover blur"
-    src="data:image/webp;base64,{i1.img.lqip}"
-    alt="cat lqip"
+  <div
+    class="h-full w-full blur"
+    style="background: url(data:image/webp;base64,{i1.img.lqip}) no-repeat center/cover"
   />
 </div>
 
 <div class="prose mx-auto mb-8 px-4">
-  <blockquote>
-    Not much difference, is there? The next image has a dominant colour placeholder instead.
-  </blockquote>
+  <p>Not much difference, is there? The next image has a dominant colour placeholder instead.</p>
 </div>
 
 <div class="test-run-param">
@@ -117,15 +114,15 @@ export default defineConfig({
 </div>
 
 <div class="prose mx-auto mb-8 px-4">
-  <blockquote>Which looks like this.</blockquote>
+  <p>Which looks like this.</p>
 </div>
 
 <div class="mx-auto mb-16 h-[32rem] w-full max-w-[1920px]" style="background:{i2.img.lqip}" />
 
 <div class="prose mx-auto mb-8 px-4">
-  <blockquote>
-    You can also reveal images with <code>fade-in/zoom</code> special effects.
-  </blockquote>
+  <p>
+    You can also reveal images with <code>fade-in</code> special effects.
+  </p>
 </div>
 
 <div class="mb-16">
@@ -141,7 +138,7 @@ export default defineConfig({
 </div>
 
 <div class="prose mx-auto mb-8 px-4">
-  <blockquote>Or even apply parallax scrolling special effects.</blockquote>
+  <p>Or even apply parallax scrolling special effects.</p>
 </div>
 
 <div class="mx-auto mb-16 w-full max-w-[1920px]">
@@ -151,15 +148,16 @@ export default defineConfig({
 <div class="prose mx-auto mb-16 px-4">
   <blockquote>
     The <code>svelte-img</code> component tries, as much as possible, to be a drop-in replacement
-    for the native HTML
-    <code>{esc(`<img>`)}</code> tag. Side-effects are kept to a minimum, so things should still work
-    even without JavaScript. Try it - disable JS on this page and refresh, and check out the Lighthouse
-    score too.
+    for the native HTML <code>{esc(`<img>`)}</code> tag.
   </blockquote>
-  <blockquote>
+  <p>
+    Side-effects are kept to a minimum, so things should still work even without JavaScript. Try it
+    - disable JS on this page and refresh, and check out the Lighthouse score too.
+  </p>
+  <p>
     The next example however does require JavaScript, because interactivity. It uses the
-    <code>Vite</code> pattern for glob imports to load a local dir of images, like so:
-  </blockquote>
+    <code>Vite</code> pattern for glob imports to load a local directory of images, like so:
+  </p>
   <pre><code
       >{esc(`const modules = import.meta.glob('$lib/assets/sm/*.jpg', {
   import: 'default',
@@ -207,7 +205,7 @@ const images = Object.entries(modules).map((i) => i[1])
 </footer>
 
 <style>
-:global(img.blur)::after {
+.blur::after {
   content: '';
   position: absolute;
   inset: 0;