11'use client'
22
3- import { useCallback , useEffect , useRef , useState } from 'react'
3+ import { useCallback , useId , useRef , useState } from 'react'
44import dynamic from 'next/dynamic'
55import Image from 'next/image'
66import Link from 'next/link'
@@ -181,41 +181,17 @@ function YouCursor({ x, y, visible }: YouCursorProps) {
181181 * - Reference "Sim" by name per capability ("Sim's real-time collaboration").
182182 */
183183
184- const CURSOR_LERP_FACTOR = 0.3
185-
186184export default function Collaboration ( ) {
185+ const headingId = useId ( )
187186 const [ cursorPos , setCursorPos ] = useState ( { x : 0 , y : 0 } )
188187 const [ isHovering , setIsHovering ] = useState ( false )
189188 const sectionRef = useRef < HTMLElement > ( null )
190- const targetPos = useRef ( { x : 0 , y : 0 } )
191- const animationRef = useRef < number > ( 0 )
192-
193- useEffect ( ( ) => {
194- const animate = ( ) => {
195- setCursorPos ( ( prev ) => ( {
196- x : prev . x + ( targetPos . current . x - prev . x ) * CURSOR_LERP_FACTOR ,
197- y : prev . y + ( targetPos . current . y - prev . y ) * CURSOR_LERP_FACTOR ,
198- } ) )
199- animationRef . current = requestAnimationFrame ( animate )
200- }
201-
202- if ( isHovering ) {
203- animationRef . current = requestAnimationFrame ( animate )
204- }
205-
206- return ( ) => {
207- if ( animationRef . current ) {
208- cancelAnimationFrame ( animationRef . current )
209- }
210- }
211- } , [ isHovering ] )
212189
213190 const handleMouseMove = useCallback ( ( e : React . MouseEvent ) => {
214- targetPos . current = { x : e . clientX , y : e . clientY }
191+ setCursorPos ( { x : e . clientX , y : e . clientY } )
215192 } , [ ] )
216193
217194 const handleMouseEnter = useCallback ( ( e : React . MouseEvent ) => {
218- targetPos . current = { x : e . clientX , y : e . clientY }
219195 setCursorPos ( { x : e . clientX , y : e . clientY } )
220196 setIsHovering ( true )
221197 } , [ ] )
@@ -225,10 +201,11 @@ export default function Collaboration() {
225201 } , [ ] )
226202
227203 return (
204+ // biome-ignore lint/correctness/useUniqueElementIds: stable page anchor for #collaboration navigation
228205 < section
229206 ref = { sectionRef }
230207 id = 'collaboration'
231- aria-labelledby = 'collaboration-heading'
208+ aria-labelledby = { headingId }
232209 className = 'bg-[var(--landing-bg)]'
233210 style = { { cursor : isHovering ? 'none' : 'auto' } }
234211 onMouseMove = { handleMouseMove }
@@ -258,7 +235,7 @@ export default function Collaboration() {
258235 </ Badge >
259236
260237 < h2
261- id = 'collaboration-heading'
238+ id = { headingId }
262239 className = 'text-balance font-[430] font-season text-[32px] text-white leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
263240 >
264241 Realtime
0 commit comments