{"name":"StarBorder","title":"StarBorder","description":"Animated star / sparkle border orbiting content with twinkle pulses.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <component\n    :is=\"as\"\n    :class=\"['relative inline-block overflow-hidden !bg-transparent !border-none !rounded-[20px]', customClass]\"\n    v-bind=\"restAttrs\"\n    :style=\"componentStyle\"\n  >\n    <div\n      class=\"absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0\"\n      :style=\"{\n        background: `radial-gradient(circle, ${color}, transparent 10%)`,\n        animationDuration: speed\n      }\"\n    ></div>\n\n    <div\n      class=\"absolute w-[300%] h-[50%] opacity-70 top-[-10px] left-[-250%] rounded-full animate-star-movement-top z-0\"\n      :style=\"{\n        background: `radial-gradient(circle, ${color}, transparent 10%)`,\n        animationDuration: speed\n      }\"\n    ></div>\n\n    <div\n      class=\"relative z-10 border border-[#333] bg-[#0b0b0b] text-white text-[16px] text-center px-[64px] py-[24px] rounded-[20px]\"\n    >\n      <slot />\n    </div>\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineProps, useAttrs } from 'vue';\n\ninterface StarBorderProps {\n  as?: string;\n  customClass?: string;\n  color?: string;\n  speed?: string;\n  thickness?: number;\n}\n\nconst props = withDefaults(defineProps<StarBorderProps>(), {\n  as: 'button',\n  customClass: '',\n  color: 'white',\n  speed: '6s',\n  thickness: 1\n});\n\nconst restAttrs = useAttrs();\n\nconst componentStyle = computed(() => {\n  const base = {\n    padding: `${props.thickness}px 0`\n  };\n  const userStyle = (restAttrs.style as Record<string, string>) || {};\n  return { ...base, ...userStyle };\n});\n</script>\n\n<style scoped>\n@keyframes star-movement-bottom {\n  0% {\n    transform: translate(0%, 0%);\n    opacity: 1;\n  }\n\n  100% {\n    transform: translate(-100%, 0%);\n    opacity: 0;\n  }\n}\n\n@keyframes star-movement-top {\n  0% {\n    transform: translate(0%, 0%);\n    opacity: 1;\n  }\n\n  100% {\n    transform: translate(100%, 0%);\n    opacity: 0;\n  }\n}\n\n.animate-star-movement-bottom {\n  animation: star-movement-bottom linear infinite alternate;\n}\n\n.animate-star-movement-top {\n  animation: star-movement-top linear infinite alternate;\n}\n</style>\n","path":"StarBorder/StarBorder.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Animations"]}