@edinstvo/glass 0.1.0-alpha.1 → 0.1.0-beta.1

package/README.md

@@ -51,7 +51,7 @@ npm i @edinstvo/glass
   import "@edinstvo/glass/define";
 </script>
 
-<edinstvo-glass material="regular" interaction="calm">
+<edinstvo-glass frost="0.4" refraction="0.5">
   Hello
 </edinstvo-glass>
 ```
@@ -63,14 +63,14 @@ Not a fan of custom elements? Attach glass to any node:
 ```js
 import { attachGlass } from "@edinstvo/glass";
 
-const glass = attachGlass(element, { material: "frost" });
+const glass = attachGlass(element, { material: { frost: 0.7 } });
 glass.set({ material: { frost: 0.4 } });
 glass.destroy();
 ```
 
 ## Material
 
-Set a preset with `material`, then override anything with an attribute, a `--glass-*` CSS variable or a property.
+There are no types of glass, only settings. Set anything with an attribute, a `--glass-*` CSS variable or the `material` property. The defaults are tuned against the system glass on macOS, pixel by pixel.
 
 | Attribute | Range | What it does |
 |---|---|---|
@@ -88,16 +88,37 @@ Set a preset with `material`, then override anything with an attribute, a `--gla
 | `light-angle` | -180 to 180° | Where the light comes from. 0 is the top |
 | `bloom` | 0 to 1 | Glow inside the glass and around it |
 
-### Presets
+## Motion
 
-`pure` · `clear` · `regular` · `frost` · `lens` · `prism`
+Change an element's size or position in CSS and the glass flows there with a spring, overshoot included.
+Each of these is its own setting, on a group or on a single child. `prefers-reduced-motion` turns them all off.
 
-`regular` and `clear` are tuned against the system glass on macOS, pixel by pixel. `pure` is the same lens with no frost at all.
+| Attribute | Range | What it does |
+|---|---|---|
+| `morph` | 0 to 1 | Softness of the flow. 0 jumps straight to the new shape |
+| `jelly` | 0 to 1 | Stretch while moving and under a drag |
+| `press` | 0 to 1 | How much the glass swells when held |
+| `glow` | 0 to 1 | Light that spreads from under the finger |
+| `follow` | 0 to 1 | How far the light chases the pointer |
+| `merge` | 0 to 64 px | Melts this element into others that have it too. 0 stays separate |
+
+### Merge
+
+Merging is opt-in, per element. Give `merge` to the pieces that should become one shape: they melt together when they get close and pull apart like liquid. Everything else in the group stays separate.
+
+```html
+<edinstvo-glass-group>
+  <edinstvo-glass merge="28"></edinstvo-glass>
+  <edinstvo-glass merge="28"></edinstvo-glass>
+  <edinstvo-glass></edinstvo-glass>
+</edinstvo-glass-group>
+```
+
+Up to 8 shapes per group, all drawn in one pass. `merge` on the group sets it for every child, `merge="0"` on a child opts out.
 
-### Interaction
+### Appear
 
-`none` · `calm` · `lively`, or your own `{ follow, press, stretch }`.
-Light follows the pointer, the surface swells under a press. `prefers-reduced-motion` turns all of it off.
+Add `appear` to materialise on load, or call `show()` and `hide()`. Both return a promise.
 
 ## Backdrop
 
@@ -123,6 +144,7 @@ on top of `backdrop-filter`. The element falls back to the same look by itself w
 
 ## Limits
 
+- Glass sees other glass under it. Later in the document means on top, `z-index` is not read yet.
 - Text and regular DOM behind the glass aren't refracted, only the sources listed above. Draw them to a canvas if you need them.
 - CSS gradients aren't read yet. Glass skips them and looks further down the stack.
 - Cross-origin images need CORS headers, otherwise that element falls back to CSS.

package/dist/element.d.ts

@@ -1,26 +1,34 @@
 import type { GlassSource } from "./backdrop.js";
