Merge pull request #107 from Utkarsh-Singhal-26/feat/floating-lines

FEAT: 🎉 Added <FloatingLines /> 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'];
+export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -114,6 +114,7 @@ export const CATEGORIES = [
       'Dither',
       'Dot Grid',
       'Faulty Terminal',
+      'Floating Lines',
       'Galaxy',
       'Gradient Blinds',
       'Grid Distortion',

src/constants/Components.ts

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

src/constants/Information.ts

@@ -765,6 +765,14 @@ export const componentMetadata: ComponentMetadata = {
     docsUrl: 'https://vue-bits.dev/backgrounds/faulty-terminal',
     tags: []
   },
+  'Backgrounds/FloatingLines': {
+    videoUrl: '/assets/video/floatinglines.webm',
+    description: '3D floating lines that react to cursor movement.',
+    category: 'Backgrounds',
+    name: 'FloatingLines',
+    docsUrl: 'https://vue-bits.dev/backgrounds/floating-lines',
+    tags: []
+  },
   'Backgrounds/Galaxy': {
     videoUrl: '/assets/videos/galaxy.webm',
     description: 'Parallax realistic starfield with pointer interactions.',

src/constants/code/Backgrounds/floatingLinesCode.ts

@@ -0,0 +1,25 @@
+import code from '@content/Backgrounds/FloatingLines/FloatingLines.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const floatingLines = createCodeObject(code, 'Backgrounds/FloatingLines', {
+  installation: `npm install three`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative;">
+    <FloatingLines 
+      :enabled-waves="['top', 'middle', 'bottom']"
+      // Array - specify line count per wave; Number - same count for all waves
+      :line-count="[10, 15, 20]"
+      // Array - specify line distance per wave; Number - same distance for all waves
+      :line-distance="[8, 6, 4]"
+      :bend-radius="5.0"
+      :bend-strength="-0.5"
+      :interactive="true"
+      :parallax="true"
+    />
+  </div>
+</template>
+
+<script setup>
+import FloatingLines from './FloatingLines.vue'
+</script>`
+});