[ REFACT ] : ShinyText Text Animation

src/constants/code/TextAnimations/shinyTextCode.ts

@@ -1,13 +1,20 @@
-import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw';
 import { createCodeObject } from '@/types/code';
+import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw';
 
 export const shinyText = createCodeObject(code, 'TextAnimations/ShinyText', {
+  installation: `npm install motion-v`,
   usage: `<template>
   <ShinyText 
-    text="Just some shiny text!" 
+    text="✨ Shiny Text Effect"
+    :speed="2"
+    :delay="0.5"
     :disabled="false"
-    :speed="3" 
-    class-name="your-custom-class"
+    :color="'#b5b5b5'"
+    :shine-color="'#ffffff'"
+    :spread="120"
+    :direction="'left'"
+    :yoyo="false"
+    :pause-on-hover="false"
   />
 </template>
 

src/content/TextAnimations/ShinyText/ShinyText.vue

@@ -1,49 +1,135 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { Motion, useAnimationFrame, useMotionValue, useTransform } from 'motion-v';
+import { computed, ref, watch } from 'vue';
 
 interface ShinyTextProps {
   text: string;
   disabled?: boolean;
   speed?: number;
   className?: string;
+  color?: string;
+  shineColor?: string;
+  spread?: number;
+  yoyo?: boolean;
+  pauseOnHover?: boolean;
+  direction?: 'left' | 'right';
+  delay?: number;
 }
 
 const props = withDefaults(defineProps<ShinyTextProps>(), {
-  text: '',
   disabled: false,
-  speed: 5,
-  className: ''
+  speed: 2,
+  className: '',
+  color: '#b5b5b5',
+  shineColor: '#ffffff',
+  spread: 120,
+  yoyo: false,
+  pauseOnHover: false,
+  direction: 'left',
+  delay: 0
 });
 
-const animationDuration = computed(() => `${props.speed}s`);
+const isPaused = ref(false);
+const progress = useMotionValue(0);
+const elapsedRef = ref(0);
+const lastTimeRef = ref<number | null>(null);
+const directionRef = ref(props.direction === 'left' ? 1 : -1);
+
+const animationDuration = computed(() => props.speed * 1000);
+const delayDuration = computed(() => props.delay * 1000);
+
+useAnimationFrame(time => {
+  if (props.disabled || isPaused.value) {
+    lastTimeRef.value = null;
+    return;
+  }
+
+  if (lastTimeRef.value === null) {
+    lastTimeRef.value = time;
+    return;
+  }
+
+  const deltaTime = time - lastTimeRef.value;
+  lastTimeRef.value = time;
+
+  elapsedRef.value += deltaTime;
+
+  // Animation goes from 0 to 100
+  if (props.yoyo) {
+    const cycleDuration = animationDuration.value + delayDuration.value;
+    const fullCycle = cycleDuration * 2;
+    const cycleTime = elapsedRef.value % fullCycle;
+
+    if (cycleTime < animationDuration.value) {
+      // Forward animation: 0 -> 100
+      const p = (cycleTime / animationDuration.value) * 100;
+      progress.set(directionRef.value === 1 ? p : 100 - p);
+    } else if (cycleTime < cycleDuration) {
+      // Delay at end
+      progress.set(directionRef.value === 1 ? 100 : 0);
+    } else if (cycleTime < cycleDuration + animationDuration.value) {
+      // Reverse animation: 100 -> 0
+      const reverseTime = cycleTime - cycleDuration;
+      const p = 100 - (reverseTime / animationDuration.value) * 100;
+      progress.set(directionRef.value === 1 ? p : 100 - p);
+    } else {
+      // Delay at start
+      progress.set(directionRef.value === 1 ? 0 : 100);
+    }
+  } else {
+    const cycleDuration = animationDuration.value + delayDuration.value;
+    const cycleTime = elapsedRef.value % cycleDuration;
+
+    if (cycleTime < animationDuration.value) {
+      // Animation phase: 0 -> 100
+      const p = (cycleTime / animationDuration.value) * 100;
+      progress.set(directionRef.value === 1 ? p : 100 - p);
+    } else {
+      // Delay phase - hold at end (shine off-screen)
+      progress.set(directionRef.value === 1 ? 100 : 0);
+    }
+  }
+});
+
+watch(
+  () => props.direction,
+  () => {
+    directionRef.value = props.direction === 'left' ? 1 : -1;
+    elapsedRef.value = 0;
+    progress.set(0);
+  },
+  {
+    immediate: true
+  }
+);
+
+const backgroundPosition = useTransform(progress, p => `${150 - p * 2}% center`);
+
+const handleMouseEnter = () => {
+  if (props.pauseOnHover) isPaused.value = true;
+};
+
+const handleMouseLeave = () => {
+  if (props.pauseOnHover) isPaused.value = false;
+};
+
+const gradientStyle = computed(() => ({
+  backgroundImage: `linear-gradient(${props.spread}deg, ${props.color} 0%, ${props.color} 35%, ${props.shineColor} 50%, ${props.color} 65%, ${props.color} 100%)`,
+  backgroundSize: '200% auto',
+  WebkitBackgroundClip: 'text',
+  backgroundClip: 'text',
+  WebkitTextFillColor: 'transparent'
+}));
 </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
-    }"
+  <Motion
+    tag="span"
+    :class="['inline-block', className]"
+    :style="{ ...gradientStyle, backgroundPosition }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
-    {{ props.text }}
-  </div>
+    {{ text }}
+  </Motion>
 </template>
-
-<style scoped>
-@keyframes shine {
-  0% {
-    background-position: 100%;
-  }
-  100% {
-    background-position: -100%;
-  }
-}
-
-.animate-shine {
-  animation: shine 5s linear infinite;
-}
-</style>

src/demo/TextAnimations/ShinyTextDemo.vue

@@ -1,33 +1,31 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <h2 class="demo-title-extra">Basic</h2>
-
-      <div class="demo-container h-[200px]">
-        <ShinyText text="Just some shiny text!" :disabled="false" :speed="3" class-name="shiny-text-demo" />
-      </div>
-
-      <h2 class="demo-title-extra">Button Text</h2>
-
-      <div class="demo-container h-[200px]">
-        <div class="shiny-button">
-          <ShinyText text="Shiny Button" :disabled="false" :speed="3" class-name="shiny-text-demo" />
-        </div>
-      </div>
-
-      <h2 class="demo-title-extra">Configurable Speed</h2>
-
-      <div class="demo-container h-[200px]">
+      <div class="h-[400px] text-3xl demo-container">
         <ShinyText
-          :text="speed < 2.5 ? '🐎 This is fast!' : '🐌 This is slow!'"
-          :disabled="false"
+          text="✨ Shiny Text Effect"
+          :delay="delay"
           :speed="speed"
-          class-name="shiny-text-demo"
+          :color="color"
+          :shine-color="shineColor"
+          :spread="spread"
+          :direction="direction"
+          :yoyo="yoyo"
+          :pause-on-hover="pauseOnHover"
+          :disabled="disabled"
         />
       </div>
 
       <Customize>
-        <PreviewSlider title="Animation Duration" v-model="speed" :min="1" :max="5" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="5" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Delay" v-model="delay" :min="0" :max="3" :step="0.1" value-unit="s" />
+        <PreviewSlider title="Spread" v-model="spread" :min="0" :max="180" :step="5" value-unit="deg" />
+        <PreviewColor title="Color" v-model="color" class="mb-2" />
+        <PreviewColor title="Shine Color" v-model="shineColor" class="mb-2" />
+        <PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
+        <PreviewSwitch title="Yoyo Mode" v-model="yoyo" />
+        <PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
+        <PreviewSwitch title="Disabled" v-model="disabled" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -44,17 +42,33 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import TabbedLayout from '../../components/common/TabbedLayout.vue';
-import PropTable from '../../components/common/PropTable.vue';
-import CliInstallation from '../../components/code/CliInstallation.vue';
-import CodeExample from '../../components/code/CodeExample.vue';
-import Customize from '../../components/common/Customize.vue';
-import PreviewSlider from '../../components/common/PreviewSlider.vue';
-import ShinyText from '../../content/TextAnimations/ShinyText/ShinyText.vue';
+import CliInstallation from '@/components/code/CliInstallation.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
+import Customize from '@/components/common/Customize.vue';
+import PreviewColor from '@/components/common/PreviewColor.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
+import PreviewSlider from '@/components/common/PreviewSlider.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
 import { shinyText } from '@/constants/code/TextAnimations/shinyTextCode';
+import ShinyText from '@/content/TextAnimations/ShinyText/ShinyText.vue';
+import { ref } from 'vue';
 
-const speed = ref(3);
+const speed = ref(2);
+const delay = ref(0);
+const color = ref('#b5b5b5');
+const shineColor = ref('#ffffff');
+const spread = ref(120);
+const direction = ref<'left' | 'right'>('left');
+const yoyo = ref(false);
+const pauseOnHover = ref(false);
+const disabled = ref(false);
+
+const directionOptions = [
+  { value: 'left', label: 'Left' },
+  { value: 'right', label: 'Right' }
+];
 
 const propData = [
   {
@@ -64,16 +78,58 @@ const propData = [
     description: 'The text to be displayed with the shiny effect.'
   },
   {
-    name: 'disabled',
-    type: 'boolean',
-    default: 'false',
-    description: 'Disables the shiny effect when set to true.'
+    name: 'color',
+    type: 'string',
+    default: '"#b5b5b5"',
+    description: 'The base color of the text.'
+  },
+  {
+    name: 'shineColor',
+    type: 'string',
+    default: '"#ffffff"',
+    description: 'The color of the shine/highlight effect.'
   },
   {
     name: 'speed',
     type: 'number',
-    default: '5',
-    description: 'Specifies the duration of the animation in seconds.'
+    default: '2',
+    description: 'Duration of one animation cycle in seconds.'
+  },
+  {
+    name: 'delay',
+    type: 'number',
+    default: '0',
+    description: 'Pause duration (in seconds) between animation cycles.'
+  },
+  {
+    name: 'spread',
+    type: 'number',
+    default: '120',
+    description: 'The angle (in degrees) of the gradient spread.'
+  },
+  {
+    name: 'yoyo',
+    type: 'boolean',
+    default: 'false',
+    description: 'If true, the animation reverses direction instead of looping.'
+  },
+  {
+    name: 'pauseOnHover',
+    type: 'boolean',
+    default: 'false',
+    description: 'Pauses the animation when the user hovers over the text.'
+  },
+  {
+    name: 'direction',
+    type: "'left' | 'right'",
+    default: '"left"',
+    description: 'The direction the shine moves across the text.'
+  },
+  {
+    name: 'disabled',
+    type: 'boolean',
+    default: 'false',
+    description: 'Disables the shiny effect when set to true.'
   },
   {
     name: 'className',