FLUXLAY

useMousePosition

Subscribes to global mouse position events streamed from the Fluxlay desktop app.

Import

import { useMousePosition } from "@fluxlay/react";

Signature

function useMousePosition(): { x: number; y: number };

Return Value

Returns mouse position normalized to the wallpaper window. Both axes range from -1 to 1:

PropertyRangeDescription
x-1 … 1-1 = left edge of window, 1 = right edge.
y-1 … 1-1 = bottom edge of window, 1 = top edge (mathematical Y axis).

Returns { x: 0, y: 0 } until the first event is received.

Convert to pixels

Multiply by the viewport size, remembering Y is inverted relative to CSS:

const px = ((x + 1) / 2) * window.innerWidth;
const py = (1 - (y + 1) / 2) * window.innerHeight;

Notes

  • Y is flipped to a mathematical coordinate system (positive = up). This is the opposite of CSS, which has positive = down. Convert before using as top / translateY.
  • The window label is read from the window_label query parameter, defaulting to "main".
  • The subscription is window-scoped: each wallpaper window receives its own normalized coordinates relative to itself.
  • Outside the Fluxlay desktop app, the hook returns { x: 0, y: 0 }.