LiquidGlass forces center anchoring via translate(-50%, -50%) making placement difficult; cannot disable via props

[Ephasme]

Summary

LiquidGlass always applies

transform: translate(calc(-50% + x), calc(-50% + y)) …

and defaults to

top: 50%;
left: 50%;

when not provided.
This effectively anchors the component’s center to the given point and makes it hard to position the element in normal document flow or by top-left coordinates.

Passing globalMousePos={{x:0,y:0}} and mouseOffset={{x:0,y:0}} removes motion, but placement remains “off” due to the enforced center anchoring.

---

Environment

• liquid-glass-react: 1.1.1
• React: 19.1.1
• Vite: 7.1.2
• Browser: Chrome (latest) [also reproducible elsewhere]

---

Reproduction

Render LiquidGlass without explicit style.top/left and set mouse props to zeros:

<LiquidGlass
  cornerRadius={20}
  elasticity={0}
  globalMousePos={{ x: 0, y: 0 }}
  mouseOffset={{ x: 0, y: 0 }}
>
  <h1>Example</h1>
</LiquidGlass>

The element appears “badly placed” (unexpectedly centered/offset) within the layout.

Even with explicit zero motion, computed styles show:

transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(1);
top: 50%;
left: 50%;

---

Expected Behavior

Ability to opt out of the built-in centering so the component can:

• Participate in normal flow, or
• Be positioned by its top-left corner (via parent CSS) without the -50% translation.

---

Actual Behavior

Component enforces center anchoring:

• Defaults to position: relative, top: 50%, left: 50% when not set.
• Always includes translate(calc(-50% + x), calc(-50% + y)) in its inline transform.

As a result, the component is difficult to place precisely unless you adopt the center-anchoring model (e.g., position: fixed; top: 50%; left: 50%).

---

Code References

• Build of transform with translate(-50%, -50%) + elastic offsets:
  node_modules/liquid-glass-react/dist/index.js:431

• Defaulting of position and top/left to 50%:
  node_modules/liquid-glass-react/dist/index.js:434-441

---

Workarounds

• Use style={{ position: "fixed", top: "50%", left: "50%" }} to anchor center to viewport.
• Or wrap LiquidGlass in a parent position: relative container and give LiquidGlass position: absolute; top: 50%; left: 50% to center within that container.
• To eliminate motion only, set elasticity={0} (but centering remains).

---

Proposed API Improvements

Add a prop to disable internal centering and position management, for example:

• managePosition?: boolean (default true)

  • If false, do not set default position/top/left, and omit the translate(-50%, -50%) part (apply only elastic translation from globalMousePos/mouseOffset).

Alternatively:

• center?: boolean (default true) — control the -50% centering behavior explicitly.
• anchorOrigin?: "center" | "top-left" | { x: string; y: string } — more precise control.

Also:

• Document clearly that without these props, the component centers itself and expects an anchor at top/left.

---

This change would preserve the current default behavior while letting consumers integrate LiquidGlass into varied layouts without fighting the enforced center anchoring.

[cpojer]

Try @nkzw/liquid-glass instead.