Add DarkVeil component

src/constants/Categories.ts

@@ -85,6 +85,7 @@ export const CATEGORIES = [
     subcategories: [
       'Aurora',
       'Beams',
+      'Dark Veil',
       'Dither',
       'Dot Grid',
       'Hyperspeed',

src/constants/Components.ts

@@ -80,6 +80,7 @@ const backgrounds = {
   'threads': () => import('../demo/Backgrounds/ThreadsDemo.vue'),
   'aurora': () => import('../demo/Backgrounds/AuroraDemo.vue'),
   'beams': () => import('../demo/Backgrounds/BeamsDemo.vue'),
+  'dark-veil': () => import('../demo/Backgrounds/DarkVeilDemo.vue'),
   'dither': () => import('../demo/Backgrounds/DitherDemo.vue'),
   'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
   'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),

src/constants/code/Backgrounds/darkVeilCode.ts

@@ -0,0 +1,25 @@
+import code from '@content/Backgrounds/DarkVeil/DarkVeil.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const darkVeil: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/DarkVeil`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative">
+    <DarkVeil
+      :hue-shift="0"
+      :noise-intensity="0"
+      :scanline-intensity="0"
+      :speed="0.5"
+      :scanline-frequency="0"
+      :warp-amount="0"
+      :resolution-scale="1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import DarkVeil from "./DarkVeil.vue";
+</script>`,
+  code
+};