feat: added new components constants with video

src/constants/Categories.ts

@@ -1,10 +1,14 @@
 // Highlighted sidebar items
 export const NEW = [
-  'Color Bends',
+  'Evil Eye',
+  'Border Glow',
+  'Soft Aurora',
+  'Radar',
+  'Line Waves',
   'Antigravity',
   'Grainient',
   'Orbit Images',
-  'Magic Rings',
+  'Magic Rings'
 ];
 export const UPDATED = ['Metallic Paint'];
 
@@ -12,7 +16,7 @@ export const UPDATED = ['Metallic Paint'];
 export const CATEGORIES = [
   {
     name: 'Get Started',
-    subcategories: [ 'Index' ],
+    subcategories: ['Index']
   },
   {
     name: 'Text Animations',
@@ -40,8 +44,8 @@ export const CATEGORIES = [
       'Text Trail',
       'Text Type',
       'True Focus',
-      'Variable Proximity',
-    ],
+      'Variable Proximity'
+    ]
   },
   {
     name: 'Animations',
@@ -74,13 +78,14 @@ export const CATEGORIES = [
       'Star Border',
       'Sticker Peel',
       'Target Cursor',
-      'Orbit Images',
-    ],
+      'Orbit Images'
+    ]
   },
   {
     name: 'Components',
     subcategories: [
       'Animated List',
+      'Border Glow',
       'Bounce Cards',
       'Bubble Menu',
       'Card Nav',
@@ -112,8 +117,8 @@ export const CATEGORIES = [
       'Stack',
       'Staggered Menu',
       'Stepper',
-      'Tilted Card',
-    ],
+      'Tilted Card'
+    ]
   },
   {
     name: 'Backgrounds',
@@ -126,6 +131,7 @@ export const CATEGORIES = [
       'Dark Veil',
       'Dither',
       'Dot Grid',
+      'Evil Eye',
       'Faulty Terminal',
       'Floating Lines',
       'Galaxy',
@@ -140,6 +146,7 @@ export const CATEGORIES = [
       'Light Pillar',
       'Light Rays',
       'Lightning',
+      'Line Waves',
       'Liquid Chrome',
       'Liquid Ether',
       'Orb',
@@ -149,11 +156,13 @@ export const CATEGORIES = [
       'Plasma',
       'Prism',
       'Prismatic Burst',
+      'Radar',
       'Ripple Grid',
       'Silk',
+      'Soft Aurora',
       'Squares',
       'Threads',
-      'Waves',
-    ],
-  },
+      'Waves'
+    ]
+  }
 ];

src/constants/Components.ts

@@ -91,6 +91,7 @@ const components = {
   'bubble-menu': () => import('../demo/Components/BubbleMenuDemo.vue'),
   'staggered-menu': () => import('../demo/Components/StaggeredMenuDemo.vue'),
   'infinite-menu': () => import('../demo/Components/InfiniteMenuDemo.vue'),
+  'border-glow': () => import('../demo/Components/BorderGlowDemo.vue'),
 };
 
 const backgrounds = {
@@ -130,6 +131,10 @@ const backgrounds = {
   'pixel-snow': () => import('../demo/Backgrounds/PixelSnowDemo.vue'),
   'grid-scan': () => import('../demo/Backgrounds/GridScanDemo.vue'),
   'grainient': () => import('../demo/Backgrounds/GrainientDemo.vue'),
+  'line-waves': () => import('../demo/Backgrounds/LineWavesDemo.vue'),
+  'radar': () => import('../demo/Backgrounds/RadarDemo.vue'),
+  'soft-aurora': () => import('../demo/Backgrounds/SoftAuroraDemo.vue'),
+  'evil-eye': () => import('../demo/Backgrounds/EvilEyeDemo.vue'),
 };
 
 export const componentMap = {

src/constants/Information.ts

@@ -675,6 +675,14 @@ export const componentMetadata: ComponentMetadata = {
     docsUrl: 'https://vue-bits.dev/components/staggered-menu',
     tags: []
   },
+  'Components/BorderGlow': {
+    videoUrl: '/assets/videos/borderglow.webm',
+    description: 'Glowing mesh-gradient border that follows cursor direction and intensifies near edges.',
+    category: 'Components',
+    name: 'BorderGlow',
+    docsUrl: 'https://vue-bits.dev/components/border-glow',
+    tags: []
+  },
 
   //! Backgrounds -------------------------------------------------------------------------------------------------------------------------------
   'Backgrounds/Aurora': {
@@ -956,5 +964,37 @@ export const componentMetadata: ComponentMetadata = {
     name: 'PixelSnow',
     docsUrl: 'https://vue-bits.dev/backgrounds/pixel-snow',
     tags: []
+  },
+  'Backgrounds/LineWaves': {
+    videoUrl: '/assets/video/linewaves.webm',
+    description: 'Animated line wave pattern with colorful warped distortion.',
+    category: 'Backgrounds',
+    name: 'LineWaves',
+    docsUrl: 'https://reactbits.dev/backgrounds/line-waves',
+    tags: []
+  },
+  'Backgrounds/EvilEye': {
+    videoUrl: '/assets/video/evileye.webm',
+    description: 'Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow.',
+    category: 'Backgrounds',
+    name: 'EvilEye',
+    docsUrl: 'https://reactbits.dev/backgrounds/evil-eye',
+    tags: []
+  },
+  'Backgrounds/Radar': {
+    videoUrl: '/assets/video/radar.webm',
+    description: 'Radar sweep effect with concentric rings, radial spokes, and a rotating beam.',
+    category: 'Backgrounds',
+    name: 'Radar',
+    docsUrl: 'https://reactbits.dev/backgrounds/radar',
+    tags: []
+  },
+  'Backgrounds/SoftAurora': {
+    videoUrl: '/assets/video/softaurora.webm',
+    description: 'Soft aurora borealis shader with 3D Perlin noise and cosine gradient palettes.',
+    category: 'Backgrounds',
+    name: 'SoftAurora',
+    docsUrl: 'https://reactbits.dev/backgrounds/soft-aurora',
+    tags: []
   }
 };