Gravity Non Draggable Demo

1"use client"
2 
3import { motion } from "motion/react"
4 
5import Gravity, { MatterBody } from "@/components/fancy/physics/gravity"
6 
7const socialLinks = [
8  { name: "LinkedIn", x: "30%", y: "10%" },
9  { name: "X (Twitter)", x: "30%", y: "30%" },
10  { name: "Instagram", x: "40%", y: "20%", angle: 10 },
11  { name: "GitHub", x: "75%", y: "10%", angle: -4 },
12  { name: "BlueSky", x: "80%", y: "20%", angle: 5 },
13]
14 
15const stars = ["✱", "✽", "✦", "✸", "✹", "✺"]
16 
17export default function Preview() {
18  return (
19    <div className="w-dvw h-dvh flex flex-col relative bg-white font-calendas">
20      <p className="pt-4 text-6xl sm:text-7xl md:text-9xl text-[#0015ff] w-full text-center font-calendas">
21        CONTACT
22      </p>
23      <Gravity gravity={{ x: 0, y: 1 }} className="w-full h-full">
24        {socialLinks.map((link) => (
25          <MatterBody
26            key={link.name}
27            matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
28            x={link.x}
29            y={link.y}
30            angle={link.angle || 0}
31            isDraggable={false}
32          >
33            <motion.div
34              className="text-xl sm:text-2xl md:text-3xl bg-white text-[#0015ff] border border-[#0015ff] rounded-full hover:cursor-pointer hover:bg-[#0015ff] hover:text-white md:px-8 md:py-4 py-3 px-6"
35              whileTap={{ scale: 0.9 }}
36            >
37              {link.name}
38            </motion.div>
39          </MatterBody>
40        ))}
41 
42        {stars.map((star, i) => (
43          <MatterBody
44            key={i}
45            matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
46            x={`${Math.random() * 60 + 20}%`}
47            y={`${Math.random() * 20 + 40}%`}
48            angle={Math.random() * 360}
49          >
50            <div
51              className={`aspect-square w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-[#0015ff] text-white rounded-lg text-center`}
52            ></div>
53          </MatterBody>
54        ))}
55      </Gravity>
56    </div>
57  )
58}