Parallax Floating

1"use client"
2 
3import {
4  createContext,
5  ReactNode,
6  useCallback,
7  useContext,
8  useEffect,
9  useRef,
10} from "react"
11import { useAnimationFrame } from "motion/react"
12 
13import { cn } from "@/lib/utils"
14import { useMousePositionRef } from "@/hooks/use-mouse-position-ref"
15 
16interface FloatingContextType {
17  registerElement: (id: string, element: HTMLDivElement, depth: number) => void
18  unregisterElement: (id: string) => void
19}
20 
21const FloatingContext = createContext<FloatingContextType | null>(null)
22 
23interface FloatingProps {
24  children: ReactNode
25  className?: string
26  sensitivity?: number
27  easingFactor?: number
28}
29 
30const Floating = ({
31  children,
32  className,
33  sensitivity = 1,
34  easingFactor = 0.05,
35  ...props
36}: FloatingProps) => {
37  const containerRef = useRef<HTMLDivElement>(null)
38  const elementsMap = useRef(
39    new Map<
40      string,
41      {
42        element: HTMLDivElement
43        depth: number
44        currentPosition: { x: number; y: number }
45      }
46    >()
47  )
48  const mousePositionRef = useMousePositionRef(containerRef)
49 
50  const registerElement = useCallback(
51    (id: string, element: HTMLDivElement, depth: number) => {
52      elementsMap.current.set(id, {
53        element,
54        depth,
55        currentPosition: { x: 0, y: 0 },
56      })
57    },
58    []
59  )
60 
61  const unregisterElement = useCallback((id: string) => {
62    elementsMap.current.delete(id)
63  }, [])
64 
65  useAnimationFrame(() => {
66    if (!containerRef.current) return
67 
68    elementsMap.current.forEach((data) => {
69      const strength = (data.depth * sensitivity) / 20
70 
71      // Calculate new target position
72      const newTargetX = mousePositionRef.current.x * strength
73      const newTargetY = mousePositionRef.current.y * strength
74 
75      // Check if we need to update
76      const dx = newTargetX - data.currentPosition.x
77      const dy = newTargetY - data.currentPosition.y
78 
79      // Update position only if we're still moving
80      data.currentPosition.x += dx * easingFactor
81      data.currentPosition.y += dy * easingFactor
82 
83      data.element.style.transform = `translate3d(${data.currentPosition.x}px, ${data.currentPosition.y}px, 0)`
84    })
85  })
86 
87  return (
88    <FloatingContext.Provider value={{ registerElement, unregisterElement }}>
89      <div
90        ref={containerRef}
91        className={cn("absolute top-0 left-0 w-full h-full", className)}
92        {...props}
93      >
94        {children}
95      </div>
96    </FloatingContext.Provider>
97  )
98}
99 
100export default Floating
101 
102interface FloatingElementProps {
103// … truncated