-import type { Interaction, InteractionName } from "./interaction.js";
-import { type Material, type PresetName } from "./material.js";
+import { type Material } from "./material.js";
+import { GlassSurface } from "./surface.js";
 declare const Base: typeof HTMLElement;
 export declare class EdinstvoGlass extends Base {
     static observedAttributes: string[];
-    private surface;
+    protected surface: GlassSurface;
+    private group;
     private sourceValue;
     private materialValue;
-    private interactionValue;
     constructor();
+    protected get isGroup(): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
     attributeChangedCallback(): void;
     get source(): GlassSource;
     set source(value: GlassSource);
-    get material(): PresetName | Partial<Material>;
-    set material(value: PresetName | Partial<Material>);
-    get interaction(): InteractionName | Interaction;
-    set interaction(value: InteractionName | Interaction);
+    get material(): Partial<Material>;
+    set material(value: Partial<Material>);
     invalidate(): void;
-    private sync;
+    protected sync(): void;
     private composeMaterial;
 }
+export declare class EdinstvoGlassGroup extends EdinstvoGlass {
+    protected get isGroup(): boolean;
+    connectedCallback(): void;
+    adopt(child: EdinstvoGlass): void;
+    release(child: EdinstvoGlass): void;
+    refresh(): void;
+}
 export declare function defineGlass(tag?: string): void;
 export {};

package/dist/element.js

@@ -1,4 +1,5 @@
-import { kebab, numericKeys, presets } from "./material.js";
+import { motionKeys } from "./interaction.js";
+import { kebab, numericKeys } from "./material.js";
 import { GlassSurface, placeCanvas } from "./surface.js";
 const Base = (globalThis.HTMLElement ?? class {
 });
