diff --git a/public/assets/videos/borderglow.mp4 b/public/assets/videos/borderglow.mp4 new file mode 100644 index 0000000..7daff17 Binary files /dev/null and b/public/assets/videos/borderglow.mp4 differ diff --git a/public/assets/videos/borderglow.webm b/public/assets/videos/borderglow.webm new file mode 100644 index 0000000..017a38f Binary files /dev/null and b/public/assets/videos/borderglow.webm differ diff --git a/public/assets/videos/evileye.mp4 b/public/assets/videos/evileye.mp4 new file mode 100644 index 0000000..1a92c31 Binary files /dev/null and b/public/assets/videos/evileye.mp4 differ diff --git a/public/assets/videos/evileye.webm b/public/assets/videos/evileye.webm new file mode 100644 index 0000000..a08ffaf Binary files /dev/null and b/public/assets/videos/evileye.webm differ diff --git a/public/assets/videos/linewaves.mp4 b/public/assets/videos/linewaves.mp4 new file mode 100644 index 0000000..66def3d Binary files /dev/null and b/public/assets/videos/linewaves.mp4 differ diff --git a/public/assets/videos/linewaves.webm b/public/assets/videos/linewaves.webm new file mode 100644 index 0000000..abd1185 Binary files /dev/null and b/public/assets/videos/linewaves.webm differ diff --git a/public/assets/videos/radar.mp4 b/public/assets/videos/radar.mp4 new file mode 100644 index 0000000..b227a3d Binary files /dev/null and b/public/assets/videos/radar.mp4 differ diff --git a/public/assets/videos/radar.webm b/public/assets/videos/radar.webm new file mode 100644 index 0000000..8ef6b96 Binary files /dev/null and b/public/assets/videos/radar.webm differ diff --git a/public/assets/videos/softaurora.webm b/public/assets/videos/softaurora.webm new file mode 100644 index 0000000..72f79bb Binary files /dev/null and b/public/assets/videos/softaurora.webm differ diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts index cfc028e..9bff7ec 100644 --- a/src/constants/Categories.ts +++ b/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' + ] + } ]; diff --git a/src/constants/Components.ts b/src/constants/Components.ts index dfaf9e9..997a952 100644 --- a/src/constants/Components.ts +++ b/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 = { diff --git a/src/constants/Information.ts b/src/constants/Information.ts index 2ddbff3..f9343ee 100644 --- a/src/constants/Information.ts +++ b/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: [] } };