Float

1"use client"
2 
3import React, { useRef } from "react"
4import { motion, useAnimationFrame, useMotionValue } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8type FloatProps = {
9  children: React.ReactNode
10  speed?: number
11  amplitude?: [number, number, number] // [x, y, z]
12  rotationRange?: [number, number, number] // [x, y, z]
13  timeOffset?: number
14  className?: string
15}
16 
17const Float: React.FC<FloatProps> = ({
18  children,
19  speed = 0.5,
20  amplitude = [10, 30, 30], // Default [x, y, z] amplitudes
21  rotationRange = [15, 15, 7.5], // Default [x, y, z] rotation ranges
22  timeOffset = 0,
23  className,
24}) => {
25  const x = useMotionValue(0)
26  const y = useMotionValue(0)
27  const z = useMotionValue(0)
28  const rotateX = useMotionValue(0)
29  const rotateY = useMotionValue(0)
30  const rotateZ = useMotionValue(0)
31 
32  // Use refs for animation values to avoid recreating the animation frame callback
33  const time = useRef(0)
34 
35  useAnimationFrame(() => {
36    time.current += speed * 0.02
37 
38    // Smooth floating motion on all axes
39    const newX = Math.sin(time.current * 0.7 + timeOffset) * amplitude[0]
40    const newY = Math.sin(time.current * 0.6 + timeOffset) * amplitude[1]
41    const newZ = Math.sin(time.current * 0.5 + timeOffset) * amplitude[2]
42 
43    // 3D rotations with different frequencies for more organic movement
44    const newRotateX =
45      Math.sin(time.current * 0.5 + timeOffset) * rotationRange[0]
46    const newRotateY =
47      Math.sin(time.current * 0.4 + timeOffset) * rotationRange[1]
48    const newRotateZ =
49      Math.sin(time.current * 0.3 + timeOffset) * rotationRange[2]
50 
51    x.set(newX)
52    y.set(newY)
53    z.set(newZ)
54    rotateX.set(newRotateX)
55    rotateY.set(newRotateY)
56    rotateZ.set(newRotateZ)
57  })
58 
59  return (
60    <motion.div
61      style={{
62        x,
63        y,
64        z,
65        rotateX,
66        rotateY,
67        rotateZ,
68        transformStyle: "preserve-3d",
69      }}
70      className={cn("will-change-transform", className)}
71    >
72      {children}
73    </motion.div>
74  )
75}
76 
77export default Float