Added <LiquidChrome /> background

src/constants/Categories.ts

@@ -90,7 +90,8 @@ export const CATEGORIES = [
       'Threads',
       'Grid Motion',
       'Orb',
-      'Ballpit'
+      'Ballpit',
+      'Liquid Chrome',
     ]
   }
 ];

src/constants/Components.ts

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

src/constants/code/Backgrounds/liquidChromeCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/LiquidChrome/LiquidChrome.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const liquidChrome: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/LiquidChrome`,
+  installation: `npm i ogl`,
+  usage: `<template>
+  <div class="relative w-full h-[600px]">
+    <LiquidChrome 
+      :baseColor="[0.1, 0.1, 0.1]"
+      :speed="1"
+      :amplitude="0.6"
+      :interactive="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import LiquidChrome from "./LiquidChrome.vue";
+</script>`,
+  code
+};