Added <Orb /> background

src/constants/Categories.ts

@@ -88,7 +88,8 @@ export const CATEGORIES = [
       'Squares',
       'Iridescence',
       'Threads',
-      'Grid Motion'
+      'Grid Motion',
+      'Orb',
     ]
   }
 ];

src/constants/Components.ts

@@ -74,7 +74,8 @@ const backgrounds = {
   'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
   'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),
   'shape-blur': () => import('../demo/Backgrounds/ShapeBlurDemo.vue'),
-  'balatro': () => import('../demo/Backgrounds/BalatroDemo.vue')
+  'balatro': () => import('../demo/Backgrounds/BalatroDemo.vue'),
+  'orb': () => import('../demo/Backgrounds/OrbDemo.vue')
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/orbCode.ts

@@ -0,0 +1,17 @@
+import code from '@content/Backgrounds/Orb/Orb.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const orb: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Orb`,
+  installation: `npm i ogl`,
+  usage: `<template>
+  <div class="relative w-full h-[600px]">
+    <Orb :hoverIntensity="0.5" :rotateOnHover="true" :hue="0" :forceHoverState="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Orb from "./Orb.vue";
+</script>`,
+  code
+};