Create <GridScan /> 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', 'Floating Lines', 'Light Pillar', 'Pixel Snow'];
+export const NEW = ['Color Bends', 'Ghost Cursor', 'Grid Scan', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -119,6 +119,7 @@ export const CATEGORIES = [
       'Gradient Blinds',
       'Grid Distortion',
       'Grid Motion',
+      'Grid Scan',
       'Hyperspeed',
       'Iridescence',
       'Letter Glitch',

src/constants/Components.ts

@@ -123,6 +123,7 @@ const backgrounds = {
   'floating-lines': () => import('../demo/Backgrounds/FloatingLinesDemo.vue'),
   'light-pillar': () => import('../demo/Backgrounds/LightPillarDemo.vue'),
   'pixel-snow': () => import('../demo/Backgrounds/PixelSnowDemo.vue'),
+  'grid-scan': () => import('../demo/Backgrounds/GridScanDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/gridScanCode.ts

@@ -0,0 +1,28 @@
+import code from '@content/Backgrounds/GridScan/GridScan.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const gridScan = createCodeObject(code, 'Backgrounds/GridScan', {
+  installation: `npm install three postprocessing face-api.js`,
+  usage: `<template>
+  <div class="w-full h-[600px] relative">
+    <GridScan
+      :line-thickness="1"
+      :grid-scale="0.1"
+      :line-jitter="0.1"
+      lines-color="#392e4e"
+      scan-color="#FF9FFC"
+      :enable-post="true"
+      :chromatic-aberration="0.002"
+      :noise-intensity="0.01"
+      :scan-glow="0.5"
+      :scan-softness="2"
+      :enable-webcam="false"
+      :show-preview="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import GridScan from "./GridScan.vue";
+</script>`
+});