Cursor Attractor And Gravity Demo

1import { motion } from "motion/react"
2 
3import useScreenSize from "@/hooks/use-screen-size"
4import Gravity, {
5  MatterBody,
6} from "@/components/fancy/physics/cursor-attractor-and-gravity"
7 
8export default function Preview() {
9  const screenSize = useScreenSize()
10  const words = [
11    "we",
12    "analyze",
13    { text: "millions", highlight: true },
14    { text: "of", highlight: true },
15    { text: "data", highlight: true },
16    { text: "points", highlight: true },
17    "per",
18    "second",
19    "to",
20    "provide",
21    "you",
22    "with",
23    "the",
24    "most",
25    "accurate",
26    "insights.",
27  ]
28 
29  return (
30    <div className="w-dvw h-dvh flex flex-col relative font-overused-grotesk justify-center items-center bg-white">
31      <Gravity
32        attractorStrength={0.0}
33        cursorStrength={0.0004}
34        cursorFieldRadius={200}
35        className="w-full h-full z-0 absolute"
36      >
37        {[...Array(150)].map((_, i) => {
38          // Adjust max size based on screen size
39          const maxSize = screenSize.lessThan("sm")
40            ? 20
41            : screenSize.lessThan("md")
42              ? 30
43              : 40
44          const size = Math.max(
45            screenSize.lessThan("sm") ? 10 : 20,
46            Math.random() * maxSize
47          )
48          return (
49            <MatterBody
50              key={i}
51              matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
52              x={`${Math.random() * 100}%`}
53              y={`${Math.random() * 100}%`}
54            >
55              <div
56                className="rounded-full bg-[#eee]"
57                style={{
58                  width: `${size}px`,
59                  height: `${size}px`,
60                }}
61              />
62            </MatterBody>
63          )
64        })}
65      </Gravity>
66      <span className="text z-10 sm:text-lg md:text-xl text-black px-4 py-2 w-2/3 flex flex-wrap whitespace-pre-wrap">
67        {words.map((word, index) => {
68          const text = typeof word === "string" ? word : word.text
69          const highlight = typeof word === "object" && word.highlight
70 
71          return (
72            <motion.span
73              key={index}
74              initial={{ opacity: 0 }}
75              animate={{ opacity: 1 }}
76              transition={{ duration: 0.5, delay: index * 0.05 }}
77              className={`${highlight ? "text-[#0015ff]" : ""} ${index < words.length - 1 ? "mr-1" : ""}`}
78            >
79              {text}
80            </motion.span>
81          )
82        })}
83      </span>
84    </div>
85// … truncated