Gravity Body Types Demo

1import {
2  Atom,
3  AudioLines,
4  BatteryCharging,
5  Brain,
6  Cloud,
7  Cog,
8  Cpu,
9  Cuboid,
10  Earth,
11  Eye,
12  Globe,
13  HandMetal,
14  Heart,
15  Laptop,
16  Layers,
17  MessageCircle,
18  Microscope,
19  Move,
20  PaintRoller,
21  PersonStanding,
22  Pyramid,
23  Regex,
24  Rocket,
25  Satellite,
26  Save,
27  ScanFace,
28  Settings,
29  Sigma,
30  Sparkles,
31  Star,
32  Sun,
33  TrendingUp,
34  Zap,
35} from "lucide-react"
36 
37import Gravity, { MatterBody } from "@/components/fancy/physics/gravity"
38 
39export default function Preview() {
40  const icons = [
41    { icon: Atom, size: 24 },
42    { icon: Brain, size: 24 },
43    { icon: Cog, size: 24 },
44    { icon: Cpu, size: 24 },
45    { icon: TrendingUp, size: 24 },
46    { icon: Globe, size: 24 },
47    { icon: Laptop, size: 24 },
48    { icon: Microscope, size: 24 },
49    { icon: Pyramid, size: 24 },
50    { icon: Rocket, size: 24 },
51    { icon: PaintRoller, size: 24 },
52    { icon: Eye, size: 24 },
53    { icon: ScanFace, size: 24 },
54    { icon: PersonStanding, size: 24 },
55    { icon: Sun, size: 24 },
56    { icon: Sparkles, size: 24 },
57    { icon: Regex, size: 24 },
58    { icon: Cloud, size: 24 },
59    { icon: Settings, size: 24 },
60    { icon: MessageCircle, size: 24 },
61    { icon: Cuboid, size: 24 },
62    { icon: Atom, size: 24 },
63    { icon: Brain, size: 24 },
64    { icon: AudioLines, size: 24 },
65    { icon: BatteryCharging, size: 24 },
66    { icon: Satellite, size: 24 },
67    { icon: Move, size: 24 },
68    { icon: Star, size: 24 },
69    { icon: HandMetal, size: 24 },
70    { icon: Heart, size: 24 },
71    { icon: Save, size: 24 },
72    { icon: Layers, size: 24 },
73    { icon: Earth, size: 24 },
74    { icon: Zap, size: 24 },
75    { icon: Sigma, size: 24 },
76  ]
77 
78  return (
79    <div className="w-dvw h-dvh flex flex-col items-center relative bg-white">
80      <h2 className=" text-black pt-24 text-xl ponter-events-none">
81        icons from lucide.dev
82      </h2>
83      <Gravity gravity={{ x: 0, y: 1 }} className="w-full h-full">
84        {icons.map((IconData, index) => {
85          const Icon = IconData.icon
86          const randomX = Math.random() * 60 + 20 // Random x between 20-80%
87          const randomY = Math.random() * 20 + 5 // Random y between 5-25%
88          const bodyType = Math.random() > 0.7 ? "rectangle" : "circle"
89 
90          return (
91            <MatterBody
92              key={index}
93              matterBodyOptions={{ friction: 0.5, restitution: 0.2 }}
94              bodyType={bodyType}
95              x={`${randomX}%`}
96              y={`${randomY}%`}
97            >
98// … truncated