@@ -15,20 +16,39 @@ const css = `
   -webkit-backdrop-filter: blur(16px) saturate(1.6);
   backdrop-filter: blur(16px) saturate(1.6);
 }
+:host([data-grouped]) {
+  box-shadow: none;
+  background: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+:host([data-grouped]) > canvas {
+  display: none;
+}
+:host([data-glass-group]) {
+  display: block;
+  box-shadow: none;
+  border-radius: 0;
+  background: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
 .content {
   display: block;
   position: relative;
   z-index: 1;
   border-radius: inherit;
+  scale: var(--glass-scale, 1);
+  opacity: var(--glass-appear, 1);
 }
 `;
 const materialAttributes = new Map(numericKeys.map((key) => [kebab(key), key]));
 export class EdinstvoGlass extends Base {
-    static observedAttributes = ["material", "interaction", "source", "live", "tint", ...materialAttributes.keys()];
+    static observedAttributes = ["source", "live", "tint", "appear", ...motionKeys, ...materialAttributes.keys()];
     surface;
+    group = null;
     sourceValue;
     materialValue;
-    interactionValue;
     constructor() {
         super();
         const root = this.attachShadow({ mode: "open" });
@@ -42,17 +62,40 @@ export class EdinstvoGlass extends Base {
         content.setAttribute("part", "content");
         content.append(document.createElement("slot"));
         root.append(style, canvas, content);
-        this.surface = new GlassSurface(this, canvas);
+        this.surface = new GlassSurface(this, canvas, {}, this.isGroup);
+    }
+    get isGroup() {
+        return false;
     }
     connectedCallback() {
+        this.group = this.parentElement?.closest("[data-glass-group]") ?? null;
+        if (this.group) {
+            this.dataset.grouped = "";
+            this.group.adopt(this);
+            return;
+        }
         this.sync();
         this.surface.connect();
     }
     disconnectedCallback() {
+        if (this.group) {
+            this.group.release(this);
+            this.group = null;
+            delete this.dataset.grouped;
+            return;
+        }
         this.surface.disconnect();
     }
+    show() {
+        return this.surface.show();
+    }
+    hide() {
+        return this.surface.hide();
+    }
     attributeChangedCallback() {
-        if (this.isConnected)
+        if (this.group)
+            this.group.refresh();
+        else if (this.isConnected)
             this.sync();
     }
     get source() {
@@ -63,19 +106,12 @@ export class EdinstvoGlass extends Base {
         this.sync();
     }
     get material() {
-        return this.materialValue ?? (this.getAttribute("material") ?? "regular");
+        return this.materialValue ?? {};
     }
     set material(value) {
         this.materialValue = value;
         this.sync();
     }
-    get interaction() {
-        return this.interactionValue ?? (this.getAttribute("interaction") ?? "none");
-    }
-    set interaction(value) {
-        this.interactionValue = value;
-        this.sync();
-    }
     invalidate() {
         this.surface.invalidate();
     }
@@ -83,9 +119,9 @@ export class EdinstvoGlass extends Base {
         const live = this.getAttribute("live");
         this.surface.set({
             material: this.composeMaterial(),
-            interaction: this.interaction,
             source: this.source,
             live: live === null ? undefined : live !== "false",
+            appear: this.hasAttribute("appear"),
         });
     }
     composeMaterial() {
@@ -98,14 +134,31 @@ export class EdinstvoGlass extends Base {
         const tint = this.getAttribute("tint");
         if (tint)
             overrides.tint = tint;
-        if (!Object.keys(overrides).length)
-            return this.material;
-        const base = this.material;
-        return typeof base === "string" ? { ...presetOf(base), ...overrides } : { ...base, ...overrides };
+        return { ...this.material, ...overrides };
+    }
+}
+export class EdinstvoGlassGroup extends EdinstvoGlass {
+    get isGroup() {
+        return true;
+    }
+    connectedCallback() {
+        this.dataset.glassGroup = "";
+        super.connectedCallback();
+    }
+    adopt(child) {
+        this.surface.track(child);
+    }
+    release(child) {
+        this.surface.untrack(child);
+    }
+    refresh() {
+        this.surface.restyle();
     }
 }
-const presetOf = (name) => presets[name] ?? presets.regular;
 export function defineGlass(tag = "edinstvo-glass") {
+    if (!customElements.get(`${tag}-group`))
+        customElements.define(`${tag}-group`, class extends EdinstvoGlassGroup {
+        });
     if (!customElements.get(tag))
         customElements.define(tag, class extends EdinstvoGlass {
         });

package/dist/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"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"}

package/dist/geometry.d.ts

@@ -15,3 +15,4 @@ export declare function uvTransform(rect: {
 };
 export declare function cornerRadius(value: string, w: number, h: number): number;
 export declare function lightVector(angle: number): [number, number];
+export declare function softPeak(halfW: number, halfH: number, radius: number): number;

package/dist/geometry.js

@@ -24,4 +24,10 @@ export function lightVector(angle) {
     const radians = (angle * Math.PI) / 180;
     return [Math.sin(radians), -Math.cos(radians)];
 }
+export function softPeak(halfW, halfH, radius) {
+    const a = halfW + radius;
+    const b = halfH + radius;
+    const lo = Math.min(a, b);
+    return lo * (1 + (lo / Math.max(a, b)) ** 2.7) ** (-1 / 2.7) - radius;
+}
 //# sourceMappingURL=geometry.js.map

package/dist/geometry.js.map

@@ -1 +1 @@
-{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../src/geometry.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,MAAM,CAAC,GAAQ,EAAE,QAAgB,EAAE,QAAgB,EAAE,GAAQ;IAC3E,IAAI,GAAG,KAAK,MAAM,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,CAAC;IACzD,IAAI,GAAG,KAAK,MAAM;QAAE,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC5E,MAAM,IAAI,GAAG,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACnD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC;IACvD,MAAM,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3B,MAAM,CAAC,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3B,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AAC1E,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAmC,EAAE,GAAQ,EAAE,MAAc,EAAE,MAAc,EAAE,GAAW;IACpH,OAAO;QACL,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAU;QAC1E,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAU;KACpE,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAa,EAAE,CAAS,EAAE,CAAS;IAC9D,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACjF,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,MAAM,OAAO,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;IACxC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;AACjD,CAAC"}
+{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../src/geometry.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { EdinstvoGlass, defineGlass } from "./element.js";
+export { EdinstvoGlass, EdinstvoGlassGroup, defineGlass } from "./element.js";
 export { GlassSurface, attachGlass, type GlassOptions } from "./surface.js";
-export { type Material, type PresetName, presets, ranges, resolveMaterial } from "./material.js";
-export { type Interaction, type InteractionName, interactions } from "./interaction.js";
+export { type Material, defaults, ranges, resolveMaterial } from "./material.js";
+export { type Motion, motionDefaults, motionRanges, resolveMotion } from "./interaction.js";
 export type { GlassImage, GlassSource } from "./backdrop.js";

package/dist/index.js

@@ -1,5 +1,5 @@
-export { EdinstvoGlass, defineGlass } from "./element.js";
+export { EdinstvoGlass, EdinstvoGlassGroup, defineGlass } from "./element.js";
 export { GlassSurface, attachGlass } from "./surface.js";
-export { presets, ranges, resolveMaterial } from "./material.js";
-export { interactions } from "./interaction.js";
+export { defaults, ranges, resolveMaterial } from "./material.js";
+export { motionDefaults, motionRanges, resolveMotion } from "./interaction.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,WAAW,EAAqB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAkC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACjG,OAAO,EAA0C,YAAY,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,WAAW,EAAqB,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAiB,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAe,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/interaction.d.ts

@@ -1,47 +1,61 @@
-export interface Interaction {
+export interface Motion {
     follow: number;
     press: number;
-    stretch: number;
+    jelly: number;
+    glow: number;
+    morph: number;
+    merge: number;
 }
-export declare const interactions: {
-    readonly none: {
-        readonly follow: 0;
-        readonly press: 0;
-        readonly stretch: 0;
-    };
-    readonly calm: {
-        readonly follow: 0.5;
-        readonly press: 0.4;
-        readonly stretch: 0;
-    };
-    readonly lively: {
-        readonly follow: 1;
-        readonly press: 1;
-        readonly stretch: 1;
-    };
-};
-export type InteractionName = keyof typeof interactions;
+export declare const motionRanges: Record<keyof Motion, readonly [number, number]>;
+export declare const motionKeys: (keyof Motion)[];
+export declare const motionDefaults: Motion;
+export declare const still: Motion;
+export declare function resolveMotion(...layers: (Partial<Motion> | undefined)[]): Motion;
 export declare class Spring {
     private stiffness;
     private damping;
     value: number;
     target: number;
-    private velocity;
+    velocity: number;
     constructor(value?: number, stiffness?: number, damping?: number);
     step(dt: number): void;
+    tune(stiffness: number): void;
+    snap(value: number): void;
+    shift(delta: number): void;
     get settled(): boolean;
 }
-export declare class Motion {
-    private host;
+export interface ShapeBox {
+    x: number;
+    y: number;
+    halfW: number;
+    halfH: number;
+    radius: number;
+    join: number;
+}
+export declare class Shape {
+    readonly element: HTMLElement;
     private wake;
     x: Spring;
     y: Spring;
+    w: Spring;
+    h: Spring;
+    pointerX: Spring;
+    pointerY: Spring;
     held: Spring;
+    glow: Spring;
+    touchX: number;
+    touchY: number;
+    radius: number;
+    placed: boolean;
+    motion: Motion;
     private springs;
     private cleanup;
-    constructor(host: HTMLElement, wake: () => void);
+    constructor(element: HTMLElement, wake: () => void);
     get moving(): boolean;
+    get pressed(): boolean;
     attach(): void;
     detach(): void;
-    step(dt: number, interaction: Interaction): void;
+    read(rect: DOMRect, scrolled: boolean, grow: boolean): void;
+    step(dt: number): void;
+    box(scale: number): ShapeBox;
 }