@cruxgarden/plasma-ui 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,11 +1,25 @@
 # Changelog
 
+## 0.2.0
+
+**Breaking:** the CSS class on every surface is `.plasma-panel`, was `.plasma-glass`.
+Only matters if you targeted it in your own stylesheet.
+
+- The material is called plasma throughout: prop descriptions, docs, and the
+  shader's own names. "Glass" is gone except where the readme credits Apple's
+  Liquid Glass as prior art.
+- `homepage` points at the site rather than the readme.
+
+## 0.1.2
+
+- Packaging and metadata only; no runtime change.
+
 ## 0.1.0
 
 Initial release.
 
 - `PlasmaProvider`: shared WebGL material with moods, theme, tint/opacity/frost, rim (color, width, highlight, edge line), viscosity/stretch/flow, blend, smoothness, refraction, dispersion, grid/magnet, quality.
-- `Plasma`: any element as a glass surface, with per-surface radius, lean, tint/opacity/frost/elevation, join-aware `padding`, drag with edge/grid snapping, controlled offsets, join events.
+- `Plasma`: any element as a plasma surface, with per-surface radius, lean, tint/opacity/frost/elevation, join-aware `padding`, drag with edge/grid snapping, controlled offsets, join events.
 - `usePlasma`: pulse, bump, capability and spring info.
 - CSS frosted fallback when WebGL2 is unavailable; `prefers-reduced-motion` support.
 - `fuse={false}`: surfaces that never blend, bridge, or join - for bars, docks, and fixed chrome.

package/README.md

@@ -1,6 +1,6 @@
 # Plasma UI
 
-A liquid glass workspace for React. Every `<Plasma>` panel joins one WebGL material: surfaces fuse on contact, refract what's behind them, and snap to a grid when dragged. Built for workspace and canvas UIs - tool panels, dashboards, launchers - by [Crux Garden](https://github.com/cruxgarden).
+Liquid panels for React. Every `<Plasma>` panel joins one shared plasma: surfaces fuse on contact, refract what's behind them, and snap to a grid when dragged. Built for workspace and canvas UIs - tool panels, dashboards, launchers - by [Crux Garden](https://github.com/cruxgarden).
 
 ![Dragging a panel: it tears off its group, travels as liquid, fuses with another panel, and snaps to the grid](docs/demo.gif)
 
