feat: InspiraUI

src/components/InspiraUI/border-beam/BorderBeam.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    :class="
+      cn(
+        'border-beam',
+        'pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]',
+        '![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]',
+        'after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]',
+        props.class,
+      )
+    "
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { cn } from "@/shadcn/lib/utils";
+import { computed } from "vue";
+
+interface BorderBeamProps {
+  class?: string;
+  size?: number;
+  duration?: number;
+  borderWidth?: number;
+  anchor?: number;
+  colorFrom?: string;
+  colorTo?: string;
+  delay?: number;
+}
+
+const props = withDefaults(defineProps<BorderBeamProps>(), {
+  size: 200,
+  duration: 15000,
+  anchor: 90,
+  borderWidth: 1.5,
+  colorFrom: "#ffaa40",
+  colorTo: "#9c40ff",
+  delay: 0,
+});
+
+const durationInSeconds = computed(() => `${props.duration}s`);
+const delayInSeconds = computed(() => `${props.delay}s`);
+</script>
+
+<style scoped>
+.border-beam {
+  --size: v-bind(size);
+  --duration: v-bind(durationInSeconds);
+  --anchor: v-bind(anchor);
+  --border-width: v-bind(borderWidth);
+  --color-from: v-bind(colorFrom);
+  --color-to: v-bind(colorTo);
+  --delay: v-bind(delayInSeconds);
+}
+
+.animate-border-beam::after {
+  content: "";
+  animation: border-beam-anim var(--duration) infinite linear;
+}
+
+@keyframes border-beam-anim {
+  to {
+    offset-distance: 100%;
+  }
+}
+</style>