FEAT: 🎉 Added <ColorBends /> background

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Ghost Cursor', 'Laser Flow', 'Dome Gallery', 'Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Pill Nav', 'Card Nav', 'Prismatic Burst'];
+export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Dome Gallery', 'Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Bubble Menu', 'Pill Nav', 'Card Nav'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -103,6 +103,7 @@ export const CATEGORIES = [
   {
     name: 'Backgrounds',
     subcategories: [
+      'Color Bends',
       'Prism',
       'Aurora',
       'Beams',

src/constants/Components.ts

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

src/constants/code/Backgrounds/colorBendsCode.ts

@@ -0,0 +1,24 @@
+import code from '@content/Backgrounds/ColorBends/ColorBends.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const colorBends = createCodeObject(code, 'Backgrounds/ColorBends', {
+  installation: `npm install three`,
+  usage: `<template>
+  <ColorBends
+    :colors="['#ff5c7a', '#8a5cff', '#00ffd1']"
+    :rotation="30"
+    :speed="0.3"
+    :scale="1.2"
+    :frequency="1.4"
+    :warpStrength="1.2"
+    :mouseInfluence="0.8"
+    :parallax="0.6"
+    :noise="0.08"
+    transparent
+  />
+</template>
+
+<script setup>
+import ColorBends from './ColorBends.vue'
+</script>`
+});