Circling Elements Easing Demo

1import React from "react"
2import Image from "next/image"
3import { exampleImages } from "@/utils/demo-images"
4 
5import useScreenSize from "@/hooks/use-screen-size"
6import CirclingElements from "@/components/fancy/blocks/circling-elements"
7 
8const CirclingElementsDemo: React.FC = () => {
9  const screenSize = useScreenSize()
10 
11  return (
12    <div className="relative w-dvw h-dvh bg-[#efefef] flex items-center justify-center">
13      <CirclingElements
14        radius={screenSize.lessThan(`md`) ? 100 : 180}
15        duration={8}
16        direction="reverse"
17        easing="0.944, 0.008, 0.147, 1.002"
18      >
19        {[...exampleImages, ...exampleImages].map((image, index) => (
20          <div
21            key={index}
22            className="w-20 h-20 md:w-28 md:h-28 absolute -translate-x-1/2 -translate-y-1/2 cursor-pointer hover:scale-125 duration-200 ease-out"
23          >
24            <Image
25              src={image.url}
26              fill
27              alt="image"
28              className="object-cover shadow-2xl "
29            />
30          </div>
31        ))}
32      </CirclingElements>
33    </div>
34  )
35}
36 
37export default CirclingElementsDemo