{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "StarBorder-JS-TW",
	"title": "StarBorder",
	"description": "Animated star / sparkle border orbiting content with twinkle pulses.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "StarBorder/StarBorder.jsx",
			"content": "const StarBorder = ({\n  as: Component = 'button',\n  className = '',\n  color = 'white',\n  speed = '6s',\n  thickness = 1,\n  backgroundColor = '#000000',\n  textColor = '#ffffff',\n  borderColor = '#222222',\n  children,\n  ...rest\n}) => {\n  return (\n    <Component\n      className={`relative inline-block overflow-hidden rounded-[20px] ${className}`}\n      style={{\n        padding: `${thickness}px 0`,\n        ...rest.style\n      }}\n      {...rest}\n    >\n      <div\n        className=\"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      <div\n        className=\"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      <div\n        className=\"relative z-1 border text-center text-[16px] py-[16px] px-[26px] rounded-[20px]\"\n        style={{ background: backgroundColor, color: textColor, borderColor }}\n      >\n        {children}\n      </div>\n    </Component>\n  );\n};\n\nexport default StarBorder;\n\n// tailwind.config.js\n// module.exports = {\n//   theme: {\n//     extend: {\n//       animation: {\n//         'star-movement-bottom': 'star-movement-bottom linear infinite alternate',\n//         'star-movement-top': 'star-movement-top linear infinite alternate',\n//       },\n//       keyframes: {\n//         'star-movement-bottom': {\n//           '0%': { transform: 'translate(0%, 0%)', opacity: '1' },\n//           '100%': { transform: 'translate(-100%, 0%)', opacity: '0' },\n//         },\n//         'star-movement-top': {\n//           '0%': { transform: 'translate(0%, 0%)', opacity: '1' },\n//           '100%': { transform: 'translate(100%, 0%)', opacity: '0' },\n//         },\n//       },\n//     },\n//   }\n// }\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}