Cursor Attractor And Gravity Svg Demo

1import { useState } from "react"
2 
3import Gravity, {
4  MatterBody,
5} from "@/components/fancy/physics/cursor-attractor-and-gravity"
6 
7export default function Preview() {
8  const [debug, setDebug] = useState(false)
9 
10  return (
11    <div className="w-dvw h-dvh flex flex-col relative justify-center items-center bg-white">
12      <button
13        onClick={() => setDebug(!debug)}
14        className="absolute top-4 left-4 px-4 py-2 text-xs border border-border rounded-lg bg-background hover:bg-accent cursor-pointer z-10"
15      >
16        {debug ? "Disable Debug" : "Enable Debug"}
17      </button>
18      <p className="z-20 text-2xl sm:text-3xl md:text-3xl text-black">
19        fancy components
20      </p>
21      <Gravity
22        //attractorPoint={{ x: "33%", y: "50%" }}
23        attractorStrength={0.0}
24        cursorStrength={0.0005}
25        cursorFieldRadius={200}
26        className="w-full h-full"
27        debug={debug}
28      >
29        {["#0015FF", "#E794DA"].map((color, i) => (
30          <>
31            <MatterBody
32              key={`star1-${i}`}
33              matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
34              x={`${10 + Math.random() * 80}%`}
35              y={`${10 + Math.random() * 80}%`}
36              bodyType="svg"
37            >
38              <svg
39                width="111"
40                height="108"
41                viewBox="0 0 111 108"
42                fill="none"
43                xmlns="http://www.w3.org/2000/svg"
44              >
45                <path
46                  d="M19.9185 107.176L33.6145 66.472L0.5905 44.328H41.0385L55.5025 0.679993L70.2225 44.328L110.415 44.328L77.3905 66.472L91.3425 107.176L55.5025 81.192L19.9185 107.176Z"
47                  fill={color}
48                />
49              </svg>
50            </MatterBody>
51 
52            <MatterBody
53              key={`star2-${i}`}
54              matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
55              x={`${10 + Math.random() * 80}%`}
56              y={`${10 + Math.random() * 80}%`}
57              bodyType="svg"
58            >
59              <svg
60                width="152"
61                height="153"
62                viewBox="0 0 152 153"
63                fill="none"
64                xmlns="http://www.w3.org/2000/svg"
65              >
66                <path
67// … truncated