Migrate <ShapeBlur />

src/constants/Categories.ts

@@ -72,6 +72,7 @@ export const CATEGORIES = [
       'Lightning',
       'Letter Glitch',
       'Particles',
+      'Shape Blur',
       'Waves',
       'Squares',
       'Iridescence',

src/constants/Components.ts

@@ -62,7 +62,8 @@ const backgrounds = {
   'aurora': () => import('../demo/Backgrounds/AuroraDemo.vue'),
   'beams': () => import('../demo/Backgrounds/BeamsDemo.vue'),
   'grid-motion': () => import('../demo/Backgrounds/GridMotionDemo.vue'),
-  'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue')
+  'hyperspeed': () => import('../demo/Backgrounds/HyperspeedDemo.vue'),
+  'shape-blur': () => import('../demo/Backgrounds/ShapeBlurDemo.vue')
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/shapeBlurCode.ts

@@ -0,0 +1,24 @@
+import code from '@content/Backgrounds/ShapeBlur/ShapeBlur.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const shapeBlur: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/ShapeBlur`,
+  installation: `npm install three`,
+  usage: `<template>
+  <ShapeBlur
+    :variation="0"
+    :pixel-ratio-prop="2"
+    :shape-size="1.2"
+    :roundness="0.4"
+    :border-size="0.05"
+    :circle-size="0.3"
+    :circle-edge="0.5"
+    class="shape-blur-effect"
+  />
+</template>
+
+<script setup lang="ts">
+  import ShapeBlur from "./ShapeBlur.vue";
+</script>`,
+  code
+};