feat: orientation sensor

src/components/blocks/Title.tsx

@@ -3,27 +3,62 @@
 import * as React from 'react'
 
 export const Title = ({ fullname }: { fullname: string }) => {
+	const titleRef = React.useRef<HTMLHeadingElement>(null)
+
+	const [titleStyle, setTitleStyle] = React.useState<React.CSSProperties>({
+		backgroundPosition: '50%'
+	})
+
+	const handleMouseMove = (event: PointerEvent | MouseEvent) => {
+		const offsetX: number = event.offsetX
+		const offsetY: number = event.offsetY
+
+		setTitleStyle(prevStyle => ({
+			...prevStyle,
+			backgroundPosition: `calc(${offsetX}px - 15.75rem) calc(${offsetY}px - 15.75rem)`
+		}))
+	}
+
 	React.useEffect(() => {
-		const handleMouseMove = (event: PointerEvent | MouseEvent) => {
-			const element: HTMLHeadingElement =
-				event.currentTarget! as HTMLHeadingElement
-			const offsetX: number = event.offsetX
-			const offsetY: number = event.offsetY
+		const sensor = new AbsoluteOrientationSensor({
+			frequency: 60,
+			referenceFrame: 'device'
+		})
+
+		const handleOrientationChange = () => {
+			const [x, y] = sensor.quaternion
 
-			element.style.backgroundPosition = `calc(${offsetX}px - 15.75rem) calc(${offsetY}px - 15.75rem)`
+			const offsetX = x * 10
+			const offsetY = y * 10
+
+			setTitleStyle(prevStyle => ({
+				...prevStyle,
+				backgroundPosition: `calc(50% + ${offsetX}px) calc(50% + ${offsetY}px)`
+			}))
 		}
 
-		const title: HTMLHeadingElement | null = document.querySelector('.title')
+		const title = titleRef.current
+
+		if (!title) return
+
+		title.addEventListener('click', handleMouseMove)
+		title.addEventListener('pointermove', handleMouseMove)
+
+		sensor.addEventListener('reading', handleOrientationChange)
+		sensor.start()
+
+		return () => {
+			title.removeEventListener('click', handleMouseMove)
+			title.removeEventListener('pointermove', handleMouseMove)
 
-		if (title) {
-			title.addEventListener('click', handleMouseMove)
-			title.addEventListener('pointermove', handleMouseMove)
-			return () => {
-				title.removeEventListener('click', handleMouseMove)
-				title.removeEventListener('pointermove', handleMouseMove)
-			}
+			sensor.removeEventListener('reading', handleOrientationChange)
+			sensor.stop()
 		}
 	}, [])
 
-	return <h1 className='title tracking-tight'>{fullname}</h1>
+	return (
+		<h1 ref={titleRef} style={titleStyle} className='title tracking-tight'>
+			{fullname}
+		</h1>
+	)
 }

tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"compilerOptions": {
-		"target": "es2017",
+		"target": "ESNext",
 		"lib": ["dom", "dom.iterable", "esnext"],
 		"allowJs": true,
 		"checkJs": true,