[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" export default function Home() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const leftEyeRef = useRef(null) const rightEyeRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) useEffect(() => { if (!leftEyeRef.current || !rightEyeRef.current) return const updateEyePosition = (eyeRef: HTMLDivElement) => { const rect = eyeRef.getBoundingClientRect() const eyeX = rect.left + rect.width / 2 const eyeY = rect.top + rect.height / 2 const angle = Math.atan2(mousePosition.y - eyeY, mousePosition.x - eyeX) const distance = Math.min( 4, Math.sqrt(Math.pow(mousePosition.x - eyeX, 2) + Math.pow(mousePosition.y - eyeY, 2)) / 25, ) const pupilX = Math.cos(angle) * distance const pupilY = Math.sin(angle) * distance const pupil = eyeRef.querySelector(".pupil") as HTMLElement if (pupil) { pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)` } } updateEyePosition(leftEyeRef.current) updateEyePosition(rightEyeRef.current) }, [mousePosition]) return (

Move your cursor to see the pixel cat's eyes follow!

) }

About

Tags

Share

About

Tags

Share

More from rajoninternet

More Templates Like This