Added <RippleGrid /> background

src/constants/Categories.ts

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

src/constants/Components.ts

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

src/constants/code/Backgrounds/rippleGridCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Backgrounds/RippleGrid/RippleGrid.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const rippleGrid: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/RippleGrid`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="relative overflow-hidden h-[600px]">
+    <RippleGrid
+      :enable-rainbow="false"
+      :grid-color="#ffffff"
+      :ripple-intensity="0.05"
+      :grid-size="10"
+      :grid-thickness="15"
+      :mouse-interaction="true"
+      :mouse-interaction-radius="1.2"
+      :opacity="0.8"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import RippleGrid from "./RippleGrid.vue";
+</script>`,
+  code
+};