Merge branch 'main' into feat/liquid-chrome

src/constants/Categories.ts

@@ -92,6 +92,7 @@ export const CATEGORIES = [
       'Orb',
       'Ballpit',
       'Liquid Chrome',
+      'Grid Distortion'
     ]
   }
 ];

src/constants/Components.ts

@@ -78,6 +78,7 @@ const backgrounds = {
   'orb': () => import('../demo/Backgrounds/OrbDemo.vue'),
   'ballpit': () => import('../demo/Backgrounds/BallpitDemo.vue'),
   'liquid-chrome': () => import('../demo/Backgrounds/LiquidChromeDemo.vue'),
+  'grid-distortion': () => import('../demo/Backgrounds/GridDistortionDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/gridDistortionCode.ts

@@ -0,0 +1,24 @@
+import code from '@content/Backgrounds/GridDistortion/GridDistortion.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const gridDistortion: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridDistortion`,
+  installation: `npm i three`,
+  usage: `<template>
+  <div class="relative w-full h-[600px]">
+    <GridDistortion
+      imageSrc="https://picsum.photos/1920/1080?grayscale"
+      :grid="10"
+      :mouse="0.1"
+      :strength="0.15
+      :relaxation="0.9"
+      className="custom-class"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import GridDistortion from "./GridDistortion.vue";
+</script>`,
+  code
+};