xertica-ui 1.0.0

package/components/XerticaOrbe.tsx

@@ -0,0 +1,1339 @@
+import React, { useEffect, useRef } from 'react';
+import { cn } from './ui/utils';
+
+interface XerticaOrbeProps {
+  size?: number;
+  className?: string;
+}
+
+export function XerticaOrbe({ size = 64, className = '' }: XerticaOrbeProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const animationRef = useRef<any>(null);
+
+  // Handle hover state for animation speed
+  const handleMouseEnter = () => {
+    if (animationRef.current) {
+      // Accelerate animation smoothly
+      animationRef.current.setSpeed(2.5);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (animationRef.current) {
+      // Return to normal speed
+      animationRef.current.setSpeed(1);
+    }
+  };
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Dynamically load lottie library
+    const script = document.createElement('script');
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js';
+    script.async = true;
+
+    script.onload = () => {
+      if (containerRef.current && (window as any).lottie) {
+        const animationData = {
+          nm: "Xertica Light Spin",
+          ddd: 0,
+          h: 400,
+          w: 400,
+          meta: { g: "LottieFiles Figma v81" },
+          layers: [
+            {
+              ty: 0,
+              nm: "Spin3",
+              sr: 1,
+              st: 0,
+              op: 529.24,
+              ip: 0,
+              hd: false,
+              ddd: 0,
+              bm: 0,
+              hasMask: true,
+              ao: 0,
+              ks: {
+                a: { a: 0, k: [200, 200] },
+                s: { a: 0, k: [100, 100] },
+                sk: { a: 0, k: 0 },
+                p: { a: 0, k: [200, 200] },
+                r: { a: 0, k: 0 },
+                sa: { a: 0, k: 0 },
+                o: { a: 0, k: 100 }
+              },
+              masksProperties: [
+                {
+                  nm: "",
+                  inv: false,
+                  mode: "a",
+                  x: { a: 0, k: 0 },
+                  o: { a: 0, k: 100 },
+                  pt: {
+                    a: 0,
+                    k: {
+                      c: true,
+                      i: [[0, -110.38], [0, 0], [110.38, 0], [0, 0], [0, 110.38], [0, 0], [-110.38, 0], [0, 0]],
+                      o: [[0, 0], [0, 110.38], [0, 0], [-110.38, 0], [0, 0], [0, -110.38], [0, 0], [110.38, 0]],
+                      v: [[400, 200], [400, 200], [200, 400], [200, 400], [0, 200], [0, 200], [200, 0], [200, 0]]
+                    }
+                  }
+                }
+              ],
+              w: 400,
+              h: 400,
+              refId: "1",
+              ind: 1
+            }
+          ],
+          v: "5.7.0",
+          fr: 60,
+          op: 528.24,
+          ip: 0,
+          assets: [
+            {
+              nm: "[Asset] Spin3",
+              id: "1",
+              layers: [
+                {
+                  ty: 4,
+                  nm: "Gloss",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: { a: 0, k: [89.8, 39.39] },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: { a: 0, k: [150.4, 85.05] },
+                    r: { a: 0, k: -15 },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 70 }
+                  },
+                  ef: [
+                    {
+                      ty: 29,
+                      nm: "",
+                      en: 1,
+                      ef: [
+                        { ty: 0, nm: "sigma", v: { a: 0, k: 75 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 1 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 0 } }
+                      ]
+                    }
+                  ],
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 0,
+                        k: {
+                          c: true,
+                          i: [[0, 0], [49.59, 0], [0, 21.75], [-49.59, 0], [0, -21.75]],
+                          o: [[0, 21.75], [-49.59, 0], [0, -21.75], [49.59, 0], [0, 0]],
+                          v: [[179.6, 39.39], [89.8, 78.77], [0, 39.39], [89.8, 0], [179.6, 39.39]]
+                        }
+                      }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [1, 1, 1] },
+                      r: 1,
+                      o: { a: 0, k: 100 }
+                    }
+                  ],
+                  ind: 1
+                },
+                {
+                  ty: 4,
+                  nm: "Effect",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: { a: 0, k: [178.22, 178.22] },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: { a: 0, k: [200, 200] },
+                    r: { a: 0, k: 0 },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 30 }
+                  },
+                  ef: [
+                    {
+                      ty: 29,
+                      nm: "",
+                      en: 1,
+                      ef: [
+                        { ty: 0, nm: "sigma", v: { a: 0, k: 72 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 1 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 0 } }
+                      ]
+                    }
+                  ],
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 0,
+                        k: {
+                          c: true,
+                          i: [[0, 0], [98.43, 0], [0, 98.43], [-98.43, 0], [0, -98.43]],
+                          o: [[0, 98.43], [-98.43, 0], [0, -98.43], [98.43, 0], [0, 0]],
+                          v: [[356.44, 178.22], [178.22, 356.44], [0, 178.22], [178.22, 0], [356.44, 178.22]]
+                        }
+                      }
+                    },
+                    {
+                      ty: "gf",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      e: { a: 0, k: [233.0399932861328, 77.59410095214844] },
+                      g: {
+                        p: 5,
+                        k: {
+                          a: 0,
+                          k: [
+                            0, 0.17258823529411763, 0.15298039215686274, 0.35690196078431374,
+                            0.25, 0.6510196078431372, 0.36474509803921573, 0.8588627450980392,
+                            0.5, 0.9882745098039215, 0.4863137254901961, 0.9176862745098039,
+                            0.75, 0.4470980392156863, 0.8039607843137254, 0.9921960784313725,
+                            1, 1, 0.9932941176470588, 0.9689803921568627,
+                            0, 0.6, 0.25, 1, 0.5, 1, 0.75, 1, 1, 1
+                          ]
+                        }
+                      },
+                      t: 1,
+                      a: { a: 0, k: 0 },
+                      h: { a: 0, k: 0 },
+                      s: { a: 0, k: [284.5249938964844, 430.0690002441406] },
+                      r: 1,
+                      o: { a: 0, k: 100 }
+                    }
+                  ],
+                  ind: 2
+                },
+                {
+                  ty: 0,
+                  nm: "Symbol",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: { a: 0, k: [270.18, 279.17] },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: { a: 0, k: [200.18, 200.17] },
+                    r: { a: 0, k: 0 },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 100 }
+                  },
+                  w: 540.3699951171875,
+                  h: 558.3469848632812,
+                  refId: "2",
+                  ind: 3
+                },
+                {
+                  ty: 4,
+                  nm: "Spin3 Bg",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: { a: 0, k: [200, 200] },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: { a: 0, k: [200, 200] },
+                    r: { a: 0, k: 0 },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 100 }
+                  },
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 0,
+                        k: {
+                          c: true,
+                          i: [[0, -110.38], [0, 0], [110.38, 0], [0, 0], [0, 110.38], [0, 0], [-110.38, 0], [0, 0]],
+                          o: [[0, 0], [0, 110.38], [0, 0], [-110.38, 0], [0, 0], [0, -110.38], [0, 0], [110.38, 0]],
+                          v: [[400, 200], [400, 200], [200, 400], [200, 400], [0, 200], [0, 200], [200, 0], [200, 0]]
+                        }
+                      }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [0.9365, 0.9365, 0.9365] },
+                      r: 1,
+                      o: { a: 0, k: 100 }
+                    }
+                  ],
+                  ind: 4
+                }
+              ]
+            },
+            {
+              nm: "[Asset] Symbol",
+              id: "2",
+              layers: [
+                {
+                  ty: 4,
+                  nm: "Vector",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [102.86, 106.81], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [102.86, 106.81], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [156.67, 162.69], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [102.86, 106.81], t: 396 },
+                        { s: [102.86, 106.81], t: 528 }
+                      ]
+                    },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [437.51, 292.88], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [298.99, 437.66], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [355.86, 209.24], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [106.81, 148.61], t: 396 },
+                        { s: [437.51, 292.88], t: 528 }
+                      ]
+                    },
+                    r: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [0], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [40.07], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [-120], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [-90], t: 396 },
+                        { s: [0], t: 528 }
+                      ]
+                    },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 100 }
+                  },
+                  ef: [
+                    {
+                      ty: 29,
+                      nm: "",
+                      en: 1,
+                      ef: [
+                        {
+                          ty: 0,
+                          nm: "sigma",
+                          v: {
+                            a: 1,
+                            k: [
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 0 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 132 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 264 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 396 },
+                              { s: [180], t: 528 }
+                            ]
+                          }
+                        },
+                        { ty: 0, nm: "", v: { a: 0, k: 1 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 0 } }
+                      ]
+                    }
+                  ],
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 1,
+                        k: [
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.54, 0], [0, 90.75], [83.31, 213.62], [205.72, 213.62], [61.54, 0]]
+                              }
+                            ],
+                            t: 0
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.54, 0], [0, 90.75], [83.31, 213.62], [205.72, 213.62], [61.54, 0]]
+                              }
+                            ],
+                            t: 132
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[93.74, 0], [0, 138.23], [126.89, 325.38], [313.34, 325.38], [93.74, 0]]
+                              }
+                            ],
+                            t: 264
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.54, 0], [0, 90.75], [83.31, 213.62], [205.72, 213.62], [61.54, 0]]
+                              }
+                            ],
+                            t: 396
+                          },
+                          {
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.54, 0], [0, 90.75], [83.31, 213.62], [205.72, 213.62], [61.54, 0]]
+                              }
+                            ],
+                            t: 528
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [1, 1, 1] },
+                      r: 1,
+                      o: { a: 0, k: 0 }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [0.651, 0.3647, 0.8589] },
+                      r: 1,
+                      o: { a: 0, k: 100 }
+                    }
+                  ],
+                  ind: 1
+                },
+                {
+                  ty: 4,
+                  nm: "Vector",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [102.86, 106.81], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [102.86, 106.81], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [119.8, 106.93], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [102.86, 106.81], t: 396 },
+                        { s: [102.86, 106.81], t: 528 }
+                      ]
+                    },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [360.28, 385.95], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [298.89, 148.47], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [97.91, 161.07], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [314.46, 176.99], t: 396 },
+                        { s: [360.28, 385.95], t: 528 }
+                      ]
+                    },
+                    r: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [0], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [90], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [236.43], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [304.16], t: 396 },
+                        { s: [359.99], t: 528 }
+                      ]
+                    },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 100 }
+                  },
+                  ef: [
+                    {
+                      ty: 29,
+                      nm: "",
+                      en: 1,
+                      ef: [
+                        {
+                          ty: 0,
+                          nm: "sigma",
+                          v: {
+                            a: 1,
+                            k: [
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 0 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 132 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 264 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 396 },
+                              { s: [180], t: 528 }
+                            ]
+                          }
+                        },
+                        { ty: 0, nm: "", v: { a: 0, k: 1 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 0 } }
+                      ]
+                    }
+                  ],
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 1,
+                        k: [
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.54, 0], [0, 90.75], [83.31, 213.62], [205.72, 213.62], [61.54, 0]]
+                              }
+                            ],
+                            t: 0
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.54, 0], [0, 90.75], [83.31, 213.62], [205.72, 213.62], [61.54, 0]]
+                              }
+                            ],
+                            t: 132
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[71.68, 0], [0, 90.85], [97.03, 213.86], [239.61, 213.86], [71.68, 0]]
+                              }
+                            ],
+                            t: 264
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.54, 0], [0, 90.75], [83.31, 213.62], [205.72, 213.62], [61.54, 0]]
+                              }
+                            ],
+                            t: 396
+                          },
+                          {
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.54, 0], [0, 90.75], [83.31, 213.62], [205.72, 213.62], [61.54, 0]]
+                              }
+                            ],
+                            t: 528
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [0.651, 0.3647, 0.8589] },
+                      r: 1,
+                      o: { a: 0, k: 100 }
+                    }
+                  ],
+                  ind: 2
+                },
+                {
+                  ty: 4,
+                  nm: "Vector",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [97.61, 99.15], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [125.74, 126.73], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [133.66, 136.63], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [135.37, 137.5], t: 396 },
+                        { s: [97.61, 99.15], t: 528 }
+                      ]
+                    },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [115.44, 324.82], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [152.61, 376.9], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [137.62, 289.25], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [291.87, 363.25], t: 396 },
+                        { s: [115.44, 324.82], t: 528 }
+                      ]
+                    },
+                    r: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [0], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [64.79], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [227.27], t: 396 },
+                        { s: [360], t: 528 }
+                      ]
+                    },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 100 }
+                  },
+                  ef: [
+                    {
+                      ty: 29,
+                      nm: "",
+                      en: 1,
+                      ef: [
+                        {
+                          ty: 0,
+                          nm: "sigma",
+                          v: {
+                            a: 1,
+                            k: [
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 0 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 132 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 264 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 396 },
+                              { s: [180], t: 528 }
+                            ]
+                          }
+                        },
+                        { ty: 0, nm: "", v: { a: 0, k: 1 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 0 } }
+                      ]
+                    }
+                  ],
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 1,
+                        k: [
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.26, 198.3], [195.23, 0.37], [72.83, 0], [0, 107.07], [61.26, 198.3]]
+                              }
+                            ],
+                            t: 0
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[78.85, 255.23], [251.47, 0.48], [93.75, 0], [0, 137.85], [78.85, 255.23]]
+                              }
+                            ],
+                            t: 132
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[83.59, 270.53], [266.66, 0.51], [99.4, 0], [0, 146.12], [83.59, 270.53]]
+                              }
+                            ],
+                            t: 264
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[84.75, 274.24], [270.75, 0.51], [100.75, 0], [0, 148.09], [84.75, 274.24]]
+                              }
+                            ],
+                            t: 396
+                          },
+                          {
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.26, 198.3], [195.23, 0.37], [72.83, 0], [0, 107.07], [61.26, 198.3]]
+                              }
+                            ],
+                            t: 528
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [0.9922, 0.6902, 0.9491] },
+                      r: 1,
+                      o: { a: 0, k: 100 }
+                    }
+                  ],
+                  ind: 3
+                },
+                {
+                  ty: 4,
+                  nm: "Vector",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [97.61, 99.15], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [135.07, 137.2], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [97.61, 99.15], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [151.05, 153.43], t: 396 },
+                        { s: [97.61, 99.15], t: 528 }
+                      ]
+                    },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [355.04, 172.35], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [406.08, 339.27], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [173.45, 419.56], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [428.69, 129.65], t: 396 },
+                        { s: [355.04, 172.35], t: 528 }
+                      ]
+                    },
+                    r: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [0], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [33.75], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [229.26], t: 396 },
+                        { s: [360], t: 528 }
+                      ]
+                    },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 100 }
+                  },
+                  ef: [
+                    {
+                      ty: 29,
+                      nm: "",
+                      en: 1,
+                      ef: [
+                        {
+                          ty: 0,
+                          nm: "sigma",
+                          v: {
+                            a: 1,
+                            k: [
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 0 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 132 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 264 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 396 },
+                              { s: [180], t: 528 }
+                            ]
+                          }
+                        },
+                        { ty: 0, nm: "", v: { a: 0, k: 1 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 0 } }
+                      ]
+                    }
+                  ],
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 1,
+                        k: [
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.26, 198.3], [195.23, 0.37], [72.83, 0], [0, 107.07], [61.26, 198.3]]
+                              }
+                            ],
+                            t: 0
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[84.75, 274.24], [270.15, 0.51], [100.75, 0], [0, 148.09], [84.75, 274.24]]
+                              }
+                            ],
+                            t: 132
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.26, 198.3], [195.23, 0.37], [72.83, 0], [0, 107.07], [61.26, 198.3]]
+                              }
+                            ],
+                            t: 264
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[94.72, 306.4], [302.11, 0.59], [112.65, 0], [0, 165.61], [94.72, 306.4]]
+                              }
+                            ],
+                            t: 396
+                          },
+                          {
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [[61.26, 198.3], [195.23, 0.37], [72.83, 0], [0, 107.07], [61.26, 198.3]]
+                              }
+                            ],
+                            t: 528
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [0.9922, 0.6902, 0.9491] },
+                      r: 1,
+                      o: { a: 0, k: 100 }
+                    }
+                  ],
+                  ind: 4
+                },
+                {
+                  ty: 4,
+                  nm: "Vector",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [158.05, 279.17], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [158.05, 279.17], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [158.05, 279.17], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [219.56, 388.31], t: 396 },
+                        { s: [158.05, 279.17], t: 528 }
+                      ]
+                    },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [158.05, 279.17], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [279.1, 176.02], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [291.23, 289.05], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [252.45, 349.85], t: 396 },
+                        { s: [158.05, 279.17], t: 528 }
+                      ]
+                    },
+                    r: {
+                      a: 1,
+                      k: [
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [0], t: 0 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [72.03], t: 132 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [167.41], t: 264 },
+                        { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [260.46], t: 396 },
+                        { s: [360], t: 528 }
+                      ]
+                    },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 100 }
+                  },
+                  ef: [
+                    {
+                      ty: 29,
+                      nm: "",
+                      en: 1,
+                      ef: [
+                        {
+                          ty: 0,
+                          nm: "sigma",
+                          v: {
+                            a: 1,
+                            k: [
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 0 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 132 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 264 },
+                              { o: { x: 0, y: 0 }, i: { x: 1, y: 1 }, s: [180], t: 396 },
+                              { s: [180], t: 528 }
+                            ]
+                          }
+                        },
+                        { ty: 0, nm: "", v: { a: 0, k: 1 } },
+                        { ty: 0, nm: "", v: { a: 0, k: 0 } }
+                      ]
+                    }
+                  ],
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 1,
+                        k: [
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [
+                                  [316.1, 271.67],
+                                  [177.78, 65.96],
+                                  [133.2, 0],
+                                  [10.8, 0],
+                                  [193.49, 271.67],
+                                  [0, 558.35],
+                                  [122.4, 558.35],
+                                  [167.82, 491.37],
+                                  [316.1, 271.67]
+                                ]
+                              }
+                            ],
+                            t: 0
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [
+                                  [316.1, 271.67],
+                                  [177.78, 65.96],
+                                  [133.2, 0],
+                                  [10.8, 0],
+                                  [193.49, 271.67],
+                                  [0, 558.35],
+                                  [122.4, 558.35],
+                                  [167.82, 491.37],
+                                  [316.1, 271.67]
+                                ]
+                              }
+                            ],
+                            t: 132
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [
+                                  [316.1, 271.67],
+                                  [177.78, 65.96],
+                                  [133.2, 0],
+                                  [10.8, 0],
+                                  [193.49, 271.67],
+                                  [0, 558.35],
+                                  [122.4, 558.35],
+                                  [167.82, 491.37],
+                                  [316.1, 271.67]
+                                ]
+                              }
+                            ],
+                            t: 264
+                          },
+                          {
+                            o: { x: 0, y: 0 },
+                            i: { x: 1, y: 1 },
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [
+                                  [439.11, 377.62],
+                                  [247.05, 91.7],
+                                  [185.16, 0],
+                                  [15, 0],
+                                  [268.86, 377.62],
+                                  [0, 776.63],
+                                  [170.16, 776.63],
+                                  [233.28, 683.02],
+                                  [439.11, 377.62]
+                                ]
+                              }
+                            ],
+                            t: 396
+                          },
+                          {
+                            s: [
+                              {
+                                c: true,
+                                i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                                v: [
+                                  [316.1, 271.67],
+                                  [177.78, 65.96],
+                                  [133.2, 0],
+                                  [10.8, 0],
+                                  [193.49, 271.67],
+                                  [0, 558.35],
+                                  [122.4, 558.35],
+                                  [167.82, 491.37],
+                                  [316.1, 271.67]
+                                ]
+                              }
+                            ],
+                            t: 528
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [1, 1, 1] },
+                      r: 1,
+                      o: { a: 0, k: 0 }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [0.9922, 0.6902, 0.9491] },
+                      r: 1,
+                      o: { a: 0, k: 100 }
+                    }
+                  ],
+                  ind: 5
+                },
+                {
+                  ty: 4,
+                  nm: "Symbol Bg",
+                  sr: 1,
+                  st: 0,
+                  op: 529.24,
+                  ip: 0,
+                  hd: false,
+                  ddd: 0,
+                  bm: 0,
+                  hasMask: false,
+                  ao: 0,
+                  ks: {
+                    a: { a: 0, k: [270.18, 279.17] },
+                    s: { a: 0, k: [100, 100] },
+                    sk: { a: 0, k: 0 },
+                    p: { a: 0, k: [270.18, 279.17] },
+                    r: { a: 0, k: 0 },
+                    sa: { a: 0, k: 0 },
+                    o: { a: 0, k: 100 }
+                  },
+                  shapes: [
+                    {
+                      ty: "sh",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      d: 1,
+                      ks: {
+                        a: 0,
+                        k: {
+                          c: true,
+                          i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                          o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                          v: [
+                            [540.37, 279.17],
+                            [405.84, 558.35],
+                            [134.53, 558.35],
+                            [0, 279.17],
+                            [134.53, 0],
+                            [405.84, 0],
+                            [540.37, 279.17],
+                            [405.84, 558.35],
+                            [134.53, 558.35]
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      ty: "fl",
+                      bm: 0,
+                      hd: false,
+                      nm: "",
+                      c: { a: 0, k: [1, 1, 1] },
+                      r: 1,
+                      o: { a: 0, k: 0 }
+                    }
+                  ],
+                  ind: 6
+                }
+              ]
+            }
+          ]
+        };
+
+        animationRef.current = (window as any).lottie.loadAnimation({
+          container: containerRef.current,
+          renderer: 'svg',
+          loop: true,
+          autoplay: true,
+          animationData: animationData
+        });
+      }
+    };
+
+    document.head.appendChild(script);
+
+    return () => {
+      if (document.head.contains(script)) {
+        document.head.removeChild(script);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={cn("relative flex items-center justify-center cursor-pointer", className)}
+      style={{
+        width: size,
+        height: size,
+      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      aria-label="Xertica Orbe"
+    >
+      {/* Lottie Animation Container */}
+      <div
+        ref={containerRef}
+        className="absolute inset-0 rounded-full overflow-hidden"
+        style={{
+          width: size,
+          height: size,
+        }}
+      />
+      
+      {/* Spherical Gradient Overlay - Globe Effect */}
+      <div
+        className="absolute inset-0 rounded-full pointer-events-none mix-blend-overlay"
+        style={{
+          width: size,
+          height: size,
+          background: `
+            radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.4) 0%,
+              rgba(255, 255, 255, 0.2) 20%,
+              rgba(255, 255, 255, 0.05) 40%,
+              transparent 60%
+            ),
+            radial-gradient(
+              circle at 70% 70%,
+              rgba(0, 0, 0, 0.15) 0%,
+              rgba(0, 0, 0, 0.08) 30%,
+              transparent 60%
+            )
+          `,
+        }}
+      />
+      
+      {/* Subtle Rim Light */}
+      <div
+        className="absolute inset-0 rounded-full pointer-events-none"
+        style={{
+          width: size,
+          height: size,
+          boxShadow: `
+            inset -2px -2px ${Math.max(4, size * 0.08)}px rgba(255, 255, 255, 0.15),
+            inset 2px 2px ${Math.max(6, size * 0.1)}px rgba(0, 0, 0, 0.1)
+          `
+        }}
+      />
+    </div>
+  );
+}