Added <Galaxy /> background

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -103,7 +103,8 @@ export const CATEGORIES = [
       'Orb',
       'Ballpit',
       'Liquid Chrome',
-      'Grid Distortion'
+      'Grid Distortion',
+      'Galaxy',
     ]
   }
 ];

src/constants/Components.ts

@@ -90,6 +90,7 @@ const backgrounds = {
   'liquid-chrome': () => import('../demo/Backgrounds/LiquidChromeDemo.vue'),
   'grid-distortion': () => import('../demo/Backgrounds/GridDistortionDemo.vue'),
   'ripple-grid': () => import('../demo/Backgrounds/RippleGridDemo.vue'),
+  'galaxy': () => import('../demo/Backgrounds/GalaxyDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/galaxyCode.ts

@@ -0,0 +1,28 @@
+import code from '@content/Backgrounds/Galaxy/Galaxy.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const galaxy = createCodeObject(code, 'Backgrounds/Galaxy', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  // Basic usage
+  <div class="relative w-full h-[600px]">
+    <Galaxy />
+  </div>
+  
+  // With custom prop values
+  <div class="relative w-full h-[600px]">
+    <Galaxy 
+      :mouse-repulsion="true"
+      :mouse-interaction="true"
+      :density="1.5"
+      :glow-intensity="0.5"
+      :saturation="0.8"
+      :hue-shift="240"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Galaxy from "./Galaxy.vue";
+</script>`
+});