diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 40c84b0..a71d25e 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -85,6 +85,7 @@ export const CATEGORIES = [
subcategories: [
'Aurora',
'Beams',
+ 'Dark Veil',
'Dither',
'Dot Grid',
'Hyperspeed',
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 91bd119..83b7d15 100644
--- a/src/constants/Components.ts
+++ b/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'),
diff --git a/src/constants/code/Backgrounds/darkVeilCode.ts b/src/constants/code/Backgrounds/darkVeilCode.ts
new file mode 100644
index 0000000..b9c3933
--- /dev/null
+++ b/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: `
+
+
+
+
+
+`,
+ code
+};
diff --git a/src/content/Backgrounds/DarkVeil/DarkVeil.vue b/src/content/Backgrounds/DarkVeil/DarkVeil.vue
new file mode 100644
index 0000000..946d1ee
--- /dev/null
+++ b/src/content/Backgrounds/DarkVeil/DarkVeil.vue
@@ -0,0 +1,193 @@
+
+
+
+
+
diff --git a/src/demo/Backgrounds/DarkVeilDemo.vue b/src/demo/Backgrounds/DarkVeilDemo.vue
new file mode 100644
index 0000000..163a796
--- /dev/null
+++ b/src/demo/Backgrounds/DarkVeilDemo.vue
@@ -0,0 +1,144 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+