diff --git a/lib/utils/index.ts b/lib/utils/index.ts
index 572b70e..086950e 100644
--- a/lib/utils/index.ts
+++ b/lib/utils/index.ts
@@ -85,3 +85,15 @@ export const generateToc = (source: string) => {
 
   return toc;
 };
+
+export const getMousePosition = (e: MouseEvent | globalThis.TouchEvent) => {
+  return e instanceof MouseEvent
+    ? {
+        x: e.clientX,
+        y: e.clientY,
+      }
+    : {
+        x: e.touches[0].clientX,
+        y: e.touches[0].clientY,
+      };
+};
diff --git a/pages/about.tsx b/pages/about.tsx
index a5501af..920bb55 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -1,9 +1,10 @@
-import classNames from 'classnames';
-import dynamic from 'next/dynamic';
-import { InitFn, useThree, THREE } from 'rua-three';
-import { NextPageWithLayout } from 'types';
 import TWEEN from '@tweenjs/tween.js';
+import classNames from 'classnames';
+import { getMousePosition } from 'lib/utils';
+import dynamic from 'next/dynamic';
+import { InitFn, THREE, useThree } from 'rua-three';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { NextPageWithLayout } from 'types';
 
 const glftLoader = new GLTFLoader();
 const rotationY = 0.4;
@@ -71,7 +72,7 @@ const About: NextPageWithLayout = () => {
             cameraY: entryValue.cameraY + 0.5,
             z: entryValue.z - 16,
           },
-          1000
+          1200
         )
         .onUpdate((obj) => {
           // root.rotation.y = obj.rotationY;
@@ -93,23 +94,11 @@ const About: NextPageWithLayout = () => {
       const halfHeight = Math.floor(window.innerHeight / 2);
 
       const updateMousePosition = (e: MouseEvent | globalThis.TouchEvent) => {
-        let x;
-        let y;
-        if (e instanceof MouseEvent) {
-          x = e.clientX;
-          y = e.clientY;
-        } else {
-          x = e.touches[0].clientX;
-          y = e.touches[0].clientY;
-        }
-
+        const { x, y } = getMousePosition(e);
         // > 0 is right, < 0 is left
-        const directionX = x - halfWidth;
-        const directionY = y - halfHeight;
-
         // if (directionX > 0) root.rotation.y += 0.01;
-        root.rotation.y = rotationY * (directionX / halfWidth);
-        root.rotation.x = rotationX * (directionY / halfHeight);
+        root.rotation.y = rotationY * (x - halfWidth / halfWidth);
+        root.rotation.x = rotationX * (y - halfHeight / halfHeight);
       };
 
       addWindowEvent('mousemove', updateMousePosition, {
diff --git a/pages/index.tsx b/pages/index.tsx
index 7c2761f..c535e4e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,5 @@
 import cn from 'classnames';
+import { getMousePosition } from 'lib/utils';
 import dynamic from 'next/dynamic';
 import Image from 'next/future/image';
 import Head from 'next/head';
@@ -107,23 +108,11 @@ const Home: NextPageWithLayout = () => {
       const halfHeight = Math.floor(window.innerHeight / 2);
 
       const updateMousePosition = (e: MouseEvent | globalThis.TouchEvent) => {
-        let x;
-        let y;
-        if (e instanceof MouseEvent) {
-          x = e.clientX;
-          y = e.clientY;
-        } else {
-          x = e.touches[0].clientX;
-          y = e.touches[0].clientY;
-        }
-
+        const { x, y } = getMousePosition(e);
         // > 0 is right, < 0 is left
-        const directionX = x - halfWidth;
-        const directionY = y - halfHeight;
-
         // if (directionX > 0) root.rotation.y += 0.01;
-        root.rotation.y = rotationY * (directionX / halfWidth);
-        root.rotation.x = rotationX * (directionY / halfHeight);
+        root.rotation.y = rotationY * (x - halfWidth / halfWidth);
+        root.rotation.x = rotationX * (y - halfHeight / halfHeight);
       };
 
       addWindowEvent('mousemove', updateMousePosition, {