@shulya/liquid-glass 0.0.0-stage → 1.0.0

package/dist/vue.mjs

@@ -0,0 +1,92 @@
+/**
+ * Vue 3 Adapter for Liquid Glass UI (Component + v-liquid-glass Directive)
+ */
+import { defineComponent, h, ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import { LiquidGlassController, OPTICAL_DEFAULTS } from './core.mjs';
+
+/**
+ * Vue Directive: v-liquid-glass="{ rim: 16, ior: 1.46, height: 18, frosted: 0, fusion: true }"
+ */
+export const vLiquidGlass = {
+  mounted(el, binding) {
+    el.__liquidGlass = new LiquidGlassController(el, binding.value || {});
+  },
+  updated(el, binding) {
+    if (el.__liquidGlass) {
+      el.__liquidGlass.update(binding.value || {});
+    }
+  },
+  unmounted(el) {
+    if (el.__liquidGlass) {
+      el.__liquidGlass.destroy();
+      delete el.__liquidGlass;
+    }
+  }
+};
+
+/**
+ * <LiquidGlass> Vue 3 Component
+ */
+export const LiquidGlass = defineComponent({
+  name: 'LiquidGlass',
+  props: {
+    rim: { type: Number, default: OPTICAL_DEFAULTS.rim },
+    ior: { type: Number, default: OPTICAL_DEFAULTS.ior },
+    height: { type: Number, default: OPTICAL_DEFAULTS.height },
+    frosted: { type: Number, default: OPTICAL_DEFAULTS.frosted },
+    fusion: { type: Boolean, default: OPTICAL_DEFAULTS.fusion },
+    tag: { type: String, default: 'div' }
+  },
+  setup(props, { slots, attrs }) {
+    const rootRef = ref(null);
+    let controller = null;
+
+    onMounted(() => {
+      if (rootRef.value) {
+        controller = new LiquidGlassController(rootRef.value, {
+          rim: props.rim,
+          ior: props.ior,
+          height: props.height,
+          frosted: props.frosted,
+          fusion: props.fusion
+        });
+      }
+    });
+
+    watch(
+      () => [props.rim, props.ior, props.height, props.frosted, props.fusion],
+      ([rim, ior, height, frosted, fusion]) => {
+        if (controller) {
+          controller.update({ rim, ior, height, frosted, fusion });
+        }
+      }
+    );
+
+    onBeforeUnmount(() => {
+      if (controller) {
+        controller.destroy();
+        controller = null;
+      }
+    });
+
+    return () =>
+      h(
+        props.tag,
+        {
+          ref: rootRef,
+          ...attrs
+        },
+        slots.default ? slots.default() : null
+      );
+  }
+});
+
+export const LiquidGlassPlugin = {
+  install(app) {
+    app.component('LiquidGlass', LiquidGlass);
+    app.directive('liquid-glass', vLiquidGlass);
+  }
+};
+
+export { LiquidGlassController, OPTICAL_DEFAULTS, OPTICAL_LIMITS } from './core.mjs';
+export default LiquidGlass;

package/example/README.md

@@ -0,0 +1,37 @@
+# `@shulya/liquid-glass` — React Interactive Playground (`example/`)
+
+- **Live Demo:** [https://liquid.shulya.tech](https://liquid.shulya.tech)
+- **GitHub Repository:** [https://github.com/shulya-tech/liquid-glass](https://github.com/shulya-tech/liquid-glass)
+
+![Liquid Glass React Playground](../screen.png)
+
+This directory contains a complete **React + Vite** application demonstrating the `<LiquidGlass>` component from `@shulya/liquid-glass/react`.
+
+## Overview
+
+- **Three Draggable `<LiquidGlass>` Components:**
+  - **Capsule Slider (`136 × 74 px`, radius `37 px`)** positioned over a green switch track.
+  - **Rounded Rectangle (`196 × 116 px`, radius `22 px`)** positioned over an electric blue gradient card.
+  - **Circular Lens (`112 × 112 px`, radius `56 px`)** positioned over a warm sunset sphere.
+- **High-Contrast Optical Stage:** Features a fine `56 px` architectural hairline grid, a thin diagonal rainbow ribbon, high-contrast black/white stripes, and centered `"Shulya"` typography to inspect edge refraction, chromatic dispersion, and specular bevel highlights.
+- **Liquid Surface Coalescence (`fusion`):** Drag any two or all three `<LiquidGlass>` elements close together to observe real-time liquid bridge coalescence powered by the precomputed empirical lookup tables (`_T0`–`_T4`), or toggle **Liquid Fusion** off in the bottom control shelf to inspect isolated lenses.
+- **Live React State Controls:**
+  - **Bevel Width (`rim`):** `6–32 px` (default `16 px`)
+  - **Refraction (`ior`):** `1.10–1.70` (default `1.46`)
+  - **Thickness (`height`):** `6–34 px` (default `18 px`)
+  - **Frosted Blur (`frosted`):** `0–30 px` (default `0 px`)
+  - **Liquid Fusion (`fusion`):** `true / false` toggle
+
+## Getting Started
+
+```bash
+# 1. From the root of the repository, build the library dist bundles:
+npm run build
+
+# 2. Install example dependencies and start the Vite dev server:
+cd example
+npm install
+npm run dev
+```
+
+Then open **`http://localhost:5173`** in your browser.

package/example/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Liquid Glass UI — React Interactive Playground</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

package/example/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "liquid-glass-ui-react-example",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Interactive React playground for @shulya/liquid-glass (https://liquid.shulya.tech)",
+  "homepage": "https://liquid.shulya.tech",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shulya-tech/liquid-glass.git",
+    "directory": "example"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "liquid-glass-ui": "file:..",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.2.0"
+  }
+}

package/example/src/App.jsx

@@ -0,0 +1,353 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import {
+  LiquidGlass,
+  OPTICAL_DEFAULTS,
+  scheduleStageRedraw
+} from '@shulya/liquid-glass/react';
+
+/**
+ * Draws a crisp, high-DPI optical test stage onto the background canvas:
+ * - Light architectural backdrop (#ebedf2) with fine 56px hairline grid
+ * - Sleek green switch pill track (top-left)
+ * - Thin diagonal rainbow gradient ribbon
+ * - Compact electric blue card (right-center)
+ * - Refined sunset radial sphere (bottom-left)
+ * - Fine 8px optical stripe grating (bottom-right)
+ * - Clean centered "Shulya" typography
+ */
+function drawStageBackground(canvas) {
+  if (!canvas) return;
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+  canvas.width = Math.floor(w * dpr);
+  canvas.height = Math.floor(h * dpr);
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  ctx.save();
+  ctx.scale(dpr, dpr);
+
+  // 1. Clean Light Gray Backdrop (#ebedf2)
+  ctx.fillStyle = '#ebedf2';
+  ctx.fillRect(0, 0, w, h);
+
+  // Fine architectural hairline grid (56px step, 0.5px crisp stroke)
+  ctx.strokeStyle = 'rgba(0, 0, 0, 0.035)';
+  ctx.lineWidth = 0.5;
+  const step = 56;
+  ctx.beginPath();
+  for (let x = 0; x < w; x += step) {
+    ctx.moveTo(x + 0.5, 0);
+    ctx.lineTo(x + 0.5, h);
+  }
+  for (let y = 0; y < h; y += step) {
+    ctx.moveTo(0, y + 0.5);
+    ctx.lineTo(w, y + 0.5);
+  }
+  ctx.stroke();
+
+  // 2. Sleek Green Switch Track (Top-Left)
+  const pillX = w * 0.16;
+  const pillY = h * 0.22;
+  const pillW = 160;
+  const pillH = 26;
+  ctx.save();
+  ctx.beginPath();
+  ctx.roundRect(pillX - pillW / 2, pillY - pillH / 2, pillW, pillH, pillH / 2);
+  ctx.fillStyle = '#32d74b';
+  ctx.fill();
+  ctx.restore();
+
+  // 3. Thin Diagonal Rainbow Gradient Ribbon
+  ctx.save();
+  ctx.translate(w * 0.5, h * 0.51);
+  ctx.rotate(-0.2);
+  const ribHalfLen = Math.min(w * 0.28, 310);
+  const ribThickness = 26;
+  const ribGrad = ctx.createLinearGradient(-ribHalfLen, 0, ribHalfLen, 0);
+  ribGrad.addColorStop(0.0, '#ff2d55');
+  ribGrad.addColorStop(0.25, '#ff9500');
+  ribGrad.addColorStop(0.5, '#ffcc00');
+  ribGrad.addColorStop(0.75, '#5ac8fa');
+  ribGrad.addColorStop(1.0, '#5856d6');
+  ctx.fillStyle = ribGrad;
+  ctx.beginPath();
+  ctx.roundRect(
+    -ribHalfLen,
+    -ribThickness / 2,
+    ribHalfLen * 2,
+    ribThickness,
+    ribThickness / 2
+  );
+  ctx.fill();
+  ctx.restore();
+
+  // 4. Refined Electric Blue Card (Right Center)
+  ctx.save();
+  const cardX = w * 0.67;
+  const cardY = h * 0.24;
+  const cardW = 152;
+  const cardH = 88;
+  const blueGrad = ctx.createLinearGradient(cardX, cardY, cardX + cardW, cardY + cardH);
+  blueGrad.addColorStop(0, '#007aff');
+  blueGrad.addColorStop(1, '#5856d6');
+  ctx.fillStyle = blueGrad;
+  ctx.beginPath();
+  ctx.roundRect(cardX, cardY, cardW, cardH, 22);
+  ctx.fill();
+  ctx.restore();
+
+  // 5. Compact Sunset Orange Sphere (Bottom Left)
+  ctx.save();
+  const orbX = w * 0.26;
+  const orbY = h * 0.67;
+  const orbR = 54;
+  const orbGrad = ctx.createRadialGradient(orbX - 14, orbY - 14, 6, orbX, orbY, orbR);
+  orbGrad.addColorStop(0, '#ffcc00');
+  orbGrad.addColorStop(0.6, '#ff3b30');
+  orbGrad.addColorStop(1, '#c91f66');
+  ctx.fillStyle = orbGrad;
+  ctx.beginPath();
+  ctx.arc(orbX, orbY, orbR, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.restore();
+
+  // 6. Fine Optical Stripe Grating (Bottom Right — 10px stripes for refraction testing)
+  ctx.save();
+  const stX = w * 0.63;
+  const stY = h * 0.62;
+  const stW = 160;
+  const stH = 92;
+  const stripeWidth = 10;
+  ctx.beginPath();
+  ctx.roundRect(stX, stY, stW, stH, 18);
+  ctx.clip();
+  for (let i = 0; i < stW / stripeWidth; i++) {
+    ctx.fillStyle = i % 2 === 0 ? '#1c1c1e' : '#ffffff';
+    ctx.fillRect(stX + i * stripeWidth, stY, stripeWidth, stH);
+  }
+  ctx.restore();
+
+  // 7. Sleek Center Typography ("Shulya")
+  ctx.save();
+  const fontSize = Math.min(w * 0.082, 92);
+  ctx.font = `600 ${fontSize}px -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillStyle = '#16181d';
+  ctx.fillText('Shulya', w * 0.5, h * 0.43);
+  ctx.restore();
+
+  ctx.restore();
+}
+
+export default function App() {
+  const stageRef = useRef(null);
+
+  // Live optical configuration parameters bound to <LiquidGlass> props
+  const [rim, setRim] = useState(OPTICAL_DEFAULTS.rim);
+  const [ior, setIor] = useState(OPTICAL_DEFAULTS.ior);
+  const [height, setHeight] = useState(OPTICAL_DEFAULTS.height);
+  const [frosted, setFrosted] = useState(OPTICAL_DEFAULTS.frosted);
+  const [fusion, setFusion] = useState(OPTICAL_DEFAULTS.fusion);
+  const [fps, setFps] = useState(60);
+
+  // Three sleek draggable LiquidGlass bodies
+  const [shapes, setShapes] = useState(() => {
+    const w = typeof window !== 'undefined' ? window.innerWidth : 1280;
+    const h = typeof window !== 'undefined' ? window.innerHeight : 800;
+    return [
+      { id: 'slider', x: w * 0.16 + 42, y: h * 0.22, w: 136, h: 74, r: 37 },
+      { id: 'rect', x: w * 0.71, y: h * 0.21, w: 196, h: 116, r: 22 },
+      { id: 'circle', x: w * 0.22, y: h * 0.65, w: 112, h: 112, r: 56 }
+    ];
+  });
+
+  const dragState = useRef(null);
+
+  // Draw stage canvas and handle window resize
+  useEffect(() => {
+    drawStageBackground(stageRef.current);
+    scheduleStageRedraw();
+
+    const handleResize = () => {
+      drawStageBackground(stageRef.current);
+      scheduleStageRedraw();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // FPS monitor
+  useEffect(() => {
+    let frameCount = 0;
+    let lastTime = performance.now();
+    let rafId;
+
+    const tick = (now) => {
+      frameCount++;
+      if (now - lastTime >= 500) {
+        setFps(Math.min(120, Math.round((frameCount * 1000) / (now - lastTime))));
+        frameCount = 0;
+        lastTime = now;
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  // Pointer dragging handlers
+  const handlePointerDown = useCallback((id, e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setShapes((prev) => {
+      const idx = prev.findIndex((s) => s.id === id);
+      if (idx === -1) return prev;
+      const target = prev[idx];
+      dragState.current = {
+        id,
+        offX: e.clientX - target.x,
+        offY: e.clientY - target.y
+      };
+      // Move active dragged shape to top of render order
+      const next = [...prev];
+      const [picked] = next.splice(idx, 1);
+      next.push(picked);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    const handlePointerMove = (e) => {
+      if (!dragState.current) return;
+      const { id, offX, offY } = dragState.current;
+      const nextX = e.clientX - offX;
+      const nextY = e.clientY - offY;
+
+      setShapes((prev) =>
+        prev.map((s) => (s.id === id ? { ...s, x: nextX, y: nextY } : s))
+      );
+      scheduleStageRedraw();
+    };
+
+    const handlePointerUp = () => {
+      dragState.current = null;
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, []);
+
+  return (
+    <>
+      {/* Background Optical Test Stage */}
+      <canvas ref={stageRef} className="stage-canvas" />
+
+      {/* Three Draggable <LiquidGlass> React Components */}
+      {shapes.map((s, index) => (
+        <LiquidGlass
+          key={s.id}
+          rim={rim}
+          ior={ior}
+          height={height}
+          frosted={frosted}
+          fusion={fusion}
+          className="glass-body"
+          data-lg-tint="rgba(255, 255, 255, 0.03)"
+          onPointerDown={(e) => handlePointerDown(s.id, e)}
+          style={{
+            width: `${s.w}px`,
+            height: `${s.h}px`,
+            borderRadius: `${s.r}px`,
+            left: `${Math.round(s.x - s.w * 0.5)}px`,
+            top: `${Math.round(s.y - s.h * 0.5)}px`,
+            zIndex: 20 + index
+          }}
+        />
+      ))}
+
+      {/* Bottom Interactive Control Shelf */}
+      <div className="shelf-bar">
+        <div className="ctrl">
+          <div className="ctrl-head">
+            <span>Bevel Width (Rim)</span>
+            <span className="ctrl-val">{rim} px</span>
+          </div>
+          <input
+            type="range"
+            min="6"
+            max="32"
+            step="1"
+            value={rim}
+            onChange={(e) => setRim(Number(e.target.value))}
+          />
+        </div>
+
+        <div className="ctrl">
+          <div className="ctrl-head">
+            <span>Refraction (IOR)</span>
+            <span className="ctrl-val">{ior.toFixed(2)}</span>
+          </div>
+          <input
+            type="range"
+            min="1.10"
+            max="1.70"
+            step="0.02"
+            value={ior}
+            onChange={(e) => setIor(Number(e.target.value))}
+          />
+        </div>
+
+        <div className="ctrl">
+          <div className="ctrl-head">
+            <span>Thickness (Height)</span>
+            <span className="ctrl-val">{height} px</span>
+          </div>
+          <input
+            type="range"
+            min="6"
+            max="34"
+            step="1"
+            value={height}
+            onChange={(e) => setHeight(Number(e.target.value))}
+          />
+        </div>
+
+        <div className="ctrl">
+          <div className="ctrl-head">
+            <span>Frosted Blur</span>
+            <span className="ctrl-val">{frosted} px</span>
+          </div>
+          <input
+            type="range"
+            min="0"
+            max="30"
+            step="1"
+            value={frosted}
+            onChange={(e) => setFrosted(Number(e.target.value))}
+          />
+        </div>
+
+        <label className="ctrl-toggle">
+          <input
+            type="checkbox"
+            checked={fusion}
+            onChange={(e) => setFusion(e.target.checked)}
+          />
+          <span>Liquid Fusion</span>
+        </label>
+
+        <div className="fps-tag">{fps} FPS</div>
+      </div>
+    </>
+  );
+}

package/example/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx';
+import './styles.css';
+
+createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/example/src/styles.css

@@ -0,0 +1,155 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #ebedf2;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+.stage-canvas {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  display: block;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* Interactive Draggable LiquidGlass Elements */
+.glass-body {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  cursor: grab;
+  touch-action: none;
+  will-change: left, top;
+  box-shadow: 2px 10px 18px rgba(0, 0, 0, 0.12);
+}
+
+.glass-body:active {
+  cursor: grabbing;
+}
+
+/* Bottom Control Shelf */
+.shelf-bar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 10px 20px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03);
+  color: #1c1c1e;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 95vw;
+}
+
+.ctrl {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 110px;
+}
+
+.ctrl-head {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: #636366;
+}
+
+.ctrl-val {
+  color: #007aff;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.1);
+  outline: none;
+  cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 1.5px solid rgba(0, 122, 255, 0.6);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+}
+
+.ctrl-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #3a3a3c;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.ctrl-toggle input {
+  accent-color: #007aff;
+  width: 13px;
+  height: 13px;
+  cursor: pointer;
+}
+
+.fps-tag {
+  font-size: 10.5px;
+  font-weight: 700;
+  color: #30d158;
+  background: rgba(48, 209, 88, 0.12);
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 720px) {
+  .shelf-bar {
+    gap: 10px;
+    padding: 10px 14px;
+    border-radius: 20px;
+    bottom: 12px;
+  }
+
+  .ctrl {
+    min-width: 96px;
+  }
+}