@@ -42,7 +42,7 @@ Plasma UI 0.1 is a workspace library, not a full UI system. Know these before ad
 - **No layers.** Overlapping surfaces fuse. Dialogs, menus, toasts, and fixed bars must be plain CSS for now (the docs site's own nav shows the pattern).
 - **No clipping in scroll containers.** Plasma inside a scrollable list draws past its edges. Scrolling _inside_ one panel is fine.
 - **No drag or resize handles.** `draggable` moves the whole surface; mark interactive children `data-plasma-nodrag`.
-- **Draws its own background.** Browsers don't let WebGL read the rendered page, so the glass refracts its background layer - the procedural mood field, or any color, image, canvas, or video you pass via `background` - rather than your live DOM. Custom background shaders aren't supported yet.
+- **Draws its own background.** Browsers don't let WebGL read the rendered page, so the plasma refracts its background layer - the procedural mood field, or any color, image, canvas, or video you pass via `background` - rather than your live DOM. Custom background shaders aren't supported yet.
 - **Rounded rectangles only.** No rotation or arbitrary shapes.
 
 All of these are on the roadmap below.
@@ -54,7 +54,7 @@ Markup stays ordinary HTML. `PlasmaProvider` renders one fixed canvas behind the
 1. **Silhouette.** Every registered element reports its box; one shader draws them as a single shape. Corners against a neighbor square off, and blending applies only where surfaces face different ways, so flush panels share a clean outline while gaps and steps get rounded fillets.
 2. **Smoothing.** The silhouette is blurred and traced at its halfway contour, evening out curvature.
 3. **Height.** A heavier blur becomes a height map; its slope drives refraction, so joined panels act as one lens.
-4. **Tint and frost.** Color and translucency spread across the material with the same blur, so different values flow into each other across joins. The background renders once to a texture; two blurred copies serve frosted glass.
+4. **Tint and frost.** Color and translucency spread across the material with the same blur, so different values flow into each other across joins. The background renders once to a texture; two blurred copies serve the frosted plasma.
 5. **Light.** The final pass refracts the background, splits color at the edges, and adds a rim and a pointer highlight.
 
 Without WebGL2, `Plasma` falls back to a CSS frosted panel.
@@ -69,7 +69,7 @@ Without WebGL2, `Plasma` falls back to a CSS frosted panel.
 | `background`               | `BackgroundSource`                       |                | Any CSS color (luminance drift), image URL (refracted, slow swirl), or an `img`/`canvas`/`video` element - canvas and video update live. Dynamic. Omit for the procedural mood field |
 | `blend`                    | `number`                                 | mood           | Distance (px) at which surfaces start to fuse                                                                                                                                        |
 | `viscosity`                | `number`                                 | `0.5`          | `0` is watery and bouncy, `1` is slow like syrup; also scales drag and snap springs                                                                                                  |
-| `stretch`                  | `number`                                 | `1`            | How far the glass trails behind moving panels; `0` turns it off                                                                                                                      |
+| `stretch`                  | `number`                                 | `1`            | How far the plasma trails behind moving panels; `0` turns it off                                                                                                                     |
 | `flow`                     | `number`                                 | `0`            | Slow ripple along the edges                                                                                                                                                          |
 | `tint`                     | `string`                                 | `"#ffffff"`    | Plasma color (hex)                                                                                                                                                                   |
 | `opacity`                  | `number`                                 | `0`            | Tint strength, 0 (clear) to 1 (solid color)                                                                                                                                          |
@@ -128,12 +128,12 @@ const dusk: Mood = {
 
 ## Motion feel
 
-Each surface is a spring chasing its element, and the drawn glass always covers the element. Moving panels leave a trailing stretch; stopping ones overshoot before settling. Scrolling doesn't count as motion.
+Each surface is a spring chasing its element, and the drawn plasma always covers the element. Moving panels leave a trailing stretch; stopping ones overshoot before settling. Scrolling doesn't count as motion.
 
 ```tsx
 <PlasmaProvider viscosity={0.1} stretch={1.3} flow={0.6} />  // water
 <PlasmaProvider viscosity={0.85} stretch={1.8} />             // honey
-<PlasmaProvider stretch={0} />                                // glass tracks panels exactly
+<PlasmaProvider stretch={0} />                                // the plasma tracks panels exactly
 ```
 
 `flow` ripples the outline, so leave it at `0` where flush edges should stay perfectly straight.
@@ -149,13 +149,13 @@ Each surface is a spring chasing its element, and the drawn glass always covers
   <Plasma tint="#ff5fa2" opacity={0.3} />
 </PlasmaProvider>
 
-// plain glass: no colored rim, just the edge line
+// plain plasma: no colored rim, just the edge line
 <PlasmaProvider rim={0} />
 ```
 
 ## Guidelines
 
-- Use glass for containers: panels, docks, cards, dialogs. Small controls read better as regular HTML on top.
+- Use plasma for containers: panels, docks, cards, dialogs. Small controls read better as regular HTML on top.
 - Place surfaces either flush (they become one piece) or further apart than the blend distance. Smaller gaps render as liquid bridging.
 - Up to `maxSurfaces` (default 16) draw at once; offscreen ones are skipped first. Two render passes loop over every slot per pixel, so raise it only as far as you need.
 - Lean and pulses use the CSS `translate` and `scale` properties, and drag uses `transform`, so they compose with each other. Avoid setting those on `Plasma` elements yourself.
@@ -165,9 +165,9 @@ Each surface is a spring chasing its element, and the drawn glass always covers
 
 In priority order. Not a schedule.
 
-1. **Layers** - independent materials that stack instead of fusing, for dialogs, menus, and fixed chrome over glass.
+1. **Layers** - independent materials that stack instead of fusing, for dialogs, menus, and fixed chrome over plasma.
 2. **Drag handles and resize** - `handle` prop so panel content stays fully interactive; edge resize with grid snapping.
-3. **Scroll clipping** - glass confined to scrollable containers.
+3. **Scroll clipping** - plasma confined to scrollable containers.
 4. **Pluggable backgrounds** - colors, images, and live canvas/video shipped in 0.1 (`background` prop); custom shaders next.
 5. **Shapes** - rotation and non-rectangular outlines.
 
@@ -225,7 +225,7 @@ Plasma UI is built on well-known graphics and simulation techniques:
 - **Blobby surfaces / metaballs** - the fuse-on-contact behavior descends from Jim Blinn's [_A Generalization of Algebraic Surface Drawing_](https://dl.acm.org/doi/10.1145/357306.357310) (1982).
 - **Signed distance fields** - the material is drawn with 2D SDFs combined by smooth minimum, per Inigo Quilez's [2D distance functions](https://iquilezles.org/articles/distfunctions2d/) and [smooth minimum](https://iquilezles.org/articles/smin/) articles; the procedural background uses his [fBM](https://iquilezles.org/articles/fbm/) construction.
 - **Spring integration** - panel motion uses semi-implicit Euler with fixed substeps, in the spirit of Glenn Fiedler's [_Integration Basics_](https://gafferongames.com/post/integration_basics/).
-- **Liquid glass** - the optical treatment (refraction, dispersion, frost) is an original WebGL take on the direction popularized by Apple's [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials) material.
+- **The optical treatment** (refraction, dispersion, frost) is an original WebGL take on the direction popularized by Apple's [Liquid Glass](https://developer.apple.com/design/human-interface-guidelines/materials) material.
 
 ## License
 

package/dist/PlasmaProvider.d.ts

@@ -25,7 +25,7 @@ export interface PlasmaProviderProps {
     edgeLine?: number;
     /** How thick the material feels: 0 is watery and bouncy, 1 is slow like syrup. Also scales drag and snap springs. Default 0.5. */
     viscosity?: number;
-    /** How far the glass trails and stretches behind moving panels. 0 turns it off. Default 1. */
+    /** How far the plasma trails and stretches behind moving panels. 0 turns it off. Default 1. */
     stretch?: number;
     /** Slow ripple along the edges. Default 0 (still edges). */
     flow?: number;
@@ -35,9 +35,9 @@ export interface PlasmaProviderProps {
     radius?: number;
     /** Plasma tint color (hex). Default "#ffffff". */
     tint?: string;
-    /** Tint strength from 0 (clear glass) to 1 (solid color). Default 0. */
+    /** Tint strength from 0 (clear) to 1 (solid color). Default 0. */
     opacity?: number;
-    /** Translucency from 0 (clear glass) to 1 (frosted). Default 0. */
+    /** Translucency from 0 (clear) to 1 (frosted). Default 0. */
     frost?: number;
     /** How high surfaces float: 0 sits flat with no shadow, 1 floats high with a deep soft shadow. Dragged surfaces raise automatically. Default 0.35. */
     elevation?: number;
@@ -47,13 +47,13 @@ export interface PlasmaProviderProps {
     pointerDrop?: boolean;
     /** Decorative drops orbiting near the bottom right. Default false. */
     ambientDrops?: boolean;
-    /** Grid cell size used when draggable glass snaps. Default 24. */
+    /** Grid cell size used when a draggable panel snaps. Default 24. */
     grid?: number;
     /** Edge latch distance for snapping. Default 40. */
     magnet?: number;
     /** Maximum device pixel ratio for the canvas. Default 1.25. */
     quality?: number;
-    /** Maximum visible glass surfaces. Compiled into the shaders, so it is fixed for the provider's lifetime; more surfaces cost GPU time. Default 16. */
+    /** Maximum visible plasma surfaces. Compiled into the shaders, so it is fixed for the provider's lifetime; more surfaces cost GPU time. Default 16. */
     maxSurfaces?: number;
     /** z-index of the fixed canvas. Default -1 (behind content). */
     zIndex?: number;
@@ -66,7 +66,7 @@ export interface PlasmaContextValue {
     frost: number;
     /** Provider-level default corner radius. */
     radius: number;
-    /** False when WebGL2 is unavailable; <Plasma> falls back to CSS glass. */
+    /** False when WebGL2 is unavailable; <Plasma> falls back to a CSS frosted panel. */
     supported: boolean;
     grid: number;
     magnet: number;

package/dist/index.js

@@ -185,7 +185,7 @@ out vec4 o;
 vec3 pal(float t){ return .5 + .5*cos(6.2831*(t + vec3(0., .33, .67))); }
 float H(vec2 uv){ return texture(uH, uv).r; }
 vec2 uvAt(vec2 q){ return vec2(q.x, uRes.y - q.y) / uRes; }
-// background seen through glass with frost f: sharp, then medium, then heavy blur
+// background seen through plasma with frost f: sharp, then medium, then heavy blur
 vec3 seen(vec2 q, float f){
   vec2 u = uvAt(q);
   vec3 sharp = texture(uBg, u).rgb;
@@ -253,7 +253,7 @@ void main(){
       seen(p + off*(1.-disp), fr).b
     );
     refr = mix(refr, vec3(dot(refr, vec3(.333))), .18) * mix(1.08, .9, uLight) + .03*(1.-uLight);
-    // frosted glass: milkier and a little brighter
+    // frosted: milkier and a little brighter
     refr = mix(refr, mix(refr, vec3(dot(refr, vec3(.333))), .25) * mix(1.12, .97, uLight) + mix(.05, .03, uLight), fr);
     float hl = 1. - .55*uLight;
 
@@ -273,16 +273,16 @@ void main(){
     if (uRimMode > .5 && uRimMode < 1.5) rimCol = uRimColor * facing * 1.4;
     else if (uRimMode > 1.5) rimCol = tcol * facing * 1.4;
 
-    vec3 glass = refr;
-    glass += rimCol * fres * .45 * hl * uRim;
-    glass += vec3(1.) * spec * .75 * hl * uSpec;
+    vec3 plasma = refr;
+    plasma += rimCol * fres * .45 * hl * uRim;
+    plasma += vec3(1.) * spec * .75 * hl * uSpec;
     // faint shimmer across the body; fades out as the tint becomes opaque
-    glass += pal(uTime*.04 + p.y/900. + uEnergy*.3) * .05 * lift * (1.+uEnergy*2.) * hl * (1. - talpha);
+    plasma += pal(uTime*.04 + p.y/900. + uEnergy*.3) * .05 * lift * (1.+uEnergy*2.) * hl * (1. - talpha);
     vec3 hairCol = uRimMode > .5 ? mix(vec3(1.), rimCol / 1.4, .6) : vec3(.9,.95,1.);
-    glass += hairCol * (1.-smoothstep(0., 1.6, abs(sd - .7))) * .4 * hl * uHair;
+    plasma += hairCol * (1.-smoothstep(0., 1.6, abs(sd - .7))) * .4 * hl * uHair;
 
     float a = smoothstep(-.8, .8, sd);
-    col = mix(col, glass, a);
+    col = mix(col, plasma, a);
     grain = 1. - a;   // grain is background-only; panels stay clean
   }
   col += (hash(p + uTime) - .5) * .025 * grain;
@@ -1024,15 +1024,15 @@ var PlasmaContext = createContext({
 });
 var usePlasma = () => useContext(PlasmaContext);
 var FALLBACK_CSS = `
-.plasma-glass{box-sizing:border-box}
+.plasma-panel{box-sizing:border-box}
 .plasma-fallback{
   background:linear-gradient(160deg,rgb(255 255 255/.14),rgb(255 255 255/.05));
   -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
   border:1px solid rgb(255 255 255/.22);
   box-shadow:inset 0 1px 0 rgb(255 255 255/.25),0 20px 40px -20px rgb(0 0 0/.5);
 }
-.plasma-glass[data-plasma-draggable]{touch-action:none;cursor:grab}
-.plasma-glass[data-plasma-dragging]{cursor:grabbing;user-select:none}
+.plasma-panel[data-plasma-draggable]{touch-action:none;cursor:grab}
+.plasma-panel[data-plasma-dragging]{cursor:grabbing;user-select:none}
 `;
 function useReducedMotion() {
   const [reduced, setReduced] = useState(false);
@@ -1483,7 +1483,7 @@ var Plasma = forwardRef(function Plasma2({
     e.preventDefault();
     settle({ x: dest.current.x + d[0], y: dest.current.y + d[1] });
   };
-  const classes = ["plasma-glass", plasma.supported ? "" : "plasma-fallback", className].filter(Boolean).join(" ");
+  const classes = ["plasma-panel", plasma.supported ? "" : "plasma-fallback", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx2(
     Comp,
     {

package/dist/renderer.d.ts

@@ -25,7 +25,7 @@ export interface RendererSettings {
     stretch: number;
     /** Slow ripple along the outline. 0 = still edges. */
     flow: number;
-    /** Default glass tint (hex). */
+    /** Default plasma tint (hex). */
     tint: string;
     /** Default tint strength, 0 (clear) to 1 (solid color). */
     opacity: number;

package/dist/shaders.d.ts

@@ -1,4 +1,4 @@
-/** Default maximum glass shapes drawn at once (offscreen shapes are culled first). */
+/** Default maximum plasma shapes drawn at once (offscreen shapes are culled first). */
 export declare const DEFAULT_MAX_SHAPES = 16;
 /** Maximum concurrent pulses. */
 export declare const MAX_PULSES = 4;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cruxgarden/plasma-ui",
-  "version": "0.1.1",
-  "description": "A liquid glass workspace for React: panels share one WebGL material - they fuse on contact, refract, and snap to a grid.",
+  "version": "0.2.0",
+  "description": "Liquid panels for React: every panel is one shared plasma - they fuse on contact, refract, and snap to a grid.",
   "main": "dist/index.js",
   "scripts": {
     "build": "esbuild src/index.ts --bundle --format=esm --jsx=automatic --target=es2020 --external:react --external:react-dom --outfile=dist/index.js && tsc",
@@ -53,11 +53,11 @@
     "cruxgarden",
     "react",
     "webgl",
-    "glass",
+    "panels",
     "ui",
     "animation"
   ],
-  "homepage": "https://github.com/CruxGarden/plasma-ui#readme",
+  "homepage": "https://cruxgarden.github.io/plasma-ui/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/CruxGarden/plasma-ui.git"