Add Star Border Animation component and demo with adjustable params

Signed-off-by: sayedTahsin <mail.tahsin99@gmail.com>

src/constants/Categories.ts

@@ -50,7 +50,8 @@ export const CATEGORIES = [
       'Meta Balls',
       'Image Trail',
       'Shape Blur',
-      'Crosshair'
+      'Crosshair',
+      'Star Border',
     ]
   },
   {

src/constants/Components.ts

@@ -12,6 +12,7 @@ const animations = {
   'count-up': () => import('../demo/Animations/CountUpDemo.vue'),
   'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
   'noise': () => import('../demo/Animations/NoiseDemo.vue'),
+  'star-border': () => import('../demo/Animations/StarBorderDemo.vue'),
   'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
   'meta-balls': () => import('../demo/Animations/MetaBallsDemo.vue'),
   'image-trail': () => import('../demo/Animations/ImageTrailDemo.vue'),

src/constants/code/Animations/starBorderCode.ts

@@ -0,0 +1,21 @@
+import code from '@content/Animations/StarBorder/StarBorder.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const starBorder: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/StarBorder`,
+  usage: `<template>
+    <StarBorder 
+        as="button" 
+        :color="color" 
+        :speed="speedProp" 
+        :thickness="thickness"
+    >
+        Star Border
+    </StarBorder>
+</template>
+
+<script setup lang="ts">
+  import StarBorder from './StarBorder.vue'
+</script>`,
+  code
+};