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 @@ + + +