Skip to content

Commit ac8b691

Browse files
committed
fix(landing): remove cursor lerp causing laggy tracking in collaboration section
1 parent 786c6f0 commit ac8b691

1 file changed

Lines changed: 6 additions & 29 deletions

File tree

apps/sim/app/(landing)/components/collaboration/collaboration.tsx

Lines changed: 6 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { useCallback, useEffect, useRef, useState } from 'react'
3+
import { useCallback, useId, useRef, useState } from 'react'
44
import dynamic from 'next/dynamic'
55
import Image from 'next/image'
66
import 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-
186184
export 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

Comments
 (0)