FEAT: 🎉 Added <LightPillar /> background

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines'];
+export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -123,6 +123,7 @@ export const CATEGORIES = [
       'Iridescence',
       'Letter Glitch',
       'Lightning',
+      'Light Pillar',
       'Light Rays',
       'Liquid Chrome',
       'Liquid Ether',

src/constants/Components.ts

@@ -121,6 +121,7 @@ const backgrounds = {
   'liquid-ether': () => import('../demo/Backgrounds/LiquidEtherDemo.vue'),
   'color-bends': () => import('../demo/Backgrounds/ColorBendsDemo.vue'),
   'floating-lines': () => import('../demo/Backgrounds/FloatingLinesDemo.vue'),
+  'light-pillar': () => import('../demo/Backgrounds/LightPillarDemo.vue'),
 };
 
 export const componentMap = {

src/constants/Information.ts

@@ -948,5 +948,13 @@ export const componentMetadata: ComponentMetadata = {
     name: 'LiquidEther',
     docsUrl: 'https://vue-bits.dev/backgrounds/liquid-ether',
     tags: []
+  },
+  'Backgrounds/LightPillar': {
+    videoUrl: '/assets/videos/lightpillar.webm',
+    description: 'Vertical pillar of light with glow effects.',
+    category: 'Backgrounds',
+    name: 'LightPillar',
+    docsUrl: 'https://vue-bits.dev/backgrounds/light-pillar',
+    tags: []
   }
 };

src/constants/code/Backgrounds/lightPillarCode.ts

@@ -0,0 +1,27 @@
+import code from '@content/Backgrounds/LightPillar/LightPillar.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const lightPillar = createCodeObject(code, 'Backgrounds/LightPillar', {
+  installation: `npm install three`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative;">
+    <LightPillar
+      topColor="#48FF28"
+      bottomColor="#9EF19E"
+      :intensity="1.0"
+      :rotationSpeed="0.3"
+      :glowAmount="0.005"
+      :pillarWidth="3.0"
+      :pillarHeight="0.4"
+      :noiseIntensity="0.5"
+      :pillarRotation="0"
+      :interactive="false"
+      mixBlendMode="normal"
+    />
+  </div>
+</template>
+
+<script setup>
+import LightPillar from './LightPillar.vue'
+</script>`
+});