Gravity Demo

1import Gravity, { MatterBody } from "@/components/fancy/physics/gravity"
2 
3export default function Preview() {
4  return (
5    <div className="w-dvw h-dvh flex flex-col relative font-azeret-mono bg-white">
6      <div className="pt-20 text-6xl sm:text-7xl md:text-8xl text-foreground dark:text-muted w-full text-center font-calendas italic">
7        fancy
8      </div>
9      <p className="pt-4 text-base sm:text-xl md:text-2xl text-foreground dark:text-muted w-full text-center">
10        components made with:
11      </p>
12      <Gravity gravity={{ x: 0, y: 1 }} className="w-full h-full">
13        <MatterBody
14          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
15          x="30%"
16          y="10%"
17        >
18          <div className="text-xl sm:text-2xl md:text-3xl bg-[#0015ff] text-white rounded-full hover:cursor-pointer px-8 py-4">
19            react
20          </div>
21        </MatterBody>
22        <MatterBody
23          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
24          x="30%"
25          y="30%"
26        >
27          <div className="text-xl sm:text-2xl md:text-3xl bg-[#e794da] text-white rounded-full hover:cursor-grab px-8 py-4 ">
28            typescript
29          </div>
30        </MatterBody>
31        <MatterBody
32          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
33          x="40%"
34          y="20%"
35          angle={10}
36        >
37          <div className="text-xl sm:text-2xl md:text-3xl bg-[#1f464d] text-white rounded-full hover:cursor-grab px-8 py-4 ">
38            motion
39          </div>
40        </MatterBody>
41        <MatterBody
42          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
43          x="75%"
44          y="10%"
45        >
46          <div className="text-xl sm:text-2xl md:text-3xl bg-[#ff5941] text-white rounded-full hover:cursor-grab px-8 py-4 ">
47            tailwind
48          </div>
49        </MatterBody>
50        <MatterBody
51          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
52          x="80%"
53          y="20%"
54        >
55          <div className="text-xl sm:text-2xl md:text-3xl bg-[#f97316] text-white rounded-full hover:cursor-grab px-8 py-4 ">
56            drei
57          </div>
58        </MatterBody>
59        <MatterBody
60          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
61          x="50%"
62          y="10%"
63        >
64          <div className="text-xl sm:text-2xl md:text-3xl bg-[#ffd726] text-white rounded-full hover:cursor-grab px-8 py-4 ">
65            matter-js
66          </div>
67// … truncated