Gravity Svg Bodies Demo

1"use client"
2 
3import { useState } from "react"
4 
5import Gravity, { MatterBody } from "@/components/fancy/physics/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  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      <Gravity gravity={{ x: 0, y: 1 }} className="w-full h-full" debug={debug}>
19        <MatterBody
20          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
21          x="30%"
22          y="10%"
23          bodyType="svg"
24        >
25          <svg
26            width="111"
27            height="108"
28            viewBox="0 0 111 108"
29            fill="none"
30            xmlns="http://www.w3.org/2000/svg"
31          >
32            <path
33              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"
34              fill="#1F464D"
35            />
36          </svg>
37        </MatterBody>
38        <MatterBody
39          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
40          x="80%"
41          y="30%"
42          bodyType="svg"
43        >
44          <svg
45            width="152"
46            height="153"
47            viewBox="0 0 152 153"
48            fill="none"
49            xmlns="http://www.w3.org/2000/svg"
50          >
51            <path
52              d="M45.3648 152.4L41.7648 150.8L52.5648 100L1.76484 110.8L0.164844 107.2L41.7648 76.4L0.164844 46L1.76484 42.4L52.5648 52.8L41.7648 2.39999L45.3648 0.799989L76.1648 42.4L106.565 0.799989L110.165 2.39999L99.7648 52.8L150.165 42.4L151.765 46L110.165 76.4L151.765 107.2L150.165 110.8L99.7648 100L110.165 150.8L106.565 152.4L76.1648 110.8L45.3648 152.4Z"
53              fill="#0015FF"
54            />
55          </svg>
56        </MatterBody>
57        <MatterBody
58          matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
59          x="40%"
60          y="20%"
61          angle={10}
62          bodyType="svg"
63        >
64          <svg
65            width="99"
66            height="99"
67            viewBox="0 0 99 99"
68            fill="none"
69            xmlns="http://www.w3.org/2000/svg"
70          >
71            <path
72// … truncated