diff --git a/README.md b/README.md
index 59d07e97..26248374 100644
--- a/README.md
+++ b/README.md
@@ -8,5 +8,6 @@
    -  流体的なエフェクト
 -  GUI
    -  gui で nois テクスチャー変えられるようにする
--  resize,ロード
+-  ~~resize~~
+-  ロード制御
 -  デュオトーン
diff --git a/app/DistortionCarousel/Distortion.tsx b/app/DistortionCarousel/Distortion.tsx
index 39c2a5b6..a89616ed 100644
--- a/app/DistortionCarousel/Distortion.tsx
+++ b/app/DistortionCarousel/Distortion.tsx
@@ -1,5 +1,6 @@
 import * as THREE from "three";
 import { Canvas, useFrame, ThreeElements, useLoader } from "@react-three/fiber";
+import { useWindowResizeObserver } from "@funtech-inc/spice";
 import vertexShader from "./shader/main.vert";
 import fragmentSahder from "./shader/main.frag";
 import { memo, useEffect, useMemo, useRef } from "react";
@@ -7,8 +8,8 @@ import { GUIController } from "./gui";
 
 //背景テクスチャーのアスペクト比
 const TEXTURE_RATIO = {
-   x: 492,
-   y: 390,
+   x: 512,
+   y: 512,
 };
 
 //GUIで操作するために関数外に出してる
@@ -43,6 +44,20 @@ export const Distortion = () => {
       }
    });
 
+   //window resize
+   useWindowResizeObserver({
+      callback: ({ winW, winH }) => {
+         if (ref.current?.uniforms) {
+            ref.current.uniforms.u_resolution.value = new THREE.Vector2(
+               winW,
+               winH
+            );
+         }
+      },
+      debounce: 50,
+      dependencies: [],
+   });
+
    return (
       <mesh>
          <planeGeometry args={[2, 2]} />
diff --git a/package-lock.json b/package-lock.json
index bbc0e393..357f9438 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
          "name": "distortion-carousel",
          "version": "0.1.0",
          "dependencies": {
+            "@funtech-inc/spice": "^1.1.17",
             "@react-three/fiber": "^8.13.7",
             "@types/node": "20.5.6",
             "@types/react": "18.2.21",
@@ -111,6 +112,15 @@
             "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
          }
       },
+      "node_modules/@funtech-inc/spice": {
+         "version": "1.1.17",
+         "resolved": "https://registry.npmjs.org/@funtech-inc/spice/-/spice-1.1.17.tgz",
+         "integrity": "sha512-pdWq6dnYSJjSGA6V6UaZrECPI714/5YYzoDF7ap6DxzWL/lyTdkQmrsDnj6rbCBP/g1onYva47KO9ZmL7mGqVg==",
+         "peerDependencies": {
+            "react": "^18.2.0",
+            "react-dom": "^18.2.0"
+         }
+      },
       "node_modules/@humanwhocodes/config-array": {
          "version": "0.11.10",
          "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
diff --git a/package.json b/package.json
index c2fdb066..b9eadb06 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
       "lint": "next lint"
    },
    "dependencies": {
+      "@funtech-inc/spice": "^1.1.17",
       "@react-three/fiber": "^8.13.7",
       "@types/node": "20.5.6",
       "@types/react": "18.2.21",