Orbit

1import { Orbit } from "@/components/motion/orbit"2import {3  PiCameraBold,4  PiChatCircleBold,5  PiHeartBold,6  PiLightningBold,7  PiSparkleBold,8  PiStarBold,9} from "react-icons/pi"1011export function Example() {12  return (13    <Orbit14      className="size-72"15      duration={22}16      radiusX={42}17      radiusY={26}18      rotate={-32}19      showPath20      center={21        <span className="text-sm font-medium tracking-wide text-foreground">22          Orbit23        </span>24      }25    >26      <span className="flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm">27        <PiSparkleBold className="size-4" />28      </span>29      <span className="flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm">30        <PiHeartBold className="size-4" />31      </span>32      <span className="flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm">33        <PiStarBold className="size-4" />34      </span>35      <span className="flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm">36        <PiLightningBold className="size-4" />37      </span>38      <span className="flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm">39        <PiCameraBold className="size-4" />40      </span>41      <span className="flex size-10 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm">42        <PiChatCircleBold className="size-4" />43      </span>44    </Orbit>45  )46}

1import { Orbit } from "@/components/motion/orbit"23const IMAGES = [4  "/assets/brand/demos/attachments/attachment-1.png",5  "/assets/brand/demos/attachments/attachment-2.png",6  "/assets/brand/demos/attachments/attachment-3.png",7  "/assets/brand/demos/attachments/attachment-4.png",8  "/assets/brand/demos/attachments/attachment-5.png",9  "/assets/brand/demos/attachments/attachment-2.png"10]1112export function Example() {13  return (14    <Orbit15      className="size-80"16      duration={26}17      radiusX={42}18      radiusY={24}19      rotate={-32}20      showPath21      center={22        <span className="text-sm font-medium tracking-wide text-foreground">23          Gallery24        </span>25      }26    >27      {IMAGES.map((src, index) => (28        <img29          key={src + index}30          src={src}31          alt=""32          className="size-12 rounded-xl border border-border object-cover shadow-sm sm:size-16"33        />34      ))}35    </Orbit>36  )37}