Parallax Floating Demo

1"use client"
2 
3import { useEffect } from "react"
4import { exampleImages } from "@/utils/demo-images"
5import { motion, stagger, useAnimate } from "motion/react"
6 
7import Floating, {
8  FloatingElement,
9} from "@/components/fancy/image/parallax-floating"
10 
11const Preview = () => {
12  const [scope, animate] = useAnimate()
13 
14  useEffect(() => {
15    animate("img", { opacity: [0, 1] }, { duration: 0.5, delay: stagger(0.15) })
16  }, [])
17 
18  return (
19    <div
20      className="flex w-dvw h-dvh justify-center items-center bg-black overflow-hidden"
21      ref={scope}
22    >
23      <motion.div
24        className="z-50 text-center space-y-4 items-center flex flex-col"
25        initial={{ opacity: 0, y: 10 }}
26        animate={{ opacity: 1, y: 0 }}
27        transition={{ duration: 0.88, delay: 1.5 }}
28      >
29        <p className="text-5xl md:text-7xl z-50 text-white font-calendas italic">
30          fancy.
31        </p>
32        <p className="text-xs z-50 hover:scale-110 transition-transform bg-white text-black rounded-full py-2 w-20 cursor-pointer">
33          Download
34        </p>
35      </motion.div>
36 
37      <Floating sensitivity={-1} className="overflow-hidden">
38        <FloatingElement depth={0.5} className="top-[8%] left-[11%]">
39          <motion.img
40            initial={{ opacity: 0 }}
41            src={exampleImages[0].url}
42            className="w-16 h-16 md:w-24 md:h-24 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform"
43          />
44        </FloatingElement>
45        <FloatingElement depth={1} className="top-[10%] left-[32%]">
46          <motion.img
47            initial={{ opacity: 0 }}
48            src={exampleImages[1].url}
49            className="w-20 h-20 md:w-28 md:h-28 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform"
50          />
51        </FloatingElement>
52        <FloatingElement depth={2} className="top-[2%] left-[53%]">
53          <motion.img
54            initial={{ opacity: 0 }}
55            src={exampleImages[2].url}
56            className="w-28 h-40 md:w-40 md:h-52 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform"
57          />
58        </FloatingElement>
59        <FloatingElement depth={1} className="top-[0%] left-[83%]">
60          <motion.img
61            initial={{ opacity: 0 }}
62            src={exampleImages[3].url}
63            className="w-24 h-24 md:w-32 md:h-32 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform"
64          />
65        </FloatingElement>
66 
67// … truncated