glasskit-js 1.0.0 → 1.0.2

package/LiquidGlass.mjs

@@ -19,7 +19,7 @@ import LG from "./liquid-glass.js";
 const GLASS_KEYS = [
   "mode", "frost", "refraction", "depth", "dispersion", "splay",
   "lightAngle", "lightIntensity", "curvature", "convexity",
-  "tint", "tintOpacity", "sheen", "sheenColor", "saturate", "brightness", "radius", "background",
+  "tint", "tintOpacity", "sheen", "sheenColor", "saturate", "brightness", "shadow", "radius", "background",
 ];
 
 export default function LiquidGlass({ as: Tag = "div", children, ...props }) {

package/README.md

@@ -1,54 +1,28 @@
 # Glasskit
 
-**Drop-in Apple / Figma "Liquid Glass" for the web — and the generator that ships the code.**
+**Drop-in Apple / Figma "Liquid Glass" for the web.**
+
+[![npm version](https://img.shields.io/npm/v/glasskit-js?color=8b5cf6&label=npm)](https://www.npmjs.com/package/glasskit-js)
+[![minzipped size](https://img.shields.io/bundlephobia/minzip/glasskit-js?color=8b5cf6)](https://bundlephobia.com/package/glasskit-js)
+[![zero dependencies](https://img.shields.io/badge/dependencies-0-8b5cf6)](https://www.npmjs.com/package/glasskit-js?activeTab=dependencies)
+[![types included](https://img.shields.io/npm/types/glasskit-js?color=8b5cf6)](./liquid-glass.d.ts)
+[![license MIT](https://img.shields.io/npm/l/glasskit-js?color=8b5cf6)](./LICENSE)
 
 The only liquid-glass tool that lets you **switch the rendering engine** (pure CSS · SVG
-displacement · cross-browser clone · WebGL), apply it to **any element/shape**, **copy the
-code in any framework**, and **measure the real performance cost** before you ship.
+displacement · cross-browser clone · WebGL), apply it to **any element/shape**, and use it
+from **vanilla JS, a web component, or React** — with zero dependencies.
 
-> npm: **`glasskit-js`** · global: **`Glasskit`** · web component: **`<glass-kit>`**
+> 🎛️ **[Try the generator →](https://amanblog.github.io/glasskit/)** — tune it visually and copy the code in any framework.
 
+```bash
+npm i glasskit-js
 ```
-liquid-glass.js      ← the engine (zero deps, UMD + <glass-kit> web component)
-liquid-glass.d.ts    ← TypeScript types
-LiquidGlass.mjs      ← React/Next.js wrapper (default export, no JSX — works in any bundler)
-package.json         ← npm package "glasskit-js"
-demo.html            ← minimal standalone playground
-site/                ← the generator website (static, deploy as-is)
-  index.html · app.js · benchmark.html · liquid-glass.js
-bench/               ← automated cross-browser benchmark runner (Playwright)
-```
-
----
-
-## The engine
-
-### Modes — the switch nobody else gives you
 
-| Mode | Real refraction | Browsers | Refracts | Best for |
-|------|:---:|---|---|---|
-| `css` | ✗ (blur) | **all** | live backdrop | default product UI, mobile, Safari/FF |
-| `svg` | ✓ | **Chromium** | live backdrop | the "wow" surface on Chrome/Edge |
-| `svg-clone` | ✓ | **all** | a cloned DOM element | cross-browser refraction over DOM |
-| `webgl` | ✓ | **all** | an img/canvas/video | hero over a fixed background/video |
-| `auto` | — | — | — | Chromium→`svg`, else `svg-clone` if `background` set, else `css` |
-
-`svg-clone` is the cross-browser trick: Safari/Firefox don't allow an SVG filter in
-`backdrop-filter`, so it **clones the background element and filters the clone** instead.
-It refracts DOM, not `<canvas>` pixels — use `webgl` for canvas/video backgrounds.
-
-### Params ↔ Figma's Glass panel
+> npm: **`glasskit-js`** · global: **`Glasskit`** · web component: **`<glass-kit>`**
 
-| Figma slider | Option | | Optical extras | Option |
-|---|---|---|---|---|
-| Frost | `frost` | | curvature (sphere→squircle) | `curvature` |
-| Refraction | `refraction` | | convex↔concave | `convexity` |
-| Depth | `depth` | | tint | `tint`, `tintOpacity` |
-| Dispersion | `dispersion` | | corner radius | `radius` |
-| Splay | `splay` | | | |
-| Light (angle / %) | `lightAngle` / `lightIntensity` | | | |
+---
 
-### Usage
+## Usage
 
 ```html
 <!-- vanilla / CDN -->
@@ -74,71 +48,45 @@ import Glass from 'glasskit-js/react';
        style={{ borderRadius: 999, padding: '14px 28px' }}>Get tickets</Glass>
 ```
 
-### Shapes
-Any **rounded rectangle (incl. pills & circles)** works with zero extra code — a
-`ResizeObserver` regenerates the refraction map on resize. Arbitrary outlines (blobs,
-SVG paths) keep the blur/tint/highlight via `clip-path`, but refraction edges assume a
-rounded box; supply a custom displacement map for true custom outlines.
-
 ---
 
-## The generator website (`site/`)
-
-Static — no build step. Tune visually → switch engine → copy code for React, Vue,
-vanilla, web component, CSS, or Tailwind. Plus a preset gallery and a benchmark page.
-
-```bash
-npx serve site         # or: python3 -m http.server --directory site
-```
-
-**Deploy to Cloudflare Pages:** create a Pages project, set the **build command empty**
-and the **output/root directory to `site`**. Pure static files. (Vercel: framework
-"Other", output dir `site`.) Then set your domain in the `og:`/`canonical` tags and add an
-`og.png` (a generator script lives at `bench/og.mjs`).
+## Modes — the switch nobody else gives you
 
----
+| Mode | Real refraction | Browsers | Refracts | Best for |
+|------|:---:|---|---|---|
+| `css` | ✗ (blur) | **all** | live backdrop | default product UI, mobile, Safari/FF |
+| `svg` | ✓ | **Chromium** | live backdrop | the "wow" surface on Chrome/Edge |
+| `svg-clone` | ✓ | **all** | a cloned DOM element | cross-browser refraction over DOM |
+| `webgl` | ✓ | **all** | an img/canvas/video | hero over a fixed background/video |
+| `auto` | — | — | — | Chromium→`svg`, else `svg-clone` if `background` set, else `css` |
 
-## The benchmark
+`svg-clone` is the cross-browser trick: Safari/Firefox don't allow an SVG filter in
+`backdrop-filter`, so it **clones the background element and filters the clone** instead.
+It refracts DOM, not `<canvas>` pixels — use `webgl` for canvas/video backgrounds.
 
-**In-browser** (`site/benchmark.html`): spawns batches of glass elements per engine,
-animates them over a live backdrop, and records **avg/min FPS, avg & p95 frame time,
-jank %, and JS heap**. Results are saved per browser in `localStorage`, so running it in
-Chrome → Safari → Firefox builds a cross-browser comparison. Export JSON anytime.
+## Params ↔ Figma's Glass panel
 
-**Automated** (`bench/run-playwright.mjs`): drives the page across every installed engine.
+| Figma slider | Option | | Optical extras | Option |
+|---|---|---|---|---|
+| Frost | `frost` | | curvature (sphere→squircle) | `curvature` |
+| Refraction | `refraction` | | convex↔concave | `convexity` |
+| Depth | `depth` | | tint | `tint`, `tintOpacity` |
+| Dispersion | `dispersion` | | corner radius | `radius` |
+| Splay | `splay` | | | |
+| Light (angle / %) | `lightAngle` / `lightIntensity` | | | |
 
-```bash
-npm i                                   # installs playwright-core
-npm run bench                           # uses your installed Chrome
-node bench/run-playwright.mjs --dur 2.5 --counts 1,5,15,30,60 --modes css,svg,svg-clone,webgl
-npx playwright install webkit firefox   # to also bench Safari & Firefox engines
-```
-Writes `bench/results.json` and `bench/results.csv`.
+## Shapes
 
-> Note: headless reports vsync-capped 60fps; real differences show under load and on
-> retina (`dpr 2`). `svg-clone` is the heaviest (one clone per element); `webgl` is
-> capped by the browser's ~8–16 live GL contexts — both are surfaced as findings.
+Any **rounded rectangle (incl. pills & circles)** works with zero extra code — a
+`ResizeObserver` regenerates the refraction map on resize. Arbitrary outlines (blobs,
+SVG paths) keep the blur/tint/highlight via `clip-path`, but refraction edges assume a
+rounded box; supply a custom displacement map for true custom outlines.
 
 ---
 
-## Releasing (CI)
-
-Two GitHub Actions handle shipping:
-
-- **`.github/workflows/pages.yml`** — deploys `site/` to GitHub Pages on every push to `main` that touches `site/`.
-- **`.github/workflows/release.yml`** — publishes to npm when a `v*` tag is pushed, via **npm Trusted Publishing (OIDC)** — no `NPM_TOKEN`, provenance generated automatically.
-
-**One-time bootstrap** (npm requires the package to exist before a trusted publisher can be configured):
-
-1. `npm publish --access public` once from a logged-in machine to create `glasskit-js`.
-2. npmjs.com → the package → **Settings → Trusted Publisher** → GitHub Actions, repo `amanblog/glasskit`, workflow `release.yml`.
-
-After that, cutting a release is tokenless:
-
-```bash
-npm version patch        # bumps package.json + creates the vX.Y.Z tag & commit
-git push --follow-tags   # CI verifies tag == version, then publishes with provenance
-```
+Built something with it, or want to hack on the engine, generator, or benchmark?
+See **[CONTRIBUTING.md](./CONTRIBUTING.md)**.
 
 ## License
-MIT — see [LICENSE](LICENSE).
+
+MIT — see [LICENSE](./LICENSE).

package/liquid-glass.d.ts

@@ -43,6 +43,8 @@ export interface LiquidGlassOptions {
   saturate?: number;
   /** Backdrop brightness (css mode). @default 1.04 */
   brightness?: number;
+  /** Outer drop shadow as any CSS box-shadow value; "none" or "" removes it. The inner light border/bezel are controlled by `lightIntensity`. @default "0 8px 30px rgba(0,0,0,0.18)" */
+  shadow?: string;
   /** Override corner radius (px). null = read element's border-radius. @default null */
   radius?: number | null;
   /** Element or selector to refract. Required for `svg-clone` and `webgl`. */

package/liquid-glass.js

@@ -42,6 +42,7 @@
     sheenColor: '255,255,255', // "r,g,b" — recolor the gloss
     saturate: 1.4,
     brightness: 1.04,
+    shadow: '0 8px 30px rgba(0,0,0,0.18)', // outer drop shadow; 'none'/'' removes it, or pass any CSS box-shadow
     radius: null,         // null = read element border-radius
     background: null      // Element|selector — required for 'svg-clone' & 'webgl'
   };
@@ -58,6 +59,11 @@
   function clamp8(v) { return v < 0 ? 0 : v > 255 ? 255 : Math.round(v); }
   // only ever emit a clean "r,g,b" triplet into inline CSS — blocks url()/expression smuggling
   function safeRGB(v) { return (typeof v === 'string' && /^\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*$/.test(v)) ? v.replace(/\s+/g, '') : '255,255,255'; }
+  // allow only box-shadow-shaped CSS (lengths/colors); reject url()/expression/extra declarations
+  function safeShadow(v) {
+    if (typeof v !== 'string' || !v || v === 'none') return '';
+    return /url\(|expression|javascript:|[;{}<>]/i.test(v) ? '' : v;
+  }
   function num(v, d) { var n = parseFloat(v); return isFinite(n) ? n : d; }
   function resolveEl(x) { return typeof x === 'string' ? document.querySelector(x) : x; }
   function readRadius(el) { return parseFloat(getComputedStyle(el).borderRadius) || 0; }
@@ -251,11 +257,13 @@
       overlay.style.background = sh <= 0 ? 'none' :
         'linear-gradient(' + (num(o.lightAngle, -45) + 90) + 'deg,rgba(' + sc + ',' + (0.6 * sh).toFixed(3) +
         ') 0%,rgba(' + sc + ',0) 30%,rgba(' + sc + ',0) 70%,rgba(' + sc + ',' + (0.14 * sh).toFixed(3) + ') 100%)';
-      overlay.style.boxShadow =
+      // inset light border + bezel (scale with lightIntensity) and a separately controllable outer drop shadow
+      var insets =
         'inset 0 0 0 1px rgba(255,255,255,' + (0.30 * li) + '),' +
         'inset ' + (Math.cos(a) * 2).toFixed(1) + 'px ' + (Math.sin(a) * 2).toFixed(1) + 'px 2px rgba(255,255,255,' + (0.5 * li) + '),' +
-        'inset ' + (-Math.cos(a) * 2).toFixed(1) + 'px ' + (-Math.sin(a) * 2).toFixed(1) + 'px 6px rgba(0,0,0,.15),' +
-        '0 8px 30px rgba(0,0,0,.18)';
+        'inset ' + (-Math.cos(a) * 2).toFixed(1) + 'px ' + (-Math.sin(a) * 2).toFixed(1) + 'px 6px rgba(0,0,0,.15)';
+      var drop = safeShadow(o.shadow);
+      overlay.style.boxShadow = drop ? insets + ',' + drop : insets;
     }
 
     /* ------------------------------ WebGL ------------------------------ */
@@ -389,7 +397,7 @@
   /* ===================== <glass-kit> web component ===================== */
   var ATTRS = ['mode', 'frost', 'refraction', 'depth', 'dispersion', 'splay', 'light-angle',
     'light-intensity', 'curvature', 'convexity', 'tint', 'tint-opacity', 'sheen', 'sheen-color',
-    'radius', 'background'];
+    'shadow', 'radius', 'background'];
   function camel(s) { return s.replace(/-([a-z])/g, function (_, c) { return c.toUpperCase(); }); }
   function defineElement() {
     if (typeof customElements === 'undefined' || customElements.get('glass-kit')) return;
@@ -399,7 +407,7 @@
       ATTRS.forEach(function (a) {
         if (!node.hasAttribute(a)) return;
         var v = node.getAttribute(a), key = camel(a);
-        opts[key] = (a === 'mode' || a === 'tint' || a === 'sheen-color' || a === 'background') ? v : parseFloat(v);
+        opts[key] = (a === 'mode' || a === 'tint' || a === 'sheen-color' || a === 'shadow' || a === 'background') ? v : parseFloat(v);
       });
       return opts;
     }
@@ -416,5 +424,5 @@
   }
   if (typeof window !== 'undefined') { if (document.readyState !== 'loading') defineElement(); else document.addEventListener('DOMContentLoaded', defineElement); }
 
-  return { apply: apply, defineElement: defineElement, isChromium: isChromium, pickMode: pickMode, DEFAULTS: DEFAULTS, version: '1.0.0' };
+  return { apply: apply, defineElement: defineElement, isChromium: isChromium, pickMode: pickMode, DEFAULTS: DEFAULTS, version: '1.0.2' };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glasskit-js",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Drop-in Apple/Figma 'Liquid Glass' for any element — switch between pure CSS, SVG displacement (live backdrop), cross-browser clone-mode, or WebGL. Real refraction, chromatic aberration, specular highlight. Zero dependencies. Class + <liquid-glass> web component.",
   "keywords": [
     "liquid-glass",