Component Boom

src/content/TextAnimations/ShinyText/ShinyText.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface ShinyTextProps {
+  text: string
+  disabled?: boolean
+  speed?: number
+  className?: string
+}
+
+const props = withDefaults(defineProps<ShinyTextProps>(), {
+  text: '',
+  disabled: false,
+  speed: 5,
+  className: ''
+})
+
+const animationDuration = computed(() => `${props.speed}s`)
+</script>
+
+<template>
+  <div
+    :class="`text-[#b5b5b5a4] bg-clip-text inline-block ${!props.disabled ? 'animate-shine' : ''} ${props.className}`"
+    :style="{
+      backgroundImage: 'linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%)',
+      backgroundSize: '200% 100%',
+      WebkitBackgroundClip: 'text',
+      animationDuration: animationDuration
+    }"
+  >
+    {{ props.text }}
+  </div>
+</template>
+
+<style scoped>
+@keyframes shine {
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+}
+
+.animate-shine {
+  animation: shine 5s linear infinite;
+}
+</style>