Add Star Border Animation component and demo with adjustable params

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

src/demo/Animations/StarBorderDemo.vue

@@ -0,0 +1,83 @@
+<template>
+    <TabbedLayout>
+        <template #preview>
+            <div class="demo-container overflow-hidden h-[400px]">
+                <StarBorder as="button" :color="color" :speed="speedProp" :thickness="thickness">
+                    Star Border
+                </StarBorder>
+            </div>
+
+            <Customize>
+                <PreviewSelect title="Color" v-model="color" :options="colorOptions" />
+                <PreviewSlider title="Thickness" v-model="thickness" :min="0.5" :max="8" :step="0.5" value-unit="px" />
+                <PreviewSlider title="Speed" v-model="speed" :min="1" :max="10" :step="0.5" value-unit="s" />
+            </Customize>
+
+            <PropTable :data="propData" />
+        </template>
+
+        <template #code>
+            <CodeExample :code-object="starBorder" />
+        </template>
+
+        <template #cli>
+            <CliInstallation :command="starBorder.cli" />
+        </template>
+    </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSelect from '../../components/common/PreviewSelect.vue';
+import StarBorder from '../../content/Animations/StarBorder/StarBorder.vue';
+import { starBorder } from '@/constants/code/Animations/starBorderCode';
+
+const thickness = ref<number>(3)
+const speed = ref<number>(6)
+const speedProp = ref<string>('6s')
+const color = ref<string>('magenta')
+const colorOptions = [{ label: 'Magenta', value: "magenta" }, { label: 'Cyan', value: "cyan" }, { label: 'white', value: "white" }]
+
+watch(speed, () => {
+    speedProp.value = (speed.value).toString() + 's'
+})
+
+const propData = [
+    {
+        name: 'as',
+        type: 'string',
+        default: 'button',
+        description: 'Allows specifying the type of the parent component to be rendered.'
+    },
+    {
+        name: 'customClass',
+        type: 'string',
+        default: '',
+        description: 'Allows adding custom classes to the component.'
+    },
+    {
+        name: 'color',
+        type: 'string',
+        default: 'white',
+        description: 'Changes the main color of the border (fades to transparent)'
+    },
+    {
+        name: 'speed',
+        type: 'string',
+        default: '6s',
+        description: 'Changes the speed of the animation.'
+    },
+    {
+        name: 'thickness',
+        type: 'number',
+        default: '3',
+        description: 'Controls the thickness of the star border effect.'
+    }
+];
+</script>