# 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:

```tsx
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:

```tsx
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](/en/studio/developer/reference/sdk/use-mouse-position.md) for full API details.