Cursor Attractor And Gravity Image Demo

1import useScreenSize from "@/hooks/use-screen-size"
2import Gravity, {
3  MatterBody,
4} from "@/components/fancy/physics/cursor-attractor-and-gravity"
5 
6export default function Preview() {
7  const screenSize = useScreenSize()
8 
9  const getImageCount = () => {
10    if (screenSize.lessThan("sm")) return 50
11    if (screenSize.lessThan("md")) return 60
12    if (screenSize.lessThan("lg")) return 70
13    return 80
14  }
15 
16  const getMaxSize = () => {
17    if (screenSize.lessThan("sm")) return 40
18    if (screenSize.lessThan("md")) return 50
19    return 60
20  }
21 
22  const getMinSize = () => {
23    if (screenSize.lessThan("sm")) return 10
24    if (screenSize.lessThan("md")) return 20
25    return 20
26  }
27 
28  return (
29    <div className="w-dvw h-dvh flex flex-col relative justify-center items-center md:items-end bg-white">
30      <div>
31        <p className="z-20 text-2xl sm:text-3xl md:text-3xl text-foreground dark:text-muted md:pr-24">
32          join the <span className="font-calendas  italic">community</span>
33        </p>
34      </div>
35      <Gravity
36        attractorPoint={{ x: "33%", y: "50%" }}
37        attractorStrength={0.0005}
38        cursorStrength={-0.004}
39        cursorFieldRadius={screenSize.lessThan("sm") ? 100 : 200}
40        className="w-full h-full"
41      >
42        {[...Array(getImageCount())].map((_, i) => {
43          const size = Math.max(getMinSize(), Math.random() * getMaxSize())
44          return (
45            <MatterBody
46              key={i}
47              matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
48              x={`${Math.random() * 100}%`}
49              y={`${Math.random() * 30}%`}
50            >
51              <img
52                src={`https://randomuser.me/api/portraits/${i % 2 === 0 ? "men" : "women"}/${i}.jpg`}
53                alt={`Avatar ${i}`}
54                className="rounded-full object-cover hover:cursor-pointer"
55                style={{
56                  width: `${size}px`,
57                  height: `${size}px`,
58                }}
59              />
60            </MatterBody>
61          )
62        })}
63      </Gravity>
64    </div>
65  )
66}