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
+};

src/content/Animations/StarBorder/StarBorder.vue

@@ -0,0 +1,116 @@
+<template>
+    <component :is="as" class="star-border-container" :class="customClass" v-bind="restAttrs" :style="componentStyle">
+        <div class="border-gradient-bottom" :style="{
+            background: `radial-gradient(circle, ${color}, transparent 10%)`,
+            animationDuration: speed
+        }"></div>
+        <div class="border-gradient-top" :style="{
+            background: `radial-gradient(circle, ${color}, transparent 10%)`,
+            animationDuration: speed
+        }"></div>
+        <div class="inner-content">
+            <slot />
+        </div>
+    </component>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+
+interface StarBorderProps {
+    as?: string;
+    customClass?: string;
+    color?: string;
+    speed?: string;
+    thickness?: number;
+}
+
+const props = withDefaults(defineProps<StarBorderProps>(), {
+    as: 'button',
+    customClass: '',
+    color: 'white',
+    speed: '6s',
+    thickness: 1
+});
+
+const restAttrs = useAttrs();
+
+const componentStyle = computed(() => {
+    const base = {
+        padding: `${props.thickness}px 0`
+    };
+    const userStyle = (restAttrs.style as Record<string, string>) || {};
+    return { ...base, ...userStyle };
+});
+</script>
+
+<style scoped>
+.star-border-container {
+    all: unset;
+    display: inline-block;
+    position: relative;
+    border-radius: 20px;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.border-gradient-bottom {
+    position: absolute;
+    width: 300%;
+    height: 50%;
+    opacity: 0.7;
+    bottom: -12px;
+    right: -250%;
+    border-radius: 50%;
+    animation: star-movement-bottom linear infinite alternate;
+    z-index: 0;
+}
+
+.border-gradient-top {
+    position: absolute;
+    opacity: 0.7;
+    width: 300%;
+    height: 50%;
+    top: -12px;
+    left: -250%;
+    border-radius: 50%;
+    animation: star-movement-top linear infinite alternate;
+    z-index: 0;
+}
+
+.inner-content {
+    position: relative;
+    border: 1px solid #222;
+    background: #000;
+    color: white;
+    font-size: 16px;
+    text-align: center;
+    padding: 16px 26px;
+    border-radius: 20px;
+    z-index: 1;
+}
+
+@keyframes star-movement-bottom {
+    0% {
+        transform: translate(0%, 0%);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translate(-100%, 0%);
+        opacity: 0;
+    }
+}
+
+@keyframes star-movement-top {
+    0% {
+        transform: translate(0%, 0%);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translate(100%, 0%);
+        opacity: 0;
+    }
+}
+</style>

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>