Track Mouse Position

Use useMousePosition() to receive normalized mouse coordinates streamed from the desktop app. Values are normalized to the wallpaper window: x and y both range from -1 to 1, with y using a math-style axis (+1 = top).

Basic Usage

Convert the normalized coordinates to pixels before using them in CSS:

import { useMousePosition } from "@fluxlay/react";
 
function Wallpaper() {
  const { x, y } = useMousePosition();
  const px = ((x + 1) / 2) * window.innerWidth;
  const py = (1 - (y + 1) / 2) * window.innerHeight;
 
  return (
    <div
      style={{
        position: "absolute",
        left: px,
        top: py,
        width: 20,
        height: 20,
        borderRadius: "50%",
        backgroundColor: "white",
        transform: "translate(-50%, -50%)"
      }}
    />
  );
}

With Animation

Spring physics smooth out the cursor following:

import { useSpring, animated } from "@react-spring/web";
import { useMousePosition } from "@fluxlay/react";
 
function Cursor() {
  const { x, y } = useMousePosition();
  const px = ((x + 1) / 2) * window.innerWidth;
  const py = (1 - (y + 1) / 2) * window.innerHeight;
  const spring = useSpring({ to: { x: px, y: py }, config: { tension: 200, friction: 20 } });
 
  return (
    <animated.div
      style={{
        position: "absolute",
        left: spring.x,
        top: spring.y,
        width: 20,
        height: 20,
        borderRadius: "50%",
        backgroundColor: "white",
        transform: "translate(-50%, -50%)"
      }}
    />
  );
}

Notes

Returns { x: 0, y: 0 } until the first mouse event arrives.
Coordinates are window-relative — multi-window setups receive separate streams keyed by window_label.
Works only inside the Fluxlay desktop app.

See the useMousePosition Reference for full API details.