I am trying to create a custom mouse cursor that follows my mouse movement at a delayed speed in nextjs 14.
It is being temperamental and is not working 100% of the time
I am having issues due to the use client and use server functionality
I created a client wrapper in order to try get around the _layout.tsx being a server component.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ClientApplication>
<Navbar />
<div className="customPointer" />
{children}
</ClientApplication>
</body>
</html>
)
}
'use client'
import { ElementRef, ReactNode } from 'react'
type Props = { children: ReactNode }
export default function ClientApplication({ children }: Props) {
let cursorSmall: ElementRef<'div'> | null
const positionElement = (e: MouseEvent) => {
const mouseY = e.clientY - 60
const mouseX = e.clientX - 10
if (cursorSmall) {
cursorSmall.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0) duration-500`
}
}
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
cursorSmall = document.querySelector('.customPointer')
window.addEventListener('mousemove', positionElement)
}
return children
}
It is either working perfectly or else the custom mouse is just on the page static or else not working at all