vue-bits/public/r/SpotlightCard.json

{"name":"SpotlightCard","title":"SpotlightCard","description":"Dynamic spotlight follows cursor casting gradient illumination.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div\n    ref=\"divRef\"\n    @mousemove=\"handleMouseMove\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n    :class=\"['relative rounded-3xl border overflow-hidden p-8', className]\"\n  >\n    <div\n      class=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out\"\n      :style=\"{\n        opacity,\n        background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`\n      }\"\n    />\n\n    <slot />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\n\ninterface Position {\n  x: number;\n  y: number;\n}\n\ninterface SpotlightCardProps {\n  className?: string;\n  spotlightColor?: string;\n}\n\nconst { className = '', spotlightColor = 'rgba(255, 255, 255, 0.25)' } = defineProps<SpotlightCardProps>();\n\nconst divRef = useTemplateRef<HTMLDivElement>('divRef');\nconst isFocused = ref<boolean>(false);\nconst position = ref<Position>({ x: 0, y: 0 });\nconst opacity = ref<number>(0);\n\nconst handleMouseMove = (e: MouseEvent) => {\n  if (!divRef.value || isFocused.value) return;\n\n  const rect = divRef.value.getBoundingClientRect();\n  position.value = { x: e.clientX - rect.left, y: e.clientY - rect.top };\n};\n\nconst handleFocus = () => {\n  isFocused.value = true;\n  opacity.value = 0.6;\n};\n\nconst handleBlur = () => {\n  isFocused.value = false;\n  opacity.value = 0;\n};\n\nconst handleMouseEnter = () => {\n  opacity.value = 0.6;\n};\n\nconst handleMouseLeave = () => {\n  opacity.value = 0;\n};\n</script>\n","path":"SpotlightCard/SpotlightCard.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Components"]}