Logo Orbit

1import {
2  Bell,
3  Camera,
4  Cloud,
5  Code2,
6  Folder,
7  Heart,
8  Layers3,
9  Search,
10  Sparkles,
11  Star,
12} from "lucide-react";
13
14import { LogoOrbit, type OrbitRing } from "@/registry/ui/logo-orbit";
15
16const rings: OrbitRing[] = [
17  {
18    id: "inner",
19    diameter: 20,
20    duration: 16,
21    direction: "clockwise",
22    items: [
23      {
24        id: "search",
25        label: "Search",
26        content: <Search />,
27      },
28      {
29        id: "heart",
30        label: "Favourites",
31        content: <Heart />,
32      },
33      {
34        id: "star",
35        label: "Featured",
36        content: <Star />,
37      },
38      {
39        id: "notifications",
40        label: "Notifications",
41        content: <Bell />,
42      },
43    ],
44  },
45  {
46    id: "middle",
47    diameter: 40,
48    duration: 28,
49    direction: "counter-clockwise",
50    offset: 20,
51    opacity: 0.8,
52    items: [
53      {
54        id: "react",
55        content: "React",
56        variant: "label",
57      },
58      {
59        id: "typescript",
60        content: "TypeScript",
61        variant: "label",
62      },
63      {
64        id: "camera",
65        label: "Media",
66        content: <Camera />,
67      },
68      {
69        id: "cloud",
70        label: "Cloud",
71        content: <Cloud />,
72      },
73      {
74        id: "code",
75        label: "Development",
76        content: <Code2 />,
77      },
78      {
79        id: "folder",
80        label: "Projects",
81        content: <Folder />,
82      },
83    ],
84  },
85  {
86    id: "outer",
87    diameter: 60,
88    duration: 44,
89    direction: "clockwise",
90    offset: 10,
91    opacity: 0.45,
92    items: [
93      {
94        id: "next",
95        content: "Next.js",
96        variant: "label",
97      },
98      {
99        id: "supabase",
100        content: "Supabase",
101        variant: "label",
102      },
103      {
104        id: "stripe",
105        content: "Stripe",
106        variant: "label",
107      },
108      {
109        id: "vercel",
110        content: "Vercel",
111        variant: "label",
112      },
113      {
114        id: "node",
115        content: "Node.js",
116        variant: "label",
117      },
118      {
119        id: "tailwind",
120        content: "Tailwind",
121        variant: "label",
122      },
123      {
124        id: "postgres",
125        content: "Postgres",
126        variant: "label",
127      },
128      {
129        id: "motion",
130        content: "Motion",
131        variant: "label",
132      },
133    ],
134  },
135];
136
137export function LogoOrbitDemo() {
138  return (
139    <LogoOrbit
140      orbitScale={1}
141      proximitySlowFactor={2.5}
142      rings={rings}
143      center={
144        <div className="grid size-10 place-items-center rounded-xl bg-linear-to-br from-white to-violet-500 text-sm font-black text-neutral-950">
145          TT
146        </div>
147      }
148    />
149  );
150}