move parallax to own component

src/App.tsx

@@ -1,25 +1,22 @@
 import React from 'react'
+
 import AnimatedBackground from './Components/AnimatedBackground'
 import Cursor from './Components/Cursor'
+import Parallax from './Components/Parallax'
 import Letters from './Screens/Letters'
-import { useMousePosition } from './util'
 
 export const Duration = 4000
 
 const App: React.FC = () => {
 
-	const mouse = useMousePosition()
-
-	const convertToDeg = (current: number, factor: number) => `${(.5 - current) * factor}deg`
-
 	return <div id="App">
-		<section id={'letters-container'} style={{
-			transform: `rotateX(${convertToDeg(mouse.relative.y, 2)}) rotateY(${convertToDeg(mouse.relative.x, .5)})`,
-		}}>
-			<h1>
-				<Letters/>
-			</h1>
-		</section>
+		<Parallax>
+			<section id={'letters-container'}>
+				<h1>
+					<Letters/>
+				</h1>
+			</section>
+		</Parallax>
 
 		<div id={'bg'}>
 			<AnimatedBackground/>
@@ -28,7 +25,7 @@ const App: React.FC = () => {
 		<Cursor/>
 
 		<footer>
-			<span>dev.</span>
+			<span>developer.</span>
 			<br/>
 			<span>say <a href={'mailto:hi@nicco.io'}>hi@nicco.io</a></span>
 		</footer>

src/Components/Parallax.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useMousePosition, useOrientation } from '../util'
+
+type RenderProps = {
+	x: string,
+	y: string
+}
+
+const Render: React.FC<RenderProps> = React.memo(({ children, x, y }) => <div style={{
+	transform: `rotateX(${y}) rotateY(${x})`,
+	transition: `transform .1s`,
+}}>
+	{children}
+</div>)
+
+const Parallax: React.FC = ({ children }) => {
+
+	const orientation = useOrientation(true)
+	const mouse = useMousePosition()
+	const convertToDeg = (current: number, factor: number) => `${((.5 - current) * factor).toFixed(2)}deg`
+
+	const orientationFactor = 3
+	const x = orientation ? Math.min(orientation.x / orientationFactor, 1) : mouse.relative.x
+	const y = orientation ? Math.min(orientation.y / orientationFactor, 1) : mouse.relative.y
+
+	return <Render y={convertToDeg(y, 2)} x={convertToDeg(x, .75)}>
+		{children}
+	</Render>
+}
+
+export default Parallax