# インタラクティブな壁紙

このチュートリアルでは、`useMousePosition` フックを使ってマウスカーソルに反応する壁紙を作ります。

## 前提条件

先に[はじめよう](/ja/studio/developer/tutorials/getting-started.md)チュートリアルを完了してください。

## マウストラッキングの追加

`src/main.tsx` の内容を置き換えます。

```tsx title="src/main.tsx"
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
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 (
    <main
      style={{
        height: "100vh",
        width: "100vw",
        backgroundColor: "#0f0f23",
        overflow: "hidden",
        position: "relative"
      }}
    >
      <div
        style={{
          position: "absolute",
          left: px,
          top: py,
          width: 40,
          height: 40,
          borderRadius: "50%",
          backgroundColor: "#6366f1",
          transform: "translate(-50%, -50%)",
          transition: "left 0.1s ease-out, top 0.1s ease-out",
          boxShadow: "0 0 30px 10px rgba(99, 102, 241, 0.4)"
        }}
      />
    </main>
  );
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Wallpaper />
  </StrictMode>
);
```

開発サーバーを起動してマウスを動かすと、光る円がカーソルを追いかけます。

<PackageManagerCommand type="exec" command="fluxlay dev" />

## 座標系について

`useMousePosition()` は**壁紙ウィンドウに対して正規化された座標**を返します。`x` と `y` は両方とも `-1` 〜 `1` の範囲で、Y 軸は数学的（`+1` が上端、`-1` が下端）です。CSS は上が負なので逆向きになります。ピクセルとして扱う前に `((x + 1) / 2) * window.innerWidth` と `(1 - (y + 1) / 2) * window.innerHeight` で変換してください。

## アニメーションライブラリの活用

より滑らかなアニメーションには、`@react-spring/web` のようなライブラリを使えます。

<PackageManagerCommand type="add" packages="@react-spring/web" />

```tsx title="src/main.tsx"
import { useSpring, animated } from "@react-spring/web";
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;
  const spring = useSpring({ to: { x: px, y: py }, config: { tension: 120, friction: 14 } });

  return (
    <main style={{ height: "100vh", width: "100vw", backgroundColor: "#0f0f23" }}>
      <animated.div
        style={{
          position: "absolute",
          left: spring.x,
          top: spring.y,
          width: 40,
          height: 40,
          borderRadius: "50%",
          backgroundColor: "#6366f1",
          transform: "translate(-50%, -50%)"
        }}
      />
    </main>
  );
}
```

## 次のステップ

タスクごとの詳しいガイド:

- [マウス位置の取得](/ja/studio/developer/how-to/development/use-mouse-position.md) — `useMousePosition` の実用パターン集。
- [音声に反応する壁紙](/ja/studio/developer/how-to/development/use-audio.md) — マウスではなく音楽に反応させる。
- [カスタムプロパティ](/ja/studio/developer/how-to/development/use-properties.md) — ユーザーが色やサイズを変えられるようにする。

別のチュートリアル:

- [シェル壁紙](/ja/studio/developer/tutorials/shell-wallpaper.md) — 壁紙にシステム情報を表示する。

API リファレンス:

- [useMousePosition](/ja/studio/developer/reference/sdk/use-mouse-position.md)