atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

jsrepo v3

Browse Source
This commit is contained in:
David Haz
2025-12-15 23:50:24 +02:00
parent 9214481555
commit e621971723
119 changed files with 401 additions and 2197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/r/StarBorder.json Normal file
View File

@@ -0,0 +1 @@
{"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"]}