FEAT: 🎉 New <LiquidEther /> component

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
+export const NEW = ['Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -111,6 +111,7 @@ export const CATEGORIES = [
       'Hyperspeed',
       'Faulty Terminal',
       'Plasma',
+      'Liquid Ether',
       'Ripple Grid',
       'Silk',
       'Lightning',

src/constants/Components.ts

@@ -114,6 +114,7 @@ const backgrounds = {
   'gradient-blinds': () => import('../demo/Backgrounds/GradientBlindsDemo.vue'),
   'prismatic-burst': () => import('../demo/Backgrounds/PrismaticBurstDemo.vue'),
   'pixel-blast': () => import('../demo/Backgrounds/PixelBlastDemo.vue'),
+  'liquid-ether': () => import('../demo/Backgrounds/LiquidEtherDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/liquidEtherCode.ts

@@ -0,0 +1,31 @@
+import code from '@content/Backgrounds/LiquidEther/LiquidEther.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const liquidEther = createCodeObject(code, 'Backgrounds/LiquidEther', {
+  installation: `npm install three`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative">
+    <LiquidEther
+      :colors="['#48FF28', '#A2FFC6', '#9EF19E']"
+      :mouseForce="20"
+      :cursorSize="100"
+      :isViscous="false"
+      :viscous="30"
+      :iterationsViscous="32"
+      :iterationsPoisson="32"
+      :resolution="0.5"
+      :isBounce="false"
+      :autoDemo="true"
+      :autoSpeed="0.5"
+      :autoIntensity="2.2"
+      :takeoverDuration="0.25"
+      :autoResumeDelay="3000"
+      :autoRampDuration="0.6"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LiquidEther from './LiquidEther.vue'
+</script>`
+});