Merge pull request #44 from SayedTahsin/feat/animations-star-border

Feat: StarBorder Animation

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,87 @@
+<template>
+    <component :is="as" :class="[
+        'relative inline-block overflow-hidden !bg-transparent !border-none !rounded-[20px]',
+        customClass
+    ]" v-bind="restAttrs" :style="componentStyle">
+        <div class="absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0"
+            :style="{
+                background: `radial-gradient(circle, ${color}, transparent 10%)`,
+                animationDuration: speed
+            }"></div>
+
+        <div class="absolute w-[300%] h-[50%] opacity-70 top-[-10px] left-[-250%] rounded-full animate-star-movement-top z-0"
+            :style="{
+                background: `radial-gradient(circle, ${color}, transparent 10%)`,
+                animationDuration: speed
+            }"></div>
+
+        <div
+            class="relative z-10 border border-[#222] bg-black text-white text-[16px] text-center px-[26px] py-[16px] rounded-[20px]">
+            <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>
+@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;
+    }
+}
+
+.animate-star-movement-bottom {
+    animation: star-movement-bottom linear infinite alternate;
+}
+
+.animate-star-movement-top {
+    animation: star-movement-top linear infinite alternate;
+}
+